Sociální sítě

Tlačítko Líbí se mi - instalace nové facebook vychytávky

Cesta k článku: Seo-slovnik.cz » Sociální sítě » Tlačítko Líbí se mi - instalace nové facebook vychytávky
Napsal: Jiří Komár | @jirikomar | Pondělí 10.05.2010 | Komenáře

Tlačítko Líbí se mi - instalace nové facebook vychytávky

Pokud patříte mezi internetové nadšence a těšíte se na každou novou vychytávku, kterou by jste si vylepšili Vaše webové stránky. Tak teď tady máme něco pro Vás. V minulém týdnu byl totiž vedením Facebooku představen nový plugin pro majitele webových stránek. Tlačítko "Líbí se mi" má za úkol ještě více propojit web se službou Facebook a tím přispět k dalšímu šíření informací v rámci sociální sítě. Facebook se tak zřejmě snaží reagovat na Twitter, který je na tom co se týče pluginů o něco lépe.

Nyní si řekneme, jak nová funkce funguje a jak se dá lehce implementovat do Vašeho stávajícího webu. Nezapomeňte ale na to, že nástroj pro propojení webu se sociální sítí, je populární jen u některých typů webových stránek. Takže pokud máte web, na kterém prodáváte vodovodní těsnění nebo plechy na tankery, tak bych doporučoval s instalací počkat :-)

Like Button - tlačítko "Líbí se mi"

Tlačítko "Líbí se mi" se stalo v posledních dnech fenoménem. V rekordním čase se tento prvek objevil u tisíců webů po celém světě a jeho boom dále pokračuje. Jeho funkčnost spočívá v tom, že pokud návštěvník webu klikne na toto tlačítko, objeví se daná stránka na Facebook profilu daného uživatele. Díky této funkčností se pak o Vašem zajímavém článku, videu nebo fotce dozví mnohem více lidí. Navíc je tato metoda velmi rychlá a tak se o Váš obsah podělí i takoví uživatele sociální sítě, kterým se nechtělo kopírovat a vkládat URL adresu do svého profilu. Prostě se klikne a je to.

Instalace tlačítka "Líbí se mi"

Facebook má pro majitele stránek připravené hned dvě možností a to řešení pomocí Iframe nebo pomocí XFBML. Ikdyž všichni o instalací mluví jako o banalitě, tak my už víme, že instalace je poměrně složitá a pro laika i nervově náročná :-). Zejména pak, pokud chcete tlačítko provázat s konkrétní stránkou Vašeho webu.


Iframe varianta

Varianta řešená přes iframe je určena pro širokou veřejnost a instalace Vám zabere jen několik málo sekund. Na adrese http://developers.facebook.com/docs/reference/plugins/like vyplníte formulář a necháte si vygenerovat kód. Ten zkopírujete a vložíte do Vaší stránky. Pokud chcete, můžete si v kódu najít místo, kde je uvedena URL adresa a tu dynamicky měnit, podle právě zobrazené stránky. Tímto způsobem lze tlačítko rozpohybovat na celém webu. Nevýhoda této varianty je v tom, že kromě URL adresy se s přáteli nepodělíte o žádnou další informaci, což u XFBML není problém. 


Pro jistotu jsme pro Vás připravili ukázkovou stránku, kde se můžete podívat do zdrojového kódu:
http://www.seo-slovnik.cz/labs/iframe/


XFBML varianta

Pro zkušenější uživatele je určena možnost tlačítka pomocí XFBML. Tato technika je doporučována i samotným facebookem. Ale proto, aby Vám XFBML na stránkách fungovalo, musíte nejprve udělat několik kroků. Pokud tak neučiníte, tak Vám plugin nebude fungovat. 

První věc, kterou musíte pro zaručení funkčnosti udělat je, že upravíte řádek značky <html>, který informuje, že se na stránce používá Open Graph protocol - více o tomto protokolu: http://opengraphprotocol.org/


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

V dalším kroku je potřeba propojit Vaši webovou stránku s Facebookem. Proto aby jste tak mohli učinit, musíte mít na Facebooku svůj vlastní profil. Pokud profil máte, tak si můžete jako každý uživatel sociální sítě vytvořit svou aplikaci. Nebojte, nejde o nic složitého. Na adrese: http://developers.facebook.com/setup/ vyplníte název Vašeho webu a URL adresu na které web běží. Po vytvoření Vám Facebook zobrazí stránku s vzorovým zdrojovým kódem a informacemi o Vaší aplikaci. Zdrojový kód si uložte pro pozdější použití a v horní části stránky klikněte na odkaz "panel pro vývojáře". Pokud jste tak učinili, dostáváte se na stránku s Vašimi aplikace. Vyberte vámi vytvořenou aplikaci a klikněte na "Upravit nastavení". V levém menu následně vyberte "Plátno" a v nastavení změňte metodu vykreslení na XFBML. Nyní máte aplikaci nastavenou. Pokud chcete můžete ještě v ostatních záložkách vyplnit i další informace jako avatar, ikonka atd. (pokud máte aplikací více budete se v nich lépe orientovat).

