Egyedi Facebook megosztás számláló

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:

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);

• jQuery Facebook Like Counter letöltése