Vytvárame Facebook aplikácie III. Ako vytvoriť pekný LIKE z Vašeho webu

Tlačidlo páči sa mi to nájdete už dnes skoro na každom webe. Svojim autorom prináša návštevnosť a v rámci sociálnej siete buduje skupinu obľúbeného obsahu medzi užívateľmi. Aktuálne Facebook ponúka 3 možnosti ako na svoje stránky dostať like button.

3 spôsoby vloženia like buttonu na svoje stránky

Iframe

Tlačidlo sa vkladá cez tag iframe. Pôvodný spôsob a najmenej prispôsobiteľný. Výhoda je, že nie je potrebné vkladať do svojej stránky potrebné scripty aby sa button zobrazil. Tým ale, že je to iframe teda obdĺžnik ktorý zaberá nejaké miesto a obsah sa naťahuje z externej stránky nie je možné aby si iframe sám zabral toľko miesta koľko potrebuje. Ak nemáte znalosti javascriptu, HTML a facebook API tak siahnite po tomto riešení, je najjednoduchšie a najmenej prácne. Iframe verzia LIKE buttonu funguje len bez tlačidla send (odškrtnite ho).

XFBL tagy

Tlačidlo sa do HTML stránky vkladá cez tzv. XFBL tagy (značkovací jazyk od FB, niečo ako HTML len to zobrazuje elementy FB). Je potrebné do stránky vložiť  javascript of Facebooku s potrebným ID aplikácie aby bola daná stránka ako aplikácia.

HTML5 implementácia

Ak už používate na svojich stránkach HTML5 doctype tak je to jasná voľba. XFBML postupne vytlačí HTML5 spôsob. Výhoda je tá, že FB komponenty vložené cez HTML5 sú validné (narozdiel od XFBML) .Je potrebné do stránky vložiť  javascript of Facebooku s potrebným ID aplikácie aby bola daná stránka ako aplikácia.

Ako vygenerovať LIKE button?

Potrebný kód pre vloženie stránky si vygenerujte tu: http://developers.facebook.com/docs/reference/plugins/like/. Tu si dajte pozor na jednu vec! Ak použijete vloženie cez iframe je potrebné do parametra URL vygenerovať absolútnu URL adresu stránky ktorú chcete lajknuť.

Ak používate PHP môžete to spraviť napríklad takto:

<?php
function curPageURL() { 
$pageURL = 'http';  if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}  $pageURL .= "://";  if ($_SERVER["SERVER_PORT"] != "80") {   $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];  } else {   $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];  }  
return $pageURL; 
} ?>

<iframe style="overflow: hidden; width: 450px; height: 80px;" src="//www.facebook.com/plugins/like.php?href=<?php echo curPageURL(); ?>&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80&amp;appId=40809102898" frameborder="0" scrolling="no" width="320" height="240"></iframe>

Pri iframe verzii si do parametra href "vyechujeme" funkciu curPageURL() a tak si zabezpečíme, že lajkovať budeme vždy aktuálnu verziu URL. Ak použijete XFBML verziu tak tá parameter URL nepotrebuje lebo defaultne použije stránku na ktorej bolo stlačené tlačidlo. Ak potrebujete z akejkoľvek URL lajkovať inú stránku tak stačí do parametra href podsunúť ľubovoľnú URL.

Ako podstrčiť vzhľad lajknutia na Facebooku?

Facebook používa Open Graph Protocol čo v jednoduchosti dokáže z webu urobiť objekt v rámci sociálnej siete. Teda sa dajú nad ním vykonávať akcie užívateľov na FB (čítanie, komentovanie, atď...). K čomu je to dobré? Nateraz na to aby sme si prispôsobili vzhľad našej stránky ak ju niekto vyzdieľa či lajkne na facebooku.

Ako podstrčiť vzhľad lajknutia?

To je našťastie úplne jednoduché a spočíva v umiestnení OpenGraph meta tagov do hlavičky stránky. Napríklad by to mohlo vyzerať pri webe takto.

<meta property="og:title" content="Vytvárame Facebook aplikácie I. dôležité zmeny z konferencie f8"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://www.peteroravec.sk/vytvarame-facebook-aplikacie-a-dolezite-zmeny-z-konferencie-f8"/>
<meta property="og:image" content="http://www.peteroravec.sk/wp-content/uploads/2011/10/facebookpic1.jpg"/>
<meta property="og:site_name" content="Peter Oravec Blog"/>
<meta property="fb:admins" content="XXXXXXXXXXXXX"/>

