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:
Facebook Messenger beillesztése plugin nélkül
|
Olvasási idő:
3
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 Facebook Chat Plugin-t) az oldalunkra.
<?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 "A Messenger elhelyezése a webhelyeden" varázslót (Beállítások > Üzenetküldés > A Messenger elhelyezése a webhelyeden), 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.
Frissítés - 2020. 10. 05.
A Facebook felületének frissülésével egyidejűleg az oldalak beállításainak elrendezésén is változtatott, ezért szükségessé vált a "Messenger elhelyezése a webhelyeden" varázsló elérési útvonalának (Beállítások > Üzenetküldés) frissítése. (A jelzésért köszönet Papp Csabának!)
