Úprava facebookového Like tlačidla - páči sa nám zjednodušené lajkovanie

V tomto jednoduchom tipe si ukážeme ako sa zbaviť textu vedľa klasického facebookového Like tlačidla a zároveň vypísať počet fanúšikov stránky.

To znamená že toto:

môžeme zmeniť na niečo takéto:

a s trochou kreativity aj na toto:

Vytvoríme si div s ID facebook-button a vložíme doň Facebook kód (v HTML5 implementácií, nezabudnúť tiež vložiť časť kódu do body elementu).

Aby nebol viditeľný text vedľa tlačítka, nastavíme divu presné rozmery a overflow: hidden. Najnovšie Facebook ponúka funkciu, pri ktorej klikutie na tlačidlo "otvorí" ponuku pre zdieľanie. Keďže je však obsah divu orezaný, bude orezaná aj táto ponuka, čo by vyzeralo škaredo. Preto ju schováme pomocou CSS.

#facebook-button
{width: 94px; height: 26px; overflow: hidden;}

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr
{display: none !important;}

Ak chceme vypísať počet lajkov, vytvoríme si div ID facebook-likes. Pomocou jQuery JSON funkcionality a Facebook Graph API načítame počet lajkov a vložíme ich do divu.

$(window).ready(function(){
    $.getJSON('https://graph.facebook.com/AlejTech', function(data){
        $('#facebook-likes').text(data.likes);}
    );
});

Aké informácie nám Facebook o stránke ponúkne si môžeme pozrieť keď otvoríme adresu https://graph.facebook.com/AlejTech . Namiesto Alejtech stačí vložiť username (AlejTech) alebo ID (98626263667) na Facebooku. Pomocou tohto JSON výstupu môžeme jednoducho vypísať akúkoľvek informáciu (ktorú nám Facebook Graph ponúka :) ).