Számos esetben előfordul, hogy nem szeretnénk megjeleníteni a Facebook-tól kapott Like gombot és a kis számlálót, mert egyszerűen mondjuk nem illik az oldal külalakjába, vagy éppen egy cikk listára szeretnénk rakni, ahol meg még inkább eltorzítaná az összképet a rengeteg Facebook Liket button. A most bemutatásra kerülő script alapvetően a Facebook Graph API-t használja, egy kis jQuery script segítségével így a végeredményként, egyetlen számot kapunk vissza, amit olyan környezetbe helyezünk el, amilyenbe csak szeretnénk, ezzel is megtartva oldalunk eredeti szépségét.
Megjegyzés: leszögeznénk, hogy a Like és a Megosztás egy ideje már egy és ugyanazon metódust használja a Facebookon, viszont semmiképp nem keverendő össze azzal, hogy például egy Facebook oldal hányan kedvelik, azzal hogy egy URL-t hányan like-oltak.
A Facebook Graph API viszonylag könnyen használható a mindenféle kikérdezések szempontjából, ahhoz hogy a script működését megértsük, előbb lássuk hogyan is működik ez. Egy egyszerű példaként először lássuk, hogy hányan osztották meg magát a http://www.totalstudio.hu oldalt
http://graph.facebook.com/?ids=http://www.totalstudio.hu
Majd pedig lássuk, hogy a Facebookon hányan Like-oltak minket.
http://graph.facebook.com/?ids=168017006562036
Mindkettő eljárás egy object-el tér vissza, amiből kinyerhetjük a számunkra megfelelő adatokat. A különbség a kettő között, hogy a Facebook oldal lekérdezésekor jóval több adatot kapunk meg és ott a shares helyett likes van. Mi most az első URL elemzésével fogunk foglalkozni, mert a honlapba való integrációnál ez az érdekesebb. Jelen esetben a visszatérő objektumunk a következő:
{
"http://www.totalstudio.hu":
{
"id": "http://www.totalstudio.hu",
"shares": 9
}
}
Ezt az objektumot bárki feldolgozhatja, azonban mi most egy jQuery scriptes feldolgozást mutatunk be, ami igazán megkönnyítheti bárkinek a dolgát. A Script lényegében nem csinál mást, mint kikeresi a shares elemet és a hozzá tartozó értéket beleírja egy általunk megadott html elembe az oldalon. Jelen esetben mi egy span-t használunk, aminek a stílus készlete likebox lesz. A jQuery függvény ezt a stílus készletet fogja keresni elemzésre. Title-nek azt az URL-t adjuk meg, amit szeretnénk leellenőrizni. Végeredményben így néz ki a kérés:
< span class="likebox" title="http://www.totalstudio.hu">< /span>
A jQuery Plugint pedig az alábbiak alapján hívjuk meg, lehetőleg ott ahol az összes scriptet behívjuk. Értelemszerűen, hogy az oldalban nincs másik script behívás, akkor jelenjen meg a kódban elhelyezéskor az alábbi körül:
$(document).ready(function()
{
$('span.likebox').fblikecount();
}
});
A végeredmény egy szám, ami megjelenik a „likebox" class-al rendelkező elemünkben, mi adtunk, egy kis designt ennek az elemnek, kapott egy háttérképet, és ennek megfelelően egy padding-ot balról és a végeredmény a következő lett:
A jquery.fblikecount.js letölthető a cikk végén, de ide is bemásoljuk, hogy mindenki lássa mi is található ebben a szerintünk végtelenül egyszerű scriptben. Megjegyzés: amennyiben a likes- számot szeretnénk kikérdezni egyértelműen a json[objLink].shares -t kell json[objLink].likes -ra átírni.
(function($){
$.fn.fblikecount = function(options){
var defaults = {
baseUrl: 'http://graph.facebook.com/?ids='
};
var options = $.extend(defaults, options);
var count = 0;
return this.each(function(){
var $this = $(this);
$this.hide();
var objLink = $(this).attr('title');
if(objLink.indexOf('http') === 0){
$.getJSON(defaults.baseUrl + objLink + '&callback=?', function(json){
if(json[objLink] && json[objLink].shares){
$this.html(json[objLink].shares);
$this.show();
}
});
}
});
}
})(jQuery); 
