fb:like (facebook Like Button) a jak na něj

Základní podoba Like/Líbí

Nasadit do svých stránek „špióna“ jménem Facebook Like Button je snadné.  Na stránce Social plugins kliknete na Like Button, vyplníte pár parametrů a necháte si vygenerovat IFRAME kód. Výsledkem je to, co nakonec můžete vidět na následujících příkladech:

<iframe src="
  http://www.facebook.com/plugins/like.php?href=http%253A%252F%252Fwww.lupa.cz
   &amp;layout=standard
   &amp;show_faces=true
   &amp;width=450&
   amp;action=like
   &amp;font
   &amp;colorscheme=light
   &amp;height=80"
  scrolling="no"
b   frameborder="0"
  style="border:none; overflow:hidden; width:450px; height:80px;"
  allowTransparency="true">
</iframe>

LUPA.CZ

POOH.CZ

Jde o ten nejjednodušší způsob – a s pomocí generovaného kódu snadno zjistíte, že můžete pomocí změny parametrů vytvořit Like/Recomend (Líbí/Doporučit) pro libovolnou webovou adresu. Ta je klíčem a také kamenem úrazu – budete muset bedlivě dbát na to, aby adresy (například vašich článků) byly dostatečně unikátní a vůbec nejlépe odpovídaly realitě. Stačí jediná změny v adrese a Like se týká „jiné“ internetové stránky. A jedinou výjimkou je případná část za „#“ – ta je Facebookem ignorovaná.

Implementace pomocí IFRAME je užitečná v tom, že je to jediné, co do svých stránek musíte přidat – vyžaduje vlastně jenom jeden parametr (href=, musí být pochopitelně převedený do „enkódované“ podoby). A má i další výhodu – snadno můžete, pomocí (například stylů) pro IFRAME nastavit potřebné rozměry.

Vybrat si můžete hlavně mezi Like/Líbí a Recommend/Dopo­ručit, ale je možné vybrat i dvě barevná schémata, potlačit zobrazení profilových fotek těch, kterým se to líbilo a vybrat si mezi podobu „delší“ a pouze podobou s „počitadlem“.

Pokročilejší podoba Like/Líbí

Pokročilejší použití Like se vyplatí tam, kde se chystáte implementovat i další Facebook sociální pluginy (social plugins) – zejména pokud třeba chcete využít možnosti fb:comment (komentáře). Výhodou je, že se Like buttonek smrskne na XFBML (Facebook Markup Language) značku. Tu vám Like Button kouzelník vygeneruje stejně jako IFRAME, takže můžete do začátku experimentovat právě touto cestou.

<fb:like href="http://www.lupa.cz"></fb:like>

Výhodou je „čistší“ zahrnutí do kódu stránek, nevýhodou může být nutnost přidat odpovídající JavaScript SDK. Výsledkem ale nakonec stejně bude IFRAME – pouze se do kódu stránky dostane až na straně prohlížeče. A bude poněkud košatější. A budete mít teoreticky více možností. Ale taky víc práce.

Vkládaný kód pro zahrnutí JavaScript SDK vypadá takto:

<div id="fb-root"></div>
<script>
 window.fbAsyncInit = function() {
 FB.init({appId: 'zde je nutné uvést Application ID', status: true, cookie: true,xfbml: true});
 };
 (function() {
  var e = document.createElement('script');
  e.async = true;
  e.src = document.location.protocol + '//connect.facebook.net/cs_CZ/all.js';
  document.getElementById('fb-root').appendChild(e);
}());
</script>

Kód by měl být umístěn na konci stránky a zajišťuje asynchronní zpracování. A abyste se mohli touto cestou vydat, musíte si na Facebooku zaregistrovat pro svůj web aplikaci – abyste získali Application ID, které do kódu musíte uvést. Aplikaci si můžete vytvořit například na stránce Developers (a na témže místě můžete spravovat všechny své aplikace).

Application ID je vidět v základním (basic) nastavení vaší aplikace – zde je také dobré nahrát ikonu (16×16) – ta se bude objevovat na status zprávách uživatelů, kteří použijí Like/Líbí na vašem webu.  A neuškodí nahrát logo (do 75×75).

