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

Ú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:
facebook-like-2
a s trochou kreativity aj na toto:
facebook-like-3

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 :) ).

Skôr ako začneme: nahliadnite do spracovania vašich osobných údajov

Súbory cookies používame najmä na anonymnú analýzu návštevnosti a vylepšovanie našich web stránok. Ak si nastavíte blokovanie zápisu cookies do vášho prehliadača, je možné, že web sa spomalí a niektoré jeho časti nemusia fungovať úplne korektne. Viac info k spracúvaniu cookies.