Facebook FBML és Javascript SDK telepítése – MIÉRT és HOGYAN?

2010. szeptember 30. | Írta: Horváth Oszkár | Hozzászólás »

Teljesen feleslegesnek tartom ezt a sok betűszót bevillantani, de nem tudok mit csinálni, ez a nevük. Gyorsan a válasz két felmerülő kérdésre:

Mi micsoda? Az FBML vagy XFBML a Facebook saját “kis” leíró nyelve, amellyel (ha a lentieken túlesel) egyszerűen használhatod a szolgáltatásait. A Javascript SDK pedig egy programozási segédlet, vagy fejlesztői csomag, a lényege, hogy ahhoz képest, amilyen bonyolult a teljes rendszer, te kapsz egy rém egyszerű programnyelvecskét (az FBML-t, tádá!), amivel használhatod a Facebook szolgáltatásait a weboldaladon. A cikk címe tehát: “a Facebook neked szánt kis programnyelve: miért érdemes használni, és hogyan kell?” Csak erre (remélem) a kutya nem keres rá.

FBML: MIÉRT?

Mert amúgy egy sima Like gombhoz egy ordenáré hosszú kódot kell beillesztened. Ha azonban az oldaladon elérhetők a Javascript SDK szolgáltatásai, akkor két szót kell leírnod FBML-ben. Ha akarsz még egy like boxot is, ahol rajongani lehet az oldaladért, az még újabb 2 szót. Sőt, elérhető összesen 8 social plugin, regisztráció, kommentelés, ezek nagy része pedig csak és kizárólag FBML-ben hozható létre, mint ahogy a Like gomb is csak FBML esetén ajálnja fel lájkolás után, hogy egyből az üzenőfalra is kiküldd a linket, saját szavaiddal ajánlva. Na? Meg is mutatom a különbséget:

FBML nélkül: <iframe src=”http://www.facebook.com/plugins/like.php?href=idejönelinked&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:450px; height:80px;” allowTransparency=”true”></iframe>

FBML esetén: <fb:like></fb:like>

Melyik tetszik jobban? A social pluginek, amelyekről azok álmodozhatnak, akik telepítettek FBML-t az oldalukra:

• Like gomb: egy kattintással megoszthatják a linkedet a látogatók az üzenőfalukon. Ez normál Like gomb esetén csak 1 sorként jelenik meg, az FBML azonban úgy ágyazza be a gombot, hogy a megnyomása után rendes üzenőfali linkként, szöveges ajánlásoddal kiegészítve is elküldheted.
• Activity Feed: megmutatja a látogatóidnak, hogy az ő barátai mit találtak jónak a TE weboldaladon (mit lájkoltak, mire kommenteltek).
• Recommendations (ajánlások): a látogatódnak a Facebook ajánl aloldalakat a te weboldaladról, amelyek – ismerve ízlését – valószínűleg érdekelhetik. Ez a “hasonló cikkek” elég elterjedt szolgáltatáshoz hasonló, csak még annál is okosabb.
• Like Box: ez a már jól elterjedt doboz, ahol az oldal rajongói oldalához tud bárki csatlakozni. Igény esetén megjelenik rajta néhány már csatlakozott tag (a látogatód ismerőseivel az élen), és a projekted Facebook üzenőfaláról néhány friss gondolat.
• Login Button (bejelentkezés gomb): na itt lehet elfelejteni azt, hogy regisztrációt építesz az oldaladba. Aki lájkolja, belép egy kattintással, nem kell megadnia semmilyen adatot, te tudod, hogy ő ő, és ugyanúgy szűrheted a szolgáltatásaidat aszerint, hogy be van-e lépve, és ha be van lépve, akkor ki ő, mi jár neki.
• Facepile (arcképhalmaz): ugyanaz az arcképekből álló sor, ami a Like boxban van, és a látogatód ismerőseit listázza első helyen, de külön használhatod és bárhol elhelyezheted az oldaladon.
• Comments: ahol elhelyezed, ott kiegészíti az oldaladat egy kommentelő résszel. Ezzel és a regisztrációval egy egyáltalán nem webkettes oldalt is gyorsan fel lehet turbózni funkcionálisan, de amúgy is érdekes lehet, hiszen gondolhatod, hogy az itt hagyott hozzászólásnak van utóélete (megjelenik az illető üzenőfalán, illetve a feljebb említett Activity Feed listázhatja, ha a hozzászóló valamelyik ismerőse téved majd az oldaladra).
• Live Stream: ez élő beszélgetést tesz lehetővé, chat funkcióhoz hasonlóan.

