17.5.2010

Kako vgradimo Facebook Like gumb v WordPress blog

Facebook Like gumb je že na mnogih spletnih straneh. Like gumb nam lahko poveča obisk na naših spletnih straneh saj prinese dodaten obisk iz Facebooka (ki ga uporablja že več kot polovica slovencev), ter nam tudi pove kaj ljudje najraje berejo. Če ga želite vgraditi tudi v vaš blog, ki teče na WordPressu, vam bo moj današnji vnos všeč (in ga lahko Lajkate) :)

Za vse tiste, ki vas zanima kako dejansko gumb Like deluje si preberite uradno spletno stran Open Graph Protocol-a in navodila na Facebookovi strani. V navodilih lahko izveste tudi kako vgraditi Like gumb na katerokoli spletno stran. Pri vgradnji v WordPress je nekaj trikov in če boste sledili spodnjim navodilom vam bo prihranjenih kar nekaj kletvic.


Tak gumb boste lahko imeli na vašem blogu tudi vi

Obstaja 2 načina vgradnje. En je preko WP Like Plugina, drugi pa preko Open Graph Protocol Tools WP plugina (ki ga reklamirajo tudi na uradni strani Open Grapha).

Veliko bolj priročen je prvi način, torej preko Like Plugina, zato bom najprej opisal tega.

1. Downloadajte si WP Like Plugin

Najprej si downloadajte plugin v podmapo vašega WordPress bloga /wp-content/plugins/.

2. Aktivirajte plugin

Plugin aktivirate tako da greste v admin vašega bloga, kliknete Plugins in nato pri Like kliknete Activate.

3. Vnesite svoj user id, page id ali pa application id v plugin

Kliknite na Settings > Like. Vnesti morate svoj user id v Facebook Numeric ID polje, application id Facebook Application ID polje ali pa page id v Facebook Page ID polje. To je obvezno, da boste lahko urejali lajkane vsebine na Facebooku. Vnesti je obvezno podatek le v eno polje in ne v vse. V primeru, da ne veste vašega user id-ja (ni v linku, ki kaže na vaš profil, torej na profile.php in naot neka dolga številka, ampak imate nastavljen lepši user name (npr. anze.znidarsic), potem lahko user id izveste tako, da moj username (anze.znidarsic) v naslednji povezavi zamenjate z vašim: http://graph.facebook.com/anze.znidarsic

S tem, ko vnesete svoj user ID, boste lahko potem na facebooku tudi urejali svoj fan page, sledili statistiki, pošiljali sporočila svojim fanom, itd. Več o tem kdaj drugič, tokrat gre za bolj tehnični in ne vsebinski post ;)

Slaba lastnost tega plugina je, da lahko izbere le en type za vaš blog. Recimo Open Graph Protocol WordPress plugin vam omogoča, da je naslovna stran tipa blog vaši posti pa article, kar je nekako bolj pravilno. Bi bilo potrebno malce pohekati pa bi delovalo.

Sedaj pa še navodila za Open Graph Protocol Tools kjer je potrebno veliko več hekanja.

1. Open Graph Protocol WordPress Plugin

Najprej si downloadajte plugin v podmapo vašega WordPress bloga /wp-content/plugins/. Najhitreje to naredite, da enostavno v prej omenjeno mapo shranite to datoteko.

2. Aktivirajte plugin

Plugin aktivirate tako da greste v admin vašega bloga, kliknete Plugins in nato pri Open Graph Protocol Tools kliknete Activate.

3. Dodajte Like gumb v temo, ki jo uporabljate.

Odprite single.php datoteko teme, ki jo trenutno uporabljate. Če imate primerno nastavljene pravice to lahko naredite kar iz WordPress admina. Kliknite na Appearance > Editor in nato Single Post (single.php). Nato pod blog kjer imate klic funkcije the_content() vstavite naslednjo kodo:

<?php
if (function_exists('the_opengraphprotocoltools_like_code'))
  the_opengraphprotocoltools_like_code();
?>

4. Vnesite svoj user id ali pa application id v plugin