Jedinou další částí nastavení aplikace, které musíte bezpodminečné správně nastavit je „Connect“ – do Connect URL dejte základni URI pro váš web. A do Base Domain dejte doménu, na které budete JavaScript API používat (tedy „http://www.po­oh.cz“ a „pooh.cz“ v mém případě). Pokud nevyplníte Base Domain, budete se divit, proč „to nechce fungovat“.

Tím by teoreticky mělo být ve vaší stránce vše podstatné, ale vcelku se vyplatí vložit ještě pár dalších věcí. Můžete (ale nemusíte) do HTML značky přidat, odkud pocházejí FBML a OGML značky. Zároveň tím napojíte váš web na Open Graph aktivity Facebooku.

<html
  xmlns:og="http://opengraphprotocol.org/schema/"
  xmlns:fb="http://www.facebook.com/2008/fbml"
>

Co se ale opravdu vyplatí, je propojit váš web s vaším uživatelským účtem a vaší aplikací pomocí META značek. A případně i s Facebook Page (stránkou), pokud ji váš web má.

Upozornění – http://www.fa­cebook.com/2008/fb­ml – je sice stále doporučované Facebookem, ale na této adrese se už nenachází. To jen pro ilustraci zmatečnosti dokumentace – v každém případě přidat tuto definici jmenného prostoru není „až tak nutné“.

<meta property="fb:page_id" content="Page ID" />
<meta property="fb:admins" content="Admin_ID"/>
<meta property="fb:app_id" content="Application ID"/>

• Admin ID je vaše „ID“ na Facebooku. Zjistíte ho poměrně snadno – stačí se podívat například na váš profil a u každé položky je časová značka  – ta má „id=“ parametr. A tam je právě vaše ID.
• Page ID je „ID“ případné Facebook Stránky – zjistit lze obdobně – v časové značce zprávy na zdi Stránky.
• Application ID už znáte, takže nepotřebuje bližšího vysvětlení.

Pokud přemýšlíte proč byste toto měli dělat, odpověď je jednoduchá – sdělíte tak Facebooku, že tyto stránky opravdu patří vám (přes Admin ID) a patří k ním případná Facebook Stránka (přes Page ID) a používají aplikaci „oprávněně“. Jako vedlejší efekt získáte statistiku vašich webových stránek v Facebook Insights (samozřejmě až poté, co si svou doménu do seznamu přidáte).

Příklad statistiky v Facebook Insights

Like/Líbí nahradilo Share/Sdílej

Like/Líbí nyní slouží jako náhrada původního „nasdílení“ – původní způsob stále existuje, ale dejte si pozor - pokud na vašich stránkách používáte původní Sdílej, tak pravděpodobně voláte i původní Facebook Connect knihovnu. A nové JavaScript API vám nebude fungovat.

Aby Facebook mohl „lépe“ získat informace, které použije pro vložení na zeď uživatele, nabízí několik dalších META, pomocí kterých můžete tyto informace určit. A nespoléhat se tak na chronicky zmatený server od Facebooku, který je "automaticky vytáhne.

<meta property="og:title" content="Titulek, který se má použít"/>
<meta property="og:site_name" content="Jaké se má použít jméno webu"/>
<meta property="og:image" content="Jaký se má použít obrázek, jeho URL"/>
<meta property="og:description" content="Jaký popis se má použít"/>

Podrobnější popis k Like najdete v Like Button, ale poněkud chybí kompletní dokumentace – ačkoliv kompletní zdrojové kódy jsou k dispozici na GitHubu (readme), aktualizace dokumentace poněkud  kulhá. Chcete-li ale více zkoumat – http://opengrap­hprotocol.org/ pro Open Graph protokol. A v Social Plugins se pokusit pochopit věci týkající se Like a dalších prvků.

fb:like parametry

XFBML podoba Like/Líbí má „pochopitelně“ stejné parametry, jako IFRAME verze. Otázkou zůstává, které další možné parametry zůstávají skryté někde v příslušném PHP, které se stará o zpracování.

• href= určuje URI, která se bude „líbit“ – v případě XFBML odolejte pokušení  použít unicode
• layout= určuje vzhled, standard/button_cou­nt
• show-face= umožní zapnout/vypnout přidávání profilových obrázků, false/true
• width= nastaví šířku v px
• action= umožní přepnout mezi like/recommen­d verzí
• font= umožní vybrat použitý font
• colorscheme= umožní vybrat mezi light/dark

Úskalí fb:like

Pokud budete fb:like implementovat na stránku, tak časem zjistíte, jaká úskalí to přináší – zásadní je v tom, že pokud fb:like bude na stránce hodně, tak se tím pochopitelně prodlouží doba konečného zobrazení stránky – markantní je to v případě blogu, který chce mít Doporučit u každého blognutí – v počtu desítek kusů na jedné stránce.

fb:like je ale také určitým způsobem díra do soukromí – umožňuje Facebooku sledovat své uživatele (dokonce i nepřihlášené uživatele) na jakémkoliv webu, který používá fb:like

fb:like má navíc ničím neomezenou možnost ho implementovat kdekoliv pro cokoliv – můžete tak „Doporučit“ něco, co ve skutečnosti vůbec nedoporučujete – pro uživatele jde o jedno kliknutí – nedochází k žádnému potvrzení. Jediné co může uživatel udělat navíc je doplnění komentáře. Právě této skutečnosti zneužival nedávno rychle se šířící „ClickJacking virus“ (viz „Click here to continue“ – nový virus na Facebooku).

Takto to vypadá na původní stránce.

A takto se to objeví na zdi uživatele.

A takhle to bude vypadat bez vyplněného komentáře.

Problémy Facebooku a jeho serverů se pochopitelně odrazí na nefunkčnosti Like prvků – příkladem může být začátek června, kdy Facebooku odmítaly komunikovat backend servery, které „stahují“ informace ze stránek pro Like. Mohli jste klikat jak chtěli – většinou se nestalo nic, občas se objevila chyba. Trvalo zhruba den, než se Facebooku „podařilo“ vše vrátit do použitelné podoby.

Používat Like nebo nepoužívat?

Přes 2.6 milionu českých aktivních měsíčních uživatelů Facebooku je poměrně silným argumentem pro využití možností, které marketingově (a virálně) tahle „maličkost“ nabízí. Nasadit fb:like je poměrně jednoduché – a kliknutí jednoho uživatele může znamenat, že získáte uživatele nové. Odpověď na otázku tedy je – ano, používat.