Tlačidlo Páči sa mi je dnes bežná súčasť pomaly každého druhého webu. Ide o veľmi populárnu službu poskytovanú sociálnou sieťou Facebook, ktorej prvotná idea bola a stále je premeniť internet na jednu veľkú sociálnu sieť. Vygenerovať tlačidlo a pridať ho na stránky nie je žiadny väčší problém. Stačí prejsť na stránku pre vygenerovanie tlačidla Like:
http://developers.facebook.com/docs/reference/plugins/like/
Vyplníme jednotlivé položky formulára (URL to Like, Width) a zvolíme štýl tlačidla v časti Layout Style, popis tlačidla v časti Verb to display, prípadne farebnú schému - Color Scheme. V závere formulára môžeme definovať font písma v tlačidle. Na pravo od formulára máme po celý čas k dispozícii náhľad pripravovaného tlačidla Like, kde si zároveň môžeme počas úprav vyskúšať funkcie.
Po zadaní všetkých potrebných položiek môžeme dokončiť editáciu nášho budúceho Like tlačidla kliknutím na Get Code, čím získame kód, ktorý vložíme do našich stránok. Na výber máme v súčasnej dobe 3 možnosti: HTML5, XFBML, IFRAME. V prípade využitia XFBML verzie Like pluginu by sme museli ešte Naviac pracovať s javascriptovou knižnicou SDK. Ide o náročnejší proces, ktorý však poskytuje možnosti zadania slovného komentára, širšie možnosti nastavenia vzhľadu tlačidla. Jednoduchá možnosť vloženia je verziou IFRAME, teda klasickým rámcom. Kedže tag iframe s jeho parametrami nie je v XHTML validný, môžeme použiť verziu HTML5. Pri XFBML a HTML5 je potrebné do stránky vložiť javascript poskytnutý od Facebooku. Ak o technológiách webu a javascripte viete veľmi málo použite IFRAME metódu, ktorá je bezproblémová a z hľadiska náročnosti najjednoduchšie implementovateľná.
Po zvládnutí kroku 1 – získania kódu pre Like button nasleduje krok 2 – získanie tzv. Open Graph tagov. Open Graph tagy (ďalej len OG) sú metatagy umiestňované medzi tag a reprezentujú informácie, ktoré sa prejavia pri označení obsahu páči sa mi. Zjednodušene, dokážeme nimi podstrčiť Facebooku výsledný vzhľad po zvolení páči sa mi. OG má nasledovnú štruktúru:
<meta property="og:tag name" content="tag value"/>OG tagov existuje viacero, no nižšie uvedených 6 patrí k tzv. povinným.
og:title - Nadpis.
og:type – Typ obsahu webu. Všetky typy je možné nájsť tu: http://developers.facebook.com/docs/opengraphprotocol/#types
og:image – URL náhľadového obrázka, môže byť umiestnený na vašej doméne, ktorý sa zobrazí na vašej nástenke po označení obsahu páči sa mi. Obrázok musí byť väčší ako 50 x 50 pixlov. Ideálne riešenie je použiť štvorcové obrázky s rovnakým rozmerom oboch strán.
og:url – URL vašich stránok.
og:site_name – Ľudsky čitateľný názov stránky
fb:admins or fb:app_id – Identifikačné čísla administrátorov Facebookovej aplikácie, alebo vaše facebook ID ( ak ste prihlásený, id je doplnené automaticky)
Ukážka metatagov pre Facebook
<meta property="og:title" content="Vaša web stránka" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://domena.sk" />
<meta property="og:image" content="http://domena.sk/image.jpg" />
<meta property="og:site_name" content="Moja stránka" />
<meta property="fb:admins" content="01234567" />
Ak používate XHTML rýchlo zistíte, že OG tagy nespĺňajú validitu. Nasledujúci zápis doctype by mal tento problém vyriešiť.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="sk">To, ako váš budúci like vyzerá a či po Like-u sa zobrazí vami zvolený obrázok s vami definovanými popiskami si veľmi jednoducho môžete overiť nasledovným nástrojom pre odhaľovanie chýb.
http://developers.facebook.com/tools/debug
Pridať komentár k článku
DANO: Neviem presne, ako to myslite. Vygenerovany kod z Facebooku je viazany na konkretnu URL. Ak sa nepouzije moznost SEND/SHARE tak to bezi v ramci stranky. Ale pripadne mi poslite mailom info, resp. konkretny web, mozno myslim na nieco ine.
Evi: Chcela by som sa opýtať, ako sa vkladá Páči sa mi to, len v rámci stránky, a nie na Facebook. Všimla som si , že niektoré blogy to majú a rada by som si to pridala na svoj blog. Ďakujem.