Kliknite na Settings > Open Graph Protocol. Vnesti morate svoj user id v fb:admins polje ali pa application id v fb:appid polje. To je obvezno, da boste lahko urejali lajkane vsebine na Facebooku in da vam bo delovalo lajkanje glavne strani (npr. http://anze.info, torej glavna stran in ne nek vnos v blog). Vnesti je obvezno podatek le v eno polje in ne v oba! Torej je OR in ne AND.

5. Spremenite open-graph-protocol-tools.php

Avtor plugina ni pomislil na dežele kjer uporabljamo šumnike. Zaradite tega pride do težave, ko lajkamo post, ki vsebuje šumnike. To na Facebooku potem izgleda tako, da šumniki niso šumniki, ampak se spremenijo v neprepoznavne znake.

Stvar je možno zelo enostavno rešiti. Spremenite naslednjo vrstico v datoteki open-graph-protocol-tools.php iz:

return "<meta property=\"{$property}\"
  content=\"".htmlentities($content)."\" />";

v

return "<meta property=\"{$property}\"
  content=\"". $content ."\" />";

6. Dodajte Like gumb na glavno stran

Če želite dodati tudi like gumb na glavno stran bloga in ne samo v določen blog vnos, torej želite, da nekdo Lajka celoten blog in ne le posameznega vnosa si najprej zgenerirajte primerno iframe kodo v generatorju Like gumbov in nato to kodo prilepite v sidebar.php datoteke teme, ki jo uporabljate. V primeru, da nebi vnesli svojega user id-ja/application id-ja kot sem opisal v četrti točki Like gumb v tem primeru nebi deloval.

V primeru, da ne vidite Like gumba v posameznem postu, preverite ali ste aktivirali plugin (točka 2), ter da ste vnesli kodo v single.php (točka 3). V primeru, da kliknete gumb Like in se po nekaj sekundah odlajka pa preverite ali ste vnesli pravilno podatke pod točko 4. Če imat težave s šumniki še enkrat preberite točko 5.

Za bonus bodo stvari, ki jih ljudje lajkajo prikazane med zadetki tudi v Facebook searchu (torej ko ljudje kaj iščejo):


Zadetek za blog tudi v iskalniku

Upam, da nam bo Like gumb vsem povečal obisk na naših spletnih straneh in da bomo iz števila lajkov lahko tudi prilagajali vsebino tako da bo čim bolj všeč našim bralcem ;)

p.s.
1 centimeter pod tem textom, ki ga sedaj berete lahko vidite kako izgleda Like gumb na mojem blogu. Pritisnite Like in videli boste kako zadeva deluje v praksi (v primeru, da ga še niste uporabljali drugje kot na Facebookovi strani).

Št. komentarjev: 7 na “Kako vgradimo Facebook Like gumb v WordPress blog”

  1. (jm) je napisal:

    Meni pa ne dela ptrva varianta.

  2. (jm) je napisal:

    v bistvu dela :-) )))

  3. Marko Pavlišič - jeanmark - Posijal je sonček | Najboljši blog: Kar tko mal je napisal:

    [...] pa sem na blog danes po Anžetovih navodilih dodal “Všeč mi je” (”Like”) facebook gumb. Če ste tudi vi veseli nad tem [...]

  4. Komac je napisal:

    Kater plugin pa ti uporabljaš? Ker meni nikakor ne rata usposobit, da bi zadeva delala tako na index.php kot single.php. Zna bit problem to, da uporabljam lastno temo. A se ne da kar zgenerirati gumba in ga nato vstaviti v template?

  5. Anže je napisal:

    @Komac: jaz uporabljam prvo varianto. V templejt ni potrebno nič vstavljati. Primerjal kodo tvojega templejte z defaultnim. Preveri tudi ali imaš plugin aktiviran. Imaš v kodi, ko daš view-source, og:title, itd.?

  6. Jure je napisal:

    Se statistika spremlja preko Insights ?
    Lahko vse Like gumbe povežeš na že obstoječo stran ali je možnost samo da ustvari vedno novo ?

  7. Gregor je napisal:

    Hvala Anže, meni deluje, super zadeva, sem se pa tudi sam malo zajebaval. No glavno da deluje :)

    lp Gregor

Dodaj komentar

RSS