Publikováno v sekci Sociální síť v Úterý 17.8.2010 - 12:12

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:

<iframe src="http://www.facebook.com/plugins/like.php?href=www.facebook.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

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ě:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: "your app id", status: true, cookie: true, xfbml: true});
FB.Event.subscribe("auth.sessionChange", function(response) {
if (response.session) {
// A user has logged in, and a new cookie has been saved
} else {
// The user has logged out, and the cookie has been cleared
}
});
</script>

Kód doporučuji umístit před konec tagu </body>. 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 </body> 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:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: "your app id", status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement("script"); e.async = true;
e.src = document.location.protocol +
"//connect.facebook.net/en_US/all.js";
document.getElementById("fb-root").appendChild(e);
}());
</script>

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 </body> 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

11 komentářů « Zpět

Komentáře

Přidat komentář

Nový vzkaz

* Vaše jméno:

Email (nezobrazuje se):

Web:

* Vaše zpráva:

* Tato pole jsou povinná, [smajlíci]

• 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, nebo jej vložte mezi značky [code] [/code]
• vulgární, rasistické či jinak nepřípustné komentáře budou smazány