Képzeld el, hogy a weboldalad egy elegáns üzlet a város közepén. Gyönyörű a kirakat, hívogató a beltér, de a vevőnek van egy kis bizonytalansága: „Vajon élő ez a bolt? Van itt rajtam kívül más is?” Ekkor ránéz a falra, és látja a Facebook-paneledet: friss posztok, pörgő események és ismerős arcok, akik már lájkolták az oldalt. A bizalmatlanság azonnal elillan.

A Facebook-oldal (leánykori nevén Like Box, ma már Page Plugin) beillesztése nem csupán egy technikai elem, hanem a social proof, azaz a társadalmi bizonyíték egyik legerősebb eszköze. De hogyan csináld jól?

  1. A gyári út: A hivatalos Page Plugin

A Facebook Developers oldala kínálja a legegyszerűbb, „hivatalos” megoldást. Ez a Page Plugin lehetővé teszi, hogy az oldalad borítóképét, a lájkolókat és a legfrissebb bejegyzéseket is megjelenítsd.

A folyamat egyszerű:

  1. A konfiguráció: Első lépésként látogass el erre az oldalra. Itt add meg a Facebook-oldalad teljes URL-jét. Állítsd be a szélességet (például 340 pixel az oldalsávhoz) és a magasságot.
    Állítsd be a tabs mezőben, hogy mi jelenjen meg a fülön.
    Ha hagyod a timeline szót, akkor az idővonal megjelenítésre kerül, ha pedig üresen hagyod, akkor az idővonal nem kerül rá.
    Egyszerre több fület is meg tudsz jeleníteni, ehhez csupán egymás mellé, vesszővel elválasztva kell a fülek neveit írni, pl.: timeline, events, messages.
    Pipáld be a neked tetsző opciókat: Small Header: kisebb fejléckép, Hide Cover: háttérkép elrejtése, Adapt container width: reszponzív kialakítás támogatása, Show Facepile: a követők arcképének mutatása.
  2. A kód kérése: Kattints a „Get Code” gombra. Itt egy felugró ablakot fogsz látni két különböző kódrészlettel. Ne ijedj meg, mindkettőre szükséged lesz!

Hova illeszd be a kódokat?

Az igazi „mágia” itt kezdődik. A másoláshoz kövesd pontosan ezt a sorrendet:

  • Az 1. kódrészlet (JavaScript SDK): Ezt a kódhalmazt a weboldalad forráskódjában a nyitó <body> tag után kell közvetlenül elhelyezned. Ez a motor, ami életre kelti a plugint. WordPress esetén ezt a header.php fájlban találod meg, de sok modern sablon engedélyezi, hogy a beállításoknál (Header/Footer scripts) add meg ezt a kódot.
  • A 2. kódrészlet (A megjelenítő div): Ez maga a „doboz”. Ezt a részt oda illeszd be a weboldaladon, ahol szeretnéd, hogy a Facebook-oldalad ténylegesen megjelenjen. Ha a WordPress oldalsávjába (Sidebar) szánod, csak húzz be egy egyszerű „Egyéni HTML” widgetet, és másold bele ezt a kódot.

Például ha egy éttermet vezetsz, érdemes bekapcsolni az „Events” (Események) fület is, így a honlapod látogatói rögtön látják a hétvégi élőzenés vacsorádat is, anélkül, hogy átkattintanának a Facebookra.

  1. Teljesen egyedi Likebox készítése saját CSS-sel

A gyári megoldás néha olyan, mint egy idegen test: fehér háttér, kék gombok, fix keretek. Mi van, ha a weboldalad sötét tónusú vagy minimál stílusú?
Régebben népszerű volt az egyedi Like Box készítése, ahol CSS segítségével teljesen átformálhattuk a megjelenést. Bár a Facebook azóta szigorított a szabályokon és korlátozta a vizuális módosításokat, még mindig van mozgástér.

  1. lépés: A motor beindítása

Helyezd el az alábbi JavaScript SDK kódot közvetlenül a weboldalad <body> tag-jének nyitása után. Ez biztosítja, hogy a script minden böngészőben (még a kényesebb régebbi verziók alatt is) hibátlanul fusson.

<div id=”fb-root”></div>

<script type=”text/javascript”>

    (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 = “//connect.facebook.net/hu_HU/all.js#xfbml=1&appId=IDE_ÍRD_AZ_APP_ID_T”;

        fjs.parentNode.insertBefore(js, fjs);

    }(document, ‘script’, ‘facebook-jssdk’));

</script>

  1. lépés: A doboz elhelyezése és paraméterezése

Másold az alábbi kódot oda, ahol a panelt látni szeretnéd. Itt a legfontosabb a css paraméter, ahol a saját stíluslapod elérhetőségét kell megadnod.

<fb:fan profile_id=”AZ_OLDALAD_ID_SZÁMA”

    stream=”0″

    connections=”30″

    width=”300″

    height=”530″

    header=”0″

    logobar=”0″  

    css=”https://a-te-oldalad.hu/css/facebook.css?1″>

</fb:fan>

