AlejTech/Blog/Úprava facebookového Like tlačidla - páči sa nám zjednodušené lajkovanie
Prejsť na navigáciu

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

Tento článok zahŕňa témy:
facebook, like, social, jQuery, plugin, JSON, Graph, tlačidlo, páči sa mi to, lajkovanie

Komentáre (0)

pridať komentár


V komentároch môžete používať BB kód .


K tomuto článku zatiaľ nie sú žiadne komentáre. Buďte prvý. ;]
 

Poraďte sa s nami o službách, ktoré potrebujete. My vám pripravíme konkrétnu cenovú ponuku.

Kontaktujte nás

Oceňujem prístup tímu spoločnosti AlejTech, ktorý okamžite reaguje na moje otázky a rieši podnety z našej strany.

Tomáš Božik
riaditeľ IT v kurze