Jak snadno implementovat na stránky sociální pluginy Facebooku?

/ Blog / Sociální síť / Jak snadno implementovat na stránky sociální pluginy Facebooku?

Publikováno v sekci Sociální síť v 17. 8. 2010 - 12:12

aktualizováno

Facebook má v plánu změnit internet na jednu velkou sociální síť. K tomu mají dopomoci Open Graph API a sociální pluginy, jako tlačítko Like (líbí se mi), box Recommendations (doporučení), Comments (komentáře) a další.

Facebook má v plánu změnit internet na jednu velkou sociální síť. K tomu mají dopomoci Open Graph API a sociální pluginy, jako tlačítko Like (líbí se mi), box Recommendations (doporučení), Comments (komentáře) a další.

Komplexní výčet sociálních pluginů lze nalézt na vývojářském centru Facebooku. Detailní analýze možností Open Graph API se budeme věnovat v rámci některého z následujících článků o sociálních sítích, nyní si ale vysvětlíme to, co uživatele či vlastníky webů zajímá asi nejvíce. Tedy jak vlastně na stránky „vložit“ tlačítko Like (líbí se mi), box Recommendations (doporučení) a nebo Comments (komentáře). Princip u ostatních pluginů je identický, proto je zde nebudeme popisovat všechny.

Tlačítko Like (líbí se mi)

K čemu je vlastně tlačítko Like dobré? Proč si ho vkládat na stránky? Odpověď je jednoduchá. Zvyšíte potencionální návštěvnost svého webu. Pokud se totiž někomu, kdo je právě přihlášený na Facebook, bude líbit nějaký váš článek nebo jakýkoliv jiný obsah vašeho webu, zobrazí se o tom uživateli na profilu upozornění.

Každý z přátel návštěvníka vašeho webu, který stiskl toto tlačítko, ve feedu (čtečce nejnovějších informací na hlavní straně profilu) uvidí, co se mu líbilo.

Implementace tlačítka Like (líbí se mi)

Iframe

Tlačítko je možné integrovat do webu dvěma způsoby. První řešení pomocí kódu s iframe není zcela ideální, ale je snadnější. Kód si snadno vygenerujete na stránce s pluginem - http://developers.facebook.com/docs/reference/plugins/like.

Co je třeba zadat pro získání kódu do formuláře pro jeho generování? Prvním krokem je vložení URL (adresa vašeho webu), dále si můžete zvolit styl tlačítka (respektive jeho výpis), zdali chcete ukazovat avatar ikony (fotky z profilu), nastavit si šířku elementu, zvolit si text (like/líbí se mi či recommend/doporučit), styl písma či barevné ladění.

Kód který si pak vložíte do stránek vypadá například takto:

XFBML

Druhou možností je využití jazyka XFBML spolu s Javascriptovou knihovnou SDK. Oproti prvnímu řešení pomocí iframe má tento způsob několik výhod:

  1. Kromě stisknutí tlačítka Like můžete vložit komentář, který lze také publikovat ve vašem profilu
  2. XFBML verze také dynamicky mění výšku elementu. V případě, že neexistují žádné fotky uživatelů, kteří stiskli Like, box s tlačítkem automaticky změní výšku
  3. Možnost nastavení jazyka elementů pluginu na web (v případě iframe zůstává jazyk anglický)

Jak implementovat XFBML verzi?

Pro tuto variantu je nutné vložit kromě samotného kódu s tlačítkem na stránky také Javascript a div s ID fb-root. Kód vypadá následovně:

Kód doporučuji umístit před konec tagu . V případě, že používáte nějaké metrické systémy jako Google Analytics nebo jiné, bude lepší tento kód umístit až za kódy pro analytická měření. Pokud by komunikace s Facebookem z určitých důvodů nebyla navázána, zbytečně to bude ovlivňovat přesnost měření návštěvnosti.

Určitě se vás napadne otázka, co mám vložit místo „your app id“? Odpověď je nasnadě, i když velmi zmatená nápověda Facebooku se může „tvářit“ opačně. Je třeba zaregistrovat vaší „aplikaci“ na této stránce: http://developers.facebook.com/setup/

Zde si navolíte název vaší stránky, její webovou adresu (URL) a jazyk, který se pak zobrazuje ve všech prvcích propojených s Facebookem.

