Facebook Messenger beillesztése plugin nélkül előnézeti képe

Facebook Messenger beillesztése plugin nélkül

| Olvasási idő: 2 perc

Egyelőre még béta verzióban van, de már nagyon sokan használják, így érdemes lehet megnézni egy plugin nélküli megoldást arra, hogyan tudjuk beilleszteni a Facebook "Messenger"-t (polgári nevén Facebook Customer Chat-et) az oldalunkra. 

A megszokottól eltérően két lépésben jutunk el a végleges kódunkig. Első körben nézzük meg, hogy mivel is tudunk tartalmat beágyazni a HTML kimenetbe! Hozzunk létre egy fájlt az mu-plugins mappában (pl. embed-facebook-messenger.php) az alábbi tartalommal: 

<?php
/*
Plugin Name: Embed Facebook Messenger
Plugin URI: https://www.webmenedzser.hu/snippet/facebook-messenger-beillesztese-plugin-nelkul
Description: Embed Facebook Messenger
Version: 1.0
Author: Radics Ottó
Author URI: https://www.webmenedzser.hu
License: GPLv3
*/

function embed_facebook_messenger() { ?>
  // GENERÁLT KÓD HELYE
<?php }

add_action('wp_footer', 'embed_facebook_messenger');

Mint láthatod, a wp_footer hook-ba kapaszkodunk bele, a HTML kimenetünk ott fog "landolni", ahol a wp_footer hook lefut. Miután végignyomkodtad a "Beépülő modul ügyfélchathez" varázslót (Oldal > Beállítások > Messenger-platform), kapni fogsz egy kódot, amit a // GENERÁLT KÓD HELYE szövegrész helyére illessz be, ahogyan itt is láthatod: 

<?php
/*
Plugin Name: Embed Facebook Messenger
Plugin URI: https://www.webmenedzser.hu/snippet/facebook-messenger-beillesztese-plugin-nelkul
Description: Embed Facebook Messenger
Version: 1.0
Author: Radics Ottó
Author URI: https://www.webmenedzser.hu
License: GPLv3
*/

function embed_facebook_messenger() { ?>
  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>
      window.fbAsyncInit = function() {
          FB.init({
              xfbml            : true,
              version          : 'v3.3'
          });
      };

      (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = 'https://connect.facebook.net/hu_HU/sdk/xfbml.customerchat.js';
          fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your customer chat code -->
  <div class="fb-customerchat"
       attribution=setup_tool
       page_id="< PAGE ID >"
       theme_color="#471696"
       logged_in_greeting="Szia! Ha bármilyen kérdésed van, írj nyugodtan! "
       logged_out_greeting="Szia! Ha bármilyen kérdésed van, írj nyugodtan! ">
  </div>
<?php }

add_action('wp_footer', 'embed_facebook_messenger');

Fontos, hogy a "fogadó oldalnak", ahova a kódot beágyazod, HTTPS-en keresztül kell elérhetőnek lennie, ellenkező esetben a chat ablak nem fog megjelenni.  

Az Európai Unió Bíróságának állásfoglalása szerint az ilyen és ehhez hasonló "közösségimédia-modulok" beágyazása előtt a felhasználótól előzetes hozzájárulást kell beszerezni. 

"A Facebook „Tetszik” gombjával ellátott honlap üzemeltetője a honlap látogatójára vonatkozó személyes adatok gyűjtése és a Facebook részére történő továbbítása tekintetében a Facebookkal közös adatkezelőnek minősülhet."

A részletekért lásd az erről szóló sajtóközleményt

Készen is vagyunk! :)

Frissítés - 2019. 07. 30. 

Kommentekben felmerült, hogy miért jobb ez a megoldás, mintha a "hivatalos" plugint használnánk. Erre írtam néhány gondolatot, lássuk őket: 

  • A beállítások lekéréséhez nem kell adatbázis hívás
  • Az itteni beállítások verziókövetve vannak
  • Egy kicsit elborultabb gondolat: oldaltól függően tudsz más köszöntő szöveget beállítani, ha úgy alakítod át a kódot, sőt, ezt az infót akár egy oldal/bejegyzés/termék meta mezőjében is tárolhatod.

Ez utóbbira nézzünk is egy példát: 

php
<?php
/*
Plugin Name: Embed Facebook Messenger
Plugin URI: https://www.webmenedzser.hu/snippet/facebook-messenger-beillesztese-plugin-nelkul
Description: Embed Facebook Messenger
Version: 1.0
Author: Radics Ottó
Author URI: https://www.webmenedzser.hu
License: GPLv3
*/

function embed_facebook_messenger() { ?>
  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>
      window.fbAsyncInit = function() {
          FB.init({
              xfbml            : true,
              version          : 'v3.3'
          });
      };

      (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = 'https://connect.facebook.net/hu_HU/sdk/xfbml.customerchat.js';
          fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your customer chat code -->
  <div class="fb-customerchat"
       attribution=setup_tool
       page_id="< PAGE ID >"
       theme_color="#471696"
       logged_in_greeting="Szia! Ha bármilyen kérdésed van <?php the_title(); ?> bejegyzéssel kapcsolatban, írj nyugodtan! "
       logged_out_greeting="Szia! Ha bármilyen kérdésed van <?php the_title(); ?> bejegyzéssel kapcsolatban, írj nyugodtan! ">
  </div>
<?php }

add_action('wp_footer', 'embed_facebook_messenger');

Nem tér el nagyban az eredetitől, pusztán a logged_in_greeting és logged_out_greeting attribútumok értékében van eltérés: a sablon szöveg helyett minden esetben az adott bejegyzés címét is belegenerálja a szövegbe, valahogy így: "Szia! Ha bármilyen kérdésed van a Hello world! bejegyzéssel kapcsolatban, írj nyugodtan!"

Természetesen a lehetőségek végtelenek (pl. ha a felhasználód be van lépve az oldaladon, szólíthatod a nevén) - a mondanivalóm lényege, hogy innentől kezdve mindent te kontrollálsz, míg az official plugin esetén ilyenekre nem lenne lehetőséged.