FBML: HOGYAN?

Négy lépés a Mennyország:

1. Szükséged van egy application ID-re az oldaladhoz
2. Be kell szúrnod 4-5 sort az oldalad fejlécébe
3. Be kell szúrnod egy ordenáré kódot az oldal láblécébe, a /body elé
4. El kell helyezned a megfelelő, pl. Like boxot jelentő FBML kódot ott, ahol szeretnéd, hogy megjelenjen

Bővebben:

1. Application ID: látogass el a developers.facebook.com/setup címre. Írd be a weboldalad nevét (tetszőleges), a címét (perjellel a végén!), válassz egy nyelvet, és nyomd meg a gombot (“Create application”)! Itt előfordulhat, ha még nem adtál meg mobilszámot (mint magánszemély, Facebook felhasználó), hogy elkéri, és küld egy SMS-t, hogy ellenőrizze, hogy valós személy vagy-e. (Van bankkártyás ellenőrzési lehetőség is, de az SMS talán magyar felhasználók körében népszerűbb.)

Itt kapsz két kódot: App ID és App Secret. Az App ID-t majd be kell másolnod 1-2 helyre, nem titok, nyilvános. A másikat sehová nem kell bemásolnod, de tedd el, ha baj van, szükség lehet rá. (Itt egyébként kapsz egy mintakódot, ami jóval kevesebb, mint amit én itt közzéteszek, ha kimásolod, megérted, akkor már elérted célodat, és készen vagy.)

2. A fejlécben elhelyezendő kódok: az oldalad HTML kódja valahogy úgy kezdődik, hogy <!DOCTYPE …>, aztán jön egy <html>. Nos utóbbi formában kell, hogy kinézzen jó esetben, ebből a dőlt betű, amit az FBML érdekében kell igazából beírni: <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml”>. Miután mi az emotions online ügynökségnél WordPresst használunk mindenre, hozzáteszem, hogy ha mindezt egy WordPress template-ben módosítod, akkor még lehet, hogy egy <?php language_attributes(); ?> még jó, ha ottmarad a végén.

Ezután bárhol a <head> és </head> rész között szükséged van az alábbi néhány sorra:

<meta property=”fb:admins” content=”ide jön a user ID-d“/>
<meta property=”fb:app_id” content=”ide jön a fenti App ID” />
<meta property=”og:type” content=”article” />
<meta property=”og:title” content=”az oldal megnevezése” />
<meta property=”og:url” content=”az oldal URL-je” />

Itt a user ID alatt a te azonosítód mint Facebook magánszemély azonosítója szükséges. Ez nyilvános, ha bárki tudja, hogy te ki vagy, akkor megnézheti, hogy mi az azonosítód, ne sajnáld. De ki kell nyomoznod: kattints a saját adatlapodra, és az URL-ben benne lesz a user ID-d. Ha egyedi URL-t választottál már magadnak, akkor pedig pont fordítva, a graph.facebook.com/ateegyedicimed URL-en meg fogod kapni az ID-det.

3. A weboldalad lábléc részébe, a </body> címke elé másold be ezt:

<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: ‘ide ismét az App ID jön!‘, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(‘script’);
e.type = ‘text/javascript’;
e.src = document.location.protocol +
‘//connect.facebook.net/hu_HU/all.js’;
e.async = true;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>

4. Illeszd be a megfelelő social plugint, ahová szeretnéd, például tedd ezt a blogbejegyzésed kódja mögé:

<fb:like></fb:like>

ÉS KÉSZ.

Nos, ennyi. Hosszadalmasnak tűnik, de valójában 10 perc az egész, utána pedig kényelem.