Nyní si otevřete uložený zdrojový kód a zkopírujte níže vypsaný kus kódu. Ten následně vložte do Vašich stránek. Pokud chcete tlačítko využívat na všech stránkách, je potřeba vkládat tento kus kódu do všech stránek.


<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/cs_CZ/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Your app ID nahraďte identifikačním číslem Vaší aplikace. Pokud jste ho zapomněli, nebo jste si nezkopírovali ukázkový zdrojový kód, tak app ID číslo najdete v panelu pro vývojáře v detailu aplikace. Více o Javascript SDK najdete zde: http://developers.facebook.com/docs/reference/javascript/

Nyní již máte vše potřebné a tak můžete vložit tlačítko. Kromě základního zobrazení, můžete tlačítko také nadefinovat dle Vaši požadavků. K tom lze opět využít generátor tlačítek na adrese http://developers.facebook.com/docs/reference/plugins/like. URL adresu pak smíte stejně jako u iframe varianty nahrazovat aktuální adresou jednotlivých stránek. 


<fb:like href="http://www.seo-slovnik.cz/" />

Ti znalejší si pak navíc mohou upravit i jednotlivé stránky, aby se do profilu uživatele přenesly Vámi předpřipravené informace. Pokud máte stránky dynamické, bude potřeba malá programová úprava.

Informace o stránce se vkládají do hlavičky webu takto: 

<meta property="fb:admins" content="100000319021896"/>
<meta name="fb_app_id" content="118951164793722" />
<meta property="og:title" content="Jak přidat na web facebook tlačítko - Líbí se mi"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://www.seo-slovnik.cz/labs/xfbml/"/>
<meta property="og:image" content="http://www.seo-slovnik.cz/labs/seo_avatar_small.jpg"/>
<meta property="og:site_name" content="SEO-SLOVNIK.CZ Labs"/>

Každým řádkem upravujete to, jak se bude Vaše stránka v profilu uživatele prezentovat. V tomto případě nastavujete: titulek stránky, typ obsahu, url adresu, obrázek a jméno webu. My navíc do meta informací vložili app ID aplikace a ID administrátora. Pokud nevíte jak se dobrat k číslu administrátora, tak se podívejte na tuto URL adresu: http://graph.facebook.com/VaseJmeno. Pokud zadáte URL ve tvaru s Vašim Facebook jménem, získáte potřebný údaj. Kompletní přehled značek, které se dají umístit do hlavičky naleznete zde: http://developers.facebook.com/docs/opengraph


Pozor: podle našich zkušeností záleží i na drobných změnách v nastavení. Takže pokud Vám tlačítko nebude fungovat, zkuste si zkontrolovat, zda máte vše vpořádku. Doporučujeme rovněž uvádět hodnoty "fb:admins" a "fb_app_id" výše než zbylé hodnoty. Nám naše testovací verze fungovala až po změně hodnoty v položce "og:type" a přehození řádků.


Kromě nového tlačítka "Líbí se mi" je pro Vás připravena i celá řada dalších komponent. Z nových stojí za zmínku určitě Facebook komentáře, pomocí níž je možné na Vašem webu komentovat články přes Facebook rozhraní. Vše je samozřejmě publikována na profilech komentujících, takže opět vzniká velká zpětná vazba od kamarádů a dalších známých.


Ostatní nové nástroje najdete na této adrese: http://developers.facebook.com/plugins


A pokud jste náš článek přečetli celý, tak tady je odkaz na funkční verzi postavenou na XFBML:
http://www.seo-slovnik.cz/labs/xfbml/


Štítky k článku: Sociální sítě
Jiří Komár

Jiří Komár

Autor článku působí jako UX designer a specialista na internetový marketing. Posledních sedm let se pohybuje především v prostředí internetových obchodů a podílel se na projektech jako OKAY.cz, Kama.cz, Bambule.cz, Rogelli.cz nebo Alfa.cz.

Rubriky
Rubrika Článek

Veškerý obsah je majetkem autorů, jeho další šíření bez souhlasu je zakázáno, 2008 - 2016 © www.seo-slovnik.cz - Váš internetový rádce