Daniel Bradbury Dočekal 
Historie pamatuje mnoho pokusů o označování webů či stránek nějakým tím “líbí se mi” či “doporučuji”. Ale nikomu se zatím nepovedlo tak daleko a do široka jako Facebooku. fb:like vzalo web útokem. A je dobré o téhle věci něco vědět. Rozšířené vydání oproti původní verzi na Lupa.cz
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
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/Doporučit, ale je možné vybrat i dvě barevná schémata, potlačit zobrazení profilových fotek těch, kterým se to líbílo 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ámLike 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:
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. A plikaci si můžete vytvořit například na stránceDevelopers (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é nahrat ikonu (16×16) – ta se bude objevovat na status zprávách uživatelů, kteří použití 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.pooh.cz” a “pooh.cz” v mém případě). Pokud nevyplníteBase 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.facebook.com/2008/fbml – 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, tak 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 “opravněně”. Jako vedlejší efekt získáte statistiku vašich webových stránek v Facebook Insights (samozřejmě až poté co si vaší 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://opengraphprotocol.org/ pro Open Graph protokol. A vSocial Plugins se pokusit pochopit věci týkající se Like a dalších prvků.
V polovině července (první vydání tohoto návodu bylo v červnu) doplnil Facebook dokumentaci o význam a smysl og:type – jde tak o další parametr, který je vhodné “správně” používat. Pro webové stránky a blogy jsou významné tři og:type varianty – blog, website a article. Takže neudělejte stejnou chybu jako já – při prvním n asazení og:type jsem zvolil právě website bez rozdílu typu obsahu zde na pooh.cz – pro články (a blognutí) by mělo být použit article. Otázka je, jaké překvapení pro nás přichystá Facebook v otázce rozdílu mezi website a blog.
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 uuncode
- layout= určuje vzhled, standard/button_count
- 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/recommend verzí
- font= umožní vybrat použitý font
- colorscheme= umožní vybrat mezi light/dark
Pokročilejší fb:like
Pokud se vrhnete na fb:like, tak vás možná bude zajímat jedna užitečná věc – jestli je nějak možné “reagovat” na kliknutí. Například zaznamenat si skrz událost počet “like” do databáze. Případně nějak víc využít možností JavaScript API.
Existují dva způsoby. Na ten první upozornil Miloš Enderle v diskuzi pod tímto článkem na Lupě – vychází z “on-create” atributu v fb:like prvku. Tedy například takto:
<fb:like href=”http://www.geewa.com” on-create=”onLikeButton();”></fb:like>
Miloš zároveň ale upozorňuje, že on-create je zavoláno i v okamžiku kdy někdo “like” ruší. A informace o tom zda jde o “like” či “dislike” není k dospozici. A pokud to tedy chcete dotáhnout do zdárného konce, musíte použít FQL a zjistit, jestli uživatel má like k dané URL (aplikaci).
Druhý způsobe je zdokumentovaný v JavaScript API a měl by fungovat (možná) lépe. Využívá FB.Event.subscribe a událost “edge.create” – v rámci JavaScript kódu přidaného na konec vaší stránky pak přidáte registraci eventu (příklad pouze vyvolá Alert box):
FB.Event.subscribe('edge.create', function(href,widget) {
alert('Like fired'+href);
});
Přidat ji musíte za FB.init volání, tak aby k aktivaci registrace události došlo poté co se asynchronně incializuje Facebook. A další drobná vada – tahle událost nefunguje pro Like implementované v fb:comments.
Ú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.
Automaticky zakládané Pages
Na další problém s fb:like narazíte občas a nekontrolovaně – Facebook založí v některých případech Facebook Page jak pro celý web, tak pro některé jednotlivé adresy, pro které bylo použito fb:like. Příklad můžete vidět na následujícím obrázku a na této adrese. Pokud se domníváte, že je to proto, že je použito og:type website, tak je to pravda jenom částečná – Facebook Page jsou zakládány chaoticky, náhodně a nekontrolovaně – pokud by pro každou website stránku měla existovat Page, tak už by jich pro Pooh.cz musely existovat stovky (spíš tisíce).
Problém v automatickém zakládání je ten, že to nakonec může dopadnout tak, že ona automaticky založená Facebook stránka POOH.CZ byla zrušena bez uvedení jakéhokoliv důvodu. A jako přídavek mi Facebook zablokoval účet.
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í jedním uživatele může znamenat, že získáte uživatele nové. Odpověď na otázku tedy je – ano, používat.