facebookFacebook 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

Komentáře   

Guest
+2 #1 Guest 2010-06-10 11:13
díky za informace.

v kódu
Guest
-1 #2 Guest 2010-09-08 22:10
no jo, ale jak dostat do og:iamge url obrázku, který je vázaný ke konkrétnímu článku, když odkaz na obrázek získám až v loopu, ale og:image se definuje už v hlavičce stránky? tohle mi vrtá hlavou.. poraď :)
Guest
0 #3 Guest 2010-09-13 11:14
Díky je to pěkné pouze si oprav v kódu místo & má být znaková entita jinak to ve validátoru hází chyby. :roll:

Ještě jednou děkuji
Jirka
Stanislav Duben
0 #4 Stanislav Duben 2010-09-13 12:09
Cituji Jirka:
Díky je to pěkné pouze si oprav v kódu místo & má být znaková entita jinak to ve validátoru hází chyby.


Máš pravdu v XHTML je to nevalidní v HTML to jde i bez entity. upravil jsem to, ale bylo to moc dlouhé na řádek, tak snad to teď nikoho nebude plést.
Stanislav Duben
0 #5 Stanislav Duben 2010-09-13 12:15
Cituji Milan:
no jo, ale jak dostat do og:iamge url obrázku, který je vázaný ke konkrétnímu článku, když odkaz na obrázek získám až v loopu, ale og:image se definuje už v hlavičce stránky? tohle mi vrtá hlavou.. poraď :)


Jde to treba takhle:

$image_id = get_post_thumbn ail_id();
$image_url = wp_get_attachme nt_image_src($i mage_id,'thumbn ail');
$image = $image_url[0];

Samozřejmě takhle to jde na stránce tj. v page.php nebo single.php. A to v případě že je náhledový obrázke zadaný. Pokud náhledové obrázky k článku nepoužíváš musíš si parsovat text přípsěvku a vybrat první použitelný obrázek. To je ale na delší povídání.
Guest
+1 #6 Guest 2010-10-16 13:46
Pěkný článek :-)

Přidat komentář


Bezpečnostní kód
Obnovit