Líbí se vám tlačítko ‚Like‘ od Facebooku? Dejte si ho na stránky!

Facebook minulý týden představil zcela nové funkce, které mají posunout Facebook a potažmo celý web zase o krok kupředu. Zastánci tzv. otevřeného webu Facebook často kritizují, že jejich poslední krok není v zájmu uživatelů ani dalšího vývoje webu. Ponechme stranou tyto diskuse a pojďme se podívat, co Facebook nabízí majitelům webových stránek.

Dobrým začátkem může být adresa http://developers.facebook.com, kde Facebook poskytuje vývojářům webu a majitelům stránek veškeré aktuální informace. Řekněme, že máme stránky a chceme je „nějak“ propojit s Facebook. Proč to dělat? Protože na Facebooku je v současné chvíli na celém světě více než 400 milionů lidí, v České republice to budou brzy 3 miliony uživatelů. A to není zanedbatelné číslo. Jde o trh, který nás může, či musí – doplňte sami, zajímat. Navíc je Facebook zřejmě druhým nejnavštěvovanějším webem po Seznamu.

Sociální pluginy – dobrý začátek

Nejjednodušším způsobem, jak využít Facebook pro své stránky, je využít některý z připravených tzv. sociálních pluginů. Z nich je nejpoužívanější tlačítko „Like“ – „Líbí se mi“. Pokud se ocitnete na stránkách, kde je vloženo toto tlačítko, můžete jako uživatel stisknutí tlačítka deklarovat, že se vám daná věc, odborně nazvaná sociální objekt, líbí. Může jít o danou webovou stránku, může jít o film, o kterém je na stránce řeč, může jít o vaši oblíbenou restauraci, o vaši oblíbenou značku piva, hudební skupinu apod. Kompletní seznam toho, co se vám může líbit najdete na http://developers.facebook.com/docs/opengraph#types.

Nás bude v první řadě zajímat, jak tlačítko „Like“ na své stránky vložit. Jednoduše. Běžte na http://developers.facebook.com/docs/reference/plugins/like, kde najdete formulář, který vám vygeneruje kód, který si vložíte do HTML kódu vašich stránek. Pokud se má uživatelům líbit vaše webová stránka, pak vložte její adresu do formuláře. V našem případě vložíme adresu testovacího webu www.jein.cz. Ostatní pole můžete nechat tak, jak jsou.

Po zmáčknutí „Get Code“ nám naskočí toto okno:

Na výběr máme 2 možnosti, jednodušší je pracovat s iframe kódem (1. možnost). V případě využití XFBML verze pluginu bychom museli navíc pracovat s Javascriptovým SDK, odměnou za zvýšenou námahu nám však bude to, že uživatelé budou kromě triviálního mačkání tlačítka také zadat slovní komentář. Druhá varianta nabízí také širší možnosti nastavení vzhledu tlačítka „Like“.

Zvolíme-li tedy první možnost, kód vložíme do našich stránek, stránku nahrajeme na web a návštěvníci mohou veseli „lajkovat“. Bohužel tím většina uživatelů končí. Výhodou je to, že jakmile návštěvník webu zmáčkne „Like“, tak se jeho přátelům na Facebooku ukáže zpráva typu „Pepovi se líbí to nebo vono“.

Přidejme trošku sémantiky

Výše popsaný návod je dobrý začátek, Facebook však můžeme s trochou dalšího úsilí integrovat mnohem hlouběji. Takže by jistě byla škoda to neudělat. Využijme příkladu s ukázkovým webem www.jein.cz, kde je implementováno tlačítko Like a také několik Activity Feed pluginů. Když se podíváte do zdrojového kódu stránky, v hlavičce uvidíte následující informace (metadata):

<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta property="og:title" content="Co je právě in?"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.jein.cz/"/>
<meta property="og:image" content="http://www.jein.cz/images/jein.png"/>
<meta property="fb:admins" content="669384918"/>
<meta property="og:description" content="Co je právě in na českém internetu aneb co se líbí českým uživatelům Facebooku."/>
<meta property="og:email" content="jan.horna@gmail.com"/>