Shrnutí implementace pluginu Like Button verze XFBML v krocích

  1. Registrace/vytvoření aplikace na této adrese http://developers.facebook.com/setup/
  2. Doplnění ID do výše uvedeného kódu a následné umístění před tag za kódy pro metrické systémy
  3. Vygenerování XFBML kódu (http://developers.facebook.com/docs/reference/plugins/like) a jeho vložení tam, kam potřebujeme

Implementace boxu Recommendations (doporučení)

Nejprve si ve zkratce nastíníme k čemu tento plugin vlastně slouží. Blok Recommendations (doporučení) zobrazuje personalizovaná doporučení vašim návštěvníkům. Jednoduše řečeno zobrazuje počet nejvíce sdílených článků či stránek pomocí tlačítka Like. Pokud je uživatel přihlášený, vidí také kolika z jeho přátel se daný odkaz líbil.
Výhodou je, že i v případě nepřihlášeného uživatele na Facebook se data normálně zobrazují. Pouze nejsou personalizovaná, protože jinak plugin upřednostňuje doporučení od přátel (lepší „reklama“ na obsah vlastně ani neexistuje).

Plugin pro doporučení ovšem nepracuje se subdoménami. Tedy v případě, že byste chtěli zobrazovat i tato doporučení (příklad: developers.facebook.com), plugin je nezobrazí.

Implementace probíhá shodně jako u tlačítka Like. Stačí si opět vybrat mezi řešením s iframe nebo použití XFBML, volba je na vás. Plugin naleznete na této adrese - http://developers.facebook.com/docs/reference/plugins/recommendations.

Implementace Comments (komentářů) na web

Chcete na mít na svém webu možnost komentování příspěvků a nevíte jak na to? Nebo tyto znalosti ovládáte, ale rádi byste využili možnost vkládání komentářů od Facebooku s avatar ikonami bez jakéhokoli programování včetně implementace tlačítka Like? Pak je tu pro vás právě tento plugin.

Komentáře lze implementovat pouze skrze XFBML řešení. Tedy 2. způsob popsaný u implementace tlačítka Like. V krátkosti si tedy shrňme kroky pro implementaci Comments (komentářů).

Nutný kód pro komunikaci pluginu:

Shrnutí implementace pluginu Comments v krocích

  1. Registrace/vytvoření aplikace na této adrese http://developers.facebook.com/setup/
  2. Doplnění ID do výše uvedeného kódu a následné umístění před tag za kódy pro metrické systémy
  3. Vygenerování XFBML kódu (http://developers.facebook.com/docs/reference/plugins/comments) a jeho vložení tam, kam potřebujeme

    V konfiguraci komentářů lze nastavovat tyto paramatery:

  • Počet zobrazených komentářů
  • Šířka elementu

    Pokud by vás zajímaly další ze sociálních pluginů z dílny Facebooku, můžete si je prohlédnout na této adrese - http://developers.facebook.com/plugins. Tento článek napsal můj kolega Ladislav Šulc a já ho s jeho s laskavým svolením uveřejňuji

Kategorie

  • Osobní názory - 1x
  • PHP - 9x
  • MYSQL - 4x
  • CSS - 7x
  • jQuery - 3x
  • Sociální síť - 1x
  • Nette - 5x
  • Tipy & triky - 3x
  • Twitter Bootstrap - 1x
  • Týdenní tipy a novinky - 4x
  • SCSS - 1x
  • GIT - 1x
  • Gulp - 1x

  • Komentáře (12x)

    Děkuji za přehledný návod. Jen pokud by někdo chtěl češtinu, nahraďte výše uvedený "connect.facebook.net/en_US/all.js" českou verzí "connect.facebook.net/cs_CZ/all.js"

    Snad jsem někomu ušetřil pár minut bádání :-)
    Měl bych ale ještě jeden dotaz.
    Mohu zařídit, aby se tlačítko "Líbí se mi" vztahovalo k stránce na FB a ne ke stránce, na které je umístěno? (jako je tomu například u like boxu.

    Děkuji
    [2] Apo Bohužel netuším, až tolik těmto FB features nehovím :)
    Apo:

    Nějak nerozumím tomu, jak by se to poté odlišovalo od like boxu? Ten lze personalizovat tak, že si na webu zobrazíte jen právě toto tlačítko v nějakém DIVu. Kdyžtak mi blíže vysvětlete smysl.
    #5 reagovat Michael polyXonic: www.polyxonic.comt
    Ukázka třeba zde. :)
    #6 reagovat Michael polyXonic: www.polyxonic.comt
    :) http://www.polyxonic.com

    jen ještě nemám dodělaný úplně obarvení komentářů.
    #7 reagovat Dan:
    [2] Apo Do adresy
    #8 reagovat Martin V.:
    pokud zadám http://developers.facebook.com/setup/ tak to po mě chce telefon nebo kredit, co mám špatně??
    [8] Martin V. Nic, je to jejich pravidlo, už je to tam delší dobu. Pokud chceš přístup do developery na FB tak o tobě musí vědět vše :D ... zadej telefon, já jej taky zadával.
    Prosím o radu.Když si chci like box vložit na svou stránku eshopu tak se mi ukáže toto
    Plugin cannot be rendered with the specified parameters.

    V čem je prosím problém co děláme špatně ?
    děkuji za radu.
    Máte problém s pluginem Facebooku na svých stránkách. Hlásí Vám to "Plugin nemůže být vykreslen s určenými parametry".
    Řešení naleznete zde: http://moje-obchody.blogspot.com/2011/07/uprava-pluginu-facebooku.html
    Zdravím,

    ja mam zas taky problem, ze cca 2 dni si neviem zmenit šírku v like_box Facebook Social Plugin...je tam fixne 292px. co s tym?

    Vložit nový komentář


    • na jiné komentáře odkazujte pomocí odkazu reagovat
    • vaše IP adresa bude zaznamenána
    • používají se gravatary
    • můžeme si tykat
    • HTML tagy vypnuty. PHP kód se také neprovede. Pokud potřebuju přiložit ukázku vašeho kódu, použijete službu pastebin
    • vulgární, rasistické či jinak nepřípustné komentáře budou smazány