Cover photo
meniny Dnes je: 27.4.2018, meniny má: Jaroslav

Rôzne

Facebook: Like Button

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/

facebook like button

 

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.

facebook like button

 

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

facebook like button

KOMENTÁRE

1: Napísal: DANO | 16. 3. 2014
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.

2: Napísal: Evi | 15. 3. 2014
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.

Meno *

E-mail

captcha

Odpíšte kód

Publikované: 13. 4. 2012 | prečítané: 2689x | komentárov: (2) | tagy: facebook,
Hosting zadarmo od WebSupport.sk

Enya - White is in the Winter Night

Kontakt
|
Vyhľadávanie
|
HTML5
|
CSS

webmaster: posta@dkubinsky.sk

štatistiky prístupov

Tvorba web stránok

Web stránky, e-shopy a aplikácie efektívne, funkčne, jednoducho - postavené na vlastnom redakčnom systéme.

Web stránky a E-shopy efektívne, funkčne, jednoducho...

Návrat hore