Právě výše uvedené řádky kódu způsobují ono kouzlo, které Facebook před týdnem představil světu. Co nám uvedená metadata říkají?

  • nastavení nadpisu stránky:
    property="og:title" content="Co je právě in?"
  • typ obsahu – objektu:
    property="og:type" content="website"
  • URL dané stránky, použije se pro typ „website“:
    property="og:url" content="http://www.jein.cz/"
  • URL obrázku (ideálně rozměr 50 x 50 pixelů):
    property="og:image" content="http://www.jein.cz/images/jein.png"
  • ID uživatele Facebooku, který bude administrátorem:
    property="fb:admins" content="669384918"
  • slovní popis (věta či dvě):
    property="og:description" content="Co je právě in na českém internetu aneb co se líbí českým uživatelům Facebooku."
  • můžeme doplnit vlastní email:
    property="og:email" content="jan.horna@gmail.com"

Jakmile máme na své stránce tato metadata v hlavičce HTML souboru, tak stačí kliknout na tlačítko „Like“ a hned můžeme vidět výsledek:

Pokud klikneme na odkaz „Admin Page“, tak se dostáváme dovnitř Facebooku:

Facebook správci dané webové stránky, tedy www.jein.cz, vytvořil uvnitř Facebooku administrační stránku, kde můžete vašim fanouškům například posílat zprávy. A aby toho nebylo málo, tak každému, kdo zmáčkne na dané stránce tlačítko „Like“, se automaticky aktualizuje seznam jeho oblíbených stránek na Facebooku:

Tak už je vám jasné, o čem mluvil minulý týden zakladatel Facebooku šestadvacetiletý Mark Zuckerberg?

Shrňme to

Facebook umožňuje napojit na svou sociální síť (označuje se někdy jako tzv. sociální graf) vlastní webové stránky, které s Facebook zatím nijak nesouvisí. S Facebookem můžeme integrovat také další sociální objekty (oblíbená restaurace nebo film). Dělat to budeme proto, že prostředí Facebooku slouží jako komunikační kanál, který šíří povědomí o našich webových stránkách, výrobcích či službách, prostě o tom, co má kdo v oblibě. Slovní spojení „word-of-mouth“ se tak mění ve „word-of-mouse“.


Uveřejněno

v

od

Značky:

Komentáře

18 komentářů: „Líbí se vám tlačítko ‚Like‘ od Facebooku? Dejte si ho na stránky!“

  1. […] This post was mentioned on Twitter by Jan Horna. Jan Horna said: Muj blog post pro @active24cz: Líbí se vám tlačítko ‘Like’ od Facebooku? Dejte si ho na stránky! http://bit.ly/b1IlKU cc @tombarys […]

  2. dennisyu avatar

    very nice example– I saw this from the insidefacebook.com comment you made!

  3. Jan Horna avatar

    Thanks Dennis. Now you have to learn Czech 🙂

  4. Hattas avatar

    Mna by zaujimalo ako sa dostanem k ID FB pre fb:admins ked napriklad nemam kod ale moje meno. Tiez ci musim byt aj spravca FB stranky aby som to mohol aplikovat.

  5. Jan Horna avatar

    Kazdy uzivatel Facebooku ma sve unikatni ID, jmena jsou pro lepsi pamatovani. Vase ID zjistite, kdyz si najedete na svuj profil, tak byste tam mel mit nekde seznam pratel s uvedenim poctu pratel, coz je odkaz. Kdyz na tento odkaz najedete mysi, nekliknete, tak si zkopirujte tento odkaz, jehoz soucasti je Vase ID. Tohle ID pak bude adminem pro Vase Like tlacitko. Se strankou na Facebooku to nema nic spolecneho.

  6. jonbook avatar

    Díky za rozborku, snažil jem se přidat tlačítko na http:/www.pensionhotel.de , ale nějak se mně nedaří. Tlačítko na stránce je ,ale propojení s FB ne a ne! Tak nevím?

  7. […] Like, česky „To se mi líbí“, je nejpopulárnějším Facebook pluginem. Kdysi jsme o něm psali, jeho implementace do stránek je velice jednoduchá. Když pak někdo na vašich stránkách […]

  8. Pepa avatar
    Pepa

    Pokud si nevíte s prvními kručky na fb, pak vám pomůže Facebook přihlášení.

  9. jennifer avatar
    jennifer

    je to moc a moc hnusnyyyyyyyyyyyyyyyyyyy 

  10. 4exa avatar
    4exa

    Jan Horna: Vase vysvetleni nema ani hlavu ani patu. Pokud neumite jasne formulovat odpoved tak to radeji nepiste vubec, cituji „… tak byste tam mel mit nekde seznam pratel …“ Slova TAM a NEKDE me opravdu pobavila.