V políčku fb:admins dajte ID uyivatela ktorý má byť adminom. Ak použijete na stránke napríklad modul na komentovanie tak nastavením svojho ID vo fb:admins budete môcť moderovať komentáre.

Ako si overiť ako bude vyzerať môj lajk?

Keď sme si vymysleli meta tagy, textíky, popisky a všetko máme umiestnené v hlavičke HTML stránky by sa zišlo nejak overiť ako bude vyzerať náš like v skutočnosti a či neobsahuje chyby. Existuje nástroj ktorý sa volá Facebook Debugger (alebo aj Facebook Linter). Nájdete ho na tejto adrese: http://developers.facebook.com/tools/debug.

Tu jednoducho zadajte URL adresu článku (už FB objekt v Open Graph). Zobrazia sa informácie tak ako si ich Facebok dokáže vytiahnuť zo stránky a ako ich aj reálne vidí. Ak to nemáte dobre spravené tak Vás upozorní čo je nastavené zle (väčšinou typy a povinné polia).

FIX: Facebook nevididí moje zmeny na stránke (v tagoch)?!

S týmto "problémom" sa určite stretnete... Ako sa hráte s openGraphom a testujete si ako Váš like bude vyzerať sa môžete ľahko dostať do situácie, že lajknutý odkaz na webe má neaktuálne údaje. Tým, že FB má obrovskú návštevnosť tak tieto údaje ktoré sa nemenia často cachuje a obnovuje ich zriedka. Ak sa Vám stane, že lajk nesedí s aktuálnymi údajmi z debuggera je tomu ľahká pomoc.

Chodťe do Facebook debuggera a znovu dávajte overiť URL ktorá sa na Facebooku javí ako neaktuálna. Ak by toto nepomohlo tak pridajte k url adrese ľubovoľný parameter aby si skontroloval FB ako keby nový odkaz ktorý ešte nepozná... napríklad takto: http://www.peteroravec.sk/vytvarame-facebook-aplikacie-ii-ake-aplikacie-sa-daju-vytvorit-s-facebook-api?nieco Na koniec sme pridali otáznik s názvol ľubovoľného parametra. Link smeruje na to isté miesto len pre FB je nový a teda by ho mal preindexovať nanovo. Vačšinou tento postup pomôže.

Ten Open Graph je nevalidný! Dá sa to vyriešiť?

Ako náhle dáte do hlavičky stránky meta tagy tak rýchlo zistíte, že sú nevalidné. Ak si zakladáte na validite kódu tak pre XHTML sa to dá ľahko vyriešiť. Jednoducho zmeňte doctype svojej stránky na XHTML + RDFa a meta tagy open graphu prejdu validáciou. Môže to vyzerať napríklad takto: 

<!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">

Dá sa ale zvalidovať HTML5? Implementácia FB v HTML5 (tagy) je validná ale bohužiať v čase písania tohoto článku je RDFa v HTML5 stále v štádiu vývoja takže to nespravíte. Ale časom to bude. Či to je alebo nieje validné je v podstate jedno. Fungovať to bude a to je dôležité.

Zhrnutie

Moje odporúčanie je: ak o weboch a javascripte neviete nič a potrebujete na webe like button tak použite iframe variantu. Ak používate už HTML5 používajte HTML5 implementáciu a kašlite na validitu. Ak ovládate javascript a rozumiete webom a nepoužívate HTML5 použite XFBL implemntáciu. Open graph meta tagy budete potrebovať všade takže postup je rovnaký. Jediný spôsob ako to mať validné (meta tagy open graph) je použitie XHTML + RDFa.

Ak sa Vám aj toto zdá zložité tak použite generátor open graphu ktorý si nájdete na webe. jeden je napríklad tu: http://www.metataggenerator.org/open-graph-meta-tags/. Open Graph ale nie je len o peknom lajku. To si ale vyžaduje už znalosť technológie, koho to zaujíma viac informácií je tu: https://developers.facebook.com/docs/opengraph/

Facebook Open Graph zahŕňa množstvo iných možností ale o tom možno nabudúce.



Podobné články

Klasické komentáre

Žiadne komentáre   :-(

Pridať komentár

Facebook komentáre ()

Napíš komentár