Fontos paraméterek:

  • profile_id: Ez a te oldalad egyedi ujjlenyomata. Ha a Facebook-oldaladnak már van szép, egyedi neve (pl. com/teoldalad), az ID számot a legegyszerűbben az oldalad „Névjegy” (About) szekciójában találod meg, vagy keresd az RSS-hírcsatorna linkjét az oldalsávban – a hivatkozás végén az id= utáni számsor lesz a te kódod.
  • stream: Ezzel döntheted el, hogy szeretnéd-e megjeleníteni a legfrissebb posztjaidat. Ha a cél a letisztult kinézet, állítsd 0-ra, ha viszont „élővé” tennéd az oldalt, használd az 1-es értéket.
  • connections: Itt adhatod meg, hány rajongó arcát mutassa meg a rendszer. Ügyelj rá, hogy hiába írsz be nagy számot, a modul csak annyi embert fog megjeleníteni, amennyi a megadott magasságba és szélességbe kényelmesen belefér.
  • width & height: A doboz fizikai méretei pixelben. Érdemes az oldalsávod (sidebar) szélességéhez igazítani, hogy ne lógjon ki az elrendezésből.
  • header: Itt kapcsolhatod ki vagy be a „Csatlakozz a Facebookon” fejlécet. A modernebb, elegánsabb weboldalaknál javasolt a 0 érték használata (kikapcsolás), így több hely marad a tartalomnak.
  • css: Ez a beállítás a projekt „lelke”. Itt adod meg a saját stíluslapod (CSS) pontos webes elérési útját. Ezzel a hivatkozással mondod meg a Facebooknak: „Ne a saját színeidet használd, hanem azokat, amiket én írtam elő ebben a fájlban!”.
  1. lépés: A stílus kialakítása (A CSS titka)

Hozd létre a facebook.css fájlt a szervereden. Itt bármit megváltoztathatsz: háttérszíneket, betűtípusokat vagy a követők képeinek keretét.

.fan_box a:hover{  text-decoration:none}

.fan_box .full_widget{  height:535px;  border:0 !important; background:none !important}

.fan_box .connect_top{  background:none !important; padding:0 !important}

.fan_box .profileimage, .fan_box .name_block a{color:#0085F8 !important}

.fan_box .profileimage, .fan_box .name_block{padding-bottom:8px !important; position:relative !important}

.fan_box .profileimage, .fan_box .name_block a:hover{   color:#ffffff !important}

.fan_box .full_widget .connect_top{  background-color:#050505 !important;  padding:10px 10px 10px 10px !important;  margin-bottom:10px !important; border-bottom: 1px dotted #666666}

.fan_box .full_widget .connect_top img{ border:1px solid #666666 !important;  padding:2px !important;  background-color:#2F2F2F !important;  margin-right:10px !important; width: 50px; height: 50px;}

.fan_box .connect_action{ padding:0 !important}

.fan_box .connections{ padding:0 !important;  border:0 !important;  font-family:Arial;  font-size:12px;  font-weight:bold;  color:#666}

span.total{ color:#0085F8;  font-weight:normal;  line-height:19px;  text-align:center;  display:block;  font-size:16px;  font-family:Georgia;  padding:10px 0px 10px 0px !important }

.fan_box .connections .connections_grid{ padding-top:10px !important}

.fan_box .connections_grid .grid_item{ padding:0 13px 10px 0 !important}

.fan_box .connections_grid .grid_item img{border: 1px solid #000000;}

.fan_box .connections_grid .grid_item .name{ font-family:Arial;  font-weight:normal; color:#CCC!important;  padding-top:1px !important;  font-size:12px !important}

.fan_box .connect_widget{right:0px; bottom:0px}

.fan_box .connect_widget .connect_widget_interactive_area{margin:0 !important}

.fan_box .connect_widget td.connect_widget_vertical_center{padding:0 !important}

.connect_widget .connect_widget_text{color:#424242 !important; display:none !important}

Aranyat érő tipp a frissítéshez

A Facebook rendszere rendkívül agresszívan tárolja el (cache-eli) a megadott CSS fájlt. Ha módosítasz valamit a stíluslapon, és nem látod a változást, ne ess pánikba! Egyszerűen menj vissza a 2. lépésben megadott kódhoz, és a CSS hivatkozás végén a kérdőjel utáni számot növeld meg (például: facebook.css?2). Ezzel kényszeríted a Facebookot, hogy töltse be az új verziót.

Miért ne csak egy sima ikont tegyél ki?

Sokan megelégszenek egy kis kék „f” betűvel. Ez hiba. Miért?

  • Interakció: A Page Pluginon keresztül a látogató ott helyben lájkolhat, nem kell elhagynia a honlapodat.
  • Frissesség: Ha nincs időd naponta frissíteni a blogodat, a Facebook-hírcsatorna mutatja, hogy a cég aktív.
  • Bizalom: Ha látom, hogy 3 ismerősöm is kedveli az oldalt, sokkal nagyobb eséllyel fogok vásárolni.

Összegzés

Ne telepíts felesleges bővítményeket! Használd a Facebook hivatalos kódgenerátorát, illeszd be manuálisan a kódokat, és ügyelj arra, hogy a panel reszponzív legyen. Egy jól elhelyezett Facebook-modul a weboldalad oldalsávjában vagy a láblécben olyan, mint egy folyamatosan nyitva tartó ügyfélszolgálati ablak.