Stanislav Duben

13. kvě 2010

Přidáváme Facebookové tlačítko "Líbí se mi" do WordPressu

Facebook přišel s novým Open Graph api rozhraním a rozšířil tak možnosti sociální komunikace a propagace u stránek. Už jste asi viděli na některých webech tlačítko "To se mi líbí" nebo "Doporučuji". Pokud ne můžete se podívat na příklad třeba na MAXiPod.cz. Přidat tuto možnost do Vašich WP stránek je celkem snadné a můžete použít dvě varianty implementace.

Přidání pomocí pluginu

Nejjednoduší varianta je použití pluginu, který na každou stránku vloží její "Líbí se mi" tlačítko a tak se za vás o vše postará. Ideální je například plugin http://wordpress.org/extend/plugins/like/. Stačí stáhnout, nahrát do plugin adresáře, aktivovat a je to. Navíc přidá Open Graph Metatagy. Takže se po stisku tlačítka bude na Facebooku stránka ukazovat se správnými popisky.

Výhodou tohoto pluginu je kromě snadného přidání také možnost mít tlačítko nahoře pod nadpisem nebo dole pod příspěvkem, případně na obou místech. Podpora více jazyků (čeština zatím chybí).

Nevýhodou tohoto řešení je, že "Líbí se mi" tlačítko se vkládá jen do konkrétního článku. Pokud tedy chcete použít tlačítko "Líbí se mi" například na úvodní stránce u každého úvodníku článku nebude to fungovat.

Přidání ručně do šablony WordPress

Z mého pohledu lepší varianta, která ale potřebuje zásah do šablony, je přímé vložení kódu pro Facebook do php souborů šablon. Pokud chcete mít tlačítko u každého článku tak určitě do index.php a archive.php

Tlačítko zobrazíte ve WP tímto kódem

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php 
echo urlencode(get_permalink()); 
?>&amp;layout=standard&amp;show-faces=true&amp;width=400&amp;action=like&amp;
font=verdana&amp;colorscheme=light" 
scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; 
width:400px; height:25px"></iframe>

Tento kód bychom měli vložit do cyklu pro zobrazování článků a "Líbí se mi" tlačítko díky němu bude odkazovat na konkrétní článek. V kódu index.php to tedy bude vypadat nějak takto

<?php
 if (have_posts()) : while (have_posts()) : the_post();
 if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts);
 ... 
?>            
 <iframe src="http://www.facebook.com/plugins/like.php?href=<?php 
 echo urlencode(get_permalink()); 
 ?>&amp;layout=standard&amp;show-faces=true&amp;width=400&amp;action=like&amp;
font=verdana&amp;colorscheme=light" 
 scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; 
 width:400px; height:25px"></iframe>
<?php 
 ....
 endwhile; 
?>

Popis parametrů v url

• layout - standard se zobrazuje takto, button_count se zobrazuje takto
• show-faces - true = ukazovat avatary, false = neukazovat avatary
• width - šířka vnořeného iframe
• height - nechte 25px pokud nechcete ukazovat i avatary facebookových uživatelů.
• action - může být like = "Líbí se mi", nebo recommend = "Doporučuji"
• colorscheme - light, nebo dark
• font - druh fontu, zde je omezení ze strany FB na tyto fonty
  • arial
  • lucida grande
  • segoe ui
  • tahoma
  • trebuchet ms
  • verdana

Open Graph Metatagy

Pro správné zobrazení stránky na FB, byste dále měli editovat soubor šablony header.php a přidat tam Open Graph Metatagy, konkrétně například takto

<meta property="og:title" content="<?php  ?>"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<meta property="og:image" content="nejake url k nahledovemu obrazku"/>

Ukázku funkčního řešení můžete vidět například na MAXiPod.cz nebo na Soutez.org