Facebooks Gilla knapp i WordPress
gilla

Ni har säkert hört eller sett att man nu kan implementera Facebooks Gilla (Like) knapp på bloggar, hemsidor, bilder, videor eller… ja, vad som helst. Med hjälp av knapparna kan du gillar eller ogilla hela internet och med ett lite klick tala om att du gillar det som som står. Det perfekta verktyget för den som är för lat för att lämna en kommentar. Frågan är bara hur man får den att dyka upp på sin egen blogg.

Gilla Knapp från Facebook Developers

Svaret finner man hos Facebook Developers, och mer exakt på deras sida om sociala tillägg. Där kan du generera den gilla knapp du föredrar, men bredd, typ, visning av miniatyrer med mera. Efter att sedan klicka på knappen ”Get Code” får du upp en ruta med text som du ska lägga in på din hemsida.

Med standardvärdena skapas en kod likt den nedan:

1
2
3
4
5
6
<iframe 
    src="http://www.facebook.com/plugins/like.php?href=http%253A%252F%252Fexample.com%252Fpage%252Fto%252Flike" 
    scrolling="no" 
    frameborder="0" 
    style="border:none; overflow:hidden; width:450px;" allowTransparency="true">
</iframe>

Det viktiga här är texten som står mellan citationstecknen efter src så detta ska vara permalänken till hemsidan du vill att Gilla-knappen ska associeras till. Vill du att det ska vara till din startsida skriver du enkelt ”http://wordpressguru.se/” (som det skulle bli i mitt fall). Men ofta vill du likt jag, ha en gilla knapp på varje blogginlägg som alltid riktas till det inlägg den visas på.

Permalänkar i WordPress

Genom att använda kodsnutten

1
<?php echo get_permalink(); ?>

kan vi se till att vi alltid har rätt länk till vår gillaknapp. Facebook tycker dock inte om kolon (:), snedstreck (/) och andra märkliga tecken, så vi måste också använda oss av en php funktion som konverterar alla sådana tecken till oläslig text likt %253A för ett kolon.

1
<?php echo urlencode( get_permalink() ); ?>

Hela koden som ska sättas in på din WordPress-blogg kommer alltså att se ut så här:

1
2
3
4
5
6
<iframe 
    src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode( get_permalink() ); ?>" 
    scrolling="no" 
    frameborder="0" 
    style="border:none; overflow:hidden; width:450px;" allowTransparency="true">
</iframe>

Gör om Like-knappen till en Gilla-knapp

Med störst sannolikhet skriver du dina inlägg på svenska, och har säkert också hela ditt tema på svenska, men med standardinställningarna av gilla knappen blir den på engelska, och då istället med texten ”Like”.

Detta måste vi göra någonting åt, och gör så också genom att lägga till ”locale=sv_SE” på våran länk i iframen. en_US skulle ge oss amerikansk engelska och sv_FI ifall vi tillhör typen ”svensktalande finländare”.

Genom att lägga till argumentet locale kan vi alltså bestämma precis vilket språk vi vill ha vår gilla knapp på. Eftersom vi redan har argumentet href i adressen, blir vi tvungna att lägga till ett & tecken mellan detta värde och vårt nya. Hela koden ser då ut såhär:

1
2
3
4
5
6
<iframe 
    src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode( get_permalink() ); ?>&amp;locale=sv_SE" 
    scrolling="no" 
    frameborder="0" 
    style="border:none; overflow:hidden; width:450px;" allowTransparency="true">
</iframe>
Tips: För att hemsidan fortfarande ska validera i W3c standard så får man inte ange &-tecken i koden, utan får skriva om den
& = &amp;

Sätta in den i WordPress

Så vart placerar du nu denna kodrad? Och hur?

Om du bloggar genom bloggnätverket WordPress.com kan du inte lägga till plugins hur du vill och inte heller redigera dina teman hur du vill och blir därför relativt begränsad att sätta dit en gilla knapp. Om du däremot äger en egen WordPress blogg genom att ha laddad ner och installerat hela programmet från WordPress.org, då är det lättast att gå in på Inställningar > Redigera och klicka på förslagsvis sidan single.php (som du hittar på höger hand på sidan).
Leta upp en bra plats i denna kod, tex direkt före en </div>, klistra in koden, spara och se hur det ser ut. Om det inte kändes rätt, så är det bara att försöka igen.

Bredden på området, gillaknappen får använda, ställer du in där det står ”width:450px”. Den på min sida får lov att använda 110px.

Lycka till!


34 kommentarer till 'Facebooks Gilla knapp i WordPress' »»

  • Tack för ännu en bra guide!
    Och om man är lat eller inget geni som du:
    http://wordpress.org/extend/plugins/search.php?q=facebook+like&sort= ;-)


  • Glöm inte bort att i koden som ska klistras in så ska även följande med:
    http://www.facebook.com/plugins/like.php?href=

    Du råkar möjligtvis inte veta om där finns någon metod för att lista samtliga sidor på en webbplats som har blivit gillade? Idag la jag in ”rekommendera”-knappen för TV-serier på omTVserier.se men det vore även kanon om man kunde lista sidorna efter hur många som har rekommenderat dem.


    • Tack för att du såg url-felet. Ska genast fixas.

      Angående ”rekommendationer” skulle du kunna använda ett annat av facebooks sociala plugin: Rekommendationer. Jag har inte själv testat det, men enligt beskrivningen ska det göra precis det du efterfrågar.

      Berätta gärna hur det fungerar.


  • Tack för en bra guide som vanligt. Jag använder FB med iframe som du har beskrivit ovan och det fungerar fint men ibland står det ”Like” och ibland ”Gilla” trots att jag specifikt ville ha svenska när jag plockade koden från FB dev-sidor. Vet du vad det kan bero på?


    • Hej Hugo.
      Normalt så sätter du inget språk på gilla knappen, och då kommer den att välja engelska som default och vara ”Like”, och svenska om du är inloggad på facebook och har svenska som språk där. Är du inloggad på facebook med franska som språk så kommer även din gilla knapp att bli på franska.

      Men om du nu vill ha den alltid på Svenska så ska du i adressen som används för att hitta iframen skriva dit variabeln locale=sv_SE vilket alltså skapar följande src rad:

      src="http://www.facebook.com/plugins/like.php?locale=sv_SE&href=<?php echo urlencode( get_permalink() ); ?>"


  • Tack för snabbt svar. Den har växlat lite mellan både svenska och engelska sista tiden nämligen.


    • Kanske är för att du loggas ut från ditt Facebook emellanåt när du inte har det fönstret igång? Och sen när du är där loggas ut in, och då blir det på svenska igen :)

      Inser dock att min är tvärt om, när jag är inloggad på Facebook blir den på engelska, då mitt Facebook språk är engelska, och annars blir det på svenska eftersom mitt ip-nummer är svenskt.

      Lycka till.


  • Hej!
    Verkligen helt lysande guide. Perfekt att du tar med ALLA detaljer vilket gör att även en nybörjare som jag kan följa den. Jag har länge velat använda koden istället för plugin (som jag använder på en annan sida och blir lite less på att den hamnar på fel ställe).

    En minidetalj, jag hittar filen single.php under APPEARANCE/EDITOR dvs utseende/redigerade, inte under inställningar som du skrivit.


  • Tillägg till min förra kommentar. Blev så glad över att jag lyckades fixa detta själv utan plugin. Så jag skulle göra det på en till sida. Men den har atahualpa och det temat har visst ingen single.php-fil (åtminstone inte som jag kan hitta igen). Men tack för bra guide iaf.


    • <!-- Det här inlägget har försvunnit på grund av en databas krasch, om du är intresserad av vad som stod i kommentaren, vänligen kontakta mig så ska jag försöka återskapa kommentaren -->


  • Glad att kunna bistå med korrekturläsning :-)
    Jag bläddrade runt i atahualpas filer (massor) en bra stund tills jag gav upp. Det får vara plug-in som gäller tills jag byter tema eller lär mig mer.

    Det jag gillar med kodvarianten, förutom tillfredsställelsen att fixa det och möjligheten att placera den lite varstans, är att det medföljer en extra finess (ifall man använder standardknappen). När en besökare trycker gilla kan de välja att också skriva en kommentar. Då hamnar kommentaren i FBs flöde med bild, utdrag och länk. Detta är något jag såg för ett tag sedan på en sajt (swedish hasbeens) och länge funderat över hur de åstakommit.

    Nackdelen är att de verkar plocka en bild lite hur som helst, den har inget med själva inlägget att göra.


    • <!-- Det här inlägget har försvunnit på grund av en databas krasch, om du är intresserad av vad som stod i kommentaren, vänligen kontakta mig så ska jag försöka återskapa kommentaren -->


  • Min erfarenhet är att någon av de tio bilderna är den man satt som ”thumbnail” eller ”utvald bild”.

    Men i den här versionen så kan man inte välja alls. Man får gå in på FB i efterhand och se vad de blev. Har provat några gånger och det är verkligen hela havet stormar.


    • <!-- Det här inlägget har försvunnit på grund av en databas krasch, om du är intresserad av vad som stod i kommentaren, vänligen kontakta mig så ska jag försöka återskapa kommentaren -->


  • … men jag tycker ändå om funktionen. För det gör att folk som kanske bara tänkt gilla, också kan skriva en kommentar.


    • <!-- Det här inlägget har försvunnit på grund av en databas krasch, om du är intresserad av vad som stod i kommentaren, vänligen kontakta mig så ska jag försöka återskapa kommentaren -->


  • Vilken bra sida du har här! jag har lärt mig massor de senaste 20 minuterna:) tack för all hjälp!

    Petter Hedman


  • Jag får det inte att funka. Vad gör jag för fel?

    Är det bara att kopiera och klistra in på Enskild inlägg?

    Gör detta, men ingenting händer.

    Tack på förhand!


    • <!-- Det här inlägget har försvunnit på grund av en databas krasch, om du är intresserad av vad som stod i kommentaren, vänligen kontakta mig så ska jag försöka återskapa kommentaren -->


  • 22. Pingback: Mail vid nya kommentarer och fb-knappen | Var som helst

  • 23. gullan skriver: |

    Hej
    Tack för många bra guider.
    Jag undrar varför det blir så mycket ”space” under koden när man lagt in det på sidan, jag har försökt lägga ”gilla-funktionen” längst upp på page.php men då trycks allt annat så långt ner.
    mvh
    gullan


    • Jag hoppas att du inte lägger den ”helt” högst upp, den måste först och främst vara under koden ”wp_header()” och den bör den förslagsvis vara innuti minst ”någonting”. Det är alltid bra att låta den vara inneslutet av en så kallad ”div”-tagg. Så leta efter den första <div>-taggen du kan hitta och placera den direkt efter, för att se ifall det gör någon skillnad.

      Knappen skrivs i vilket fall ut som ett ”block”-element. Det betyder att den kommer att ta upp en hel rad, och allt annat kommer att hamna under den. Ifall du sedan har en marginal specificerad i style.css, så är det möjligt att allting annat hamnar ännu längre ned.

      Om du postar länken till din hemsida, så skulle jag kunna ta en titt och se vad som orsakar just ditt problem.

      Vänligen Grurun


  • 25. Pingback: wp-popular.com » Blog Archive » Facebooks Gilla knapp i WordPress | WordPress Guru

  • tackar för tipset
    precis vad jag vill ha till min blogg
    nu ska jag bara tvinga mannen att fixa det åt mig ;-)


    • Haha. Smidigt att ha en kille som kan göra sakerna. Men det är inte svårt, och genom att följa min guide så vet jag att du skulle kunna fixa det lätt, även utan hans hjälp. Lycka till.


  • Finns det något sätt att styra vilken bild som ska hamna på den som gillars FB-logg?
    Nu blir det en Toppliste-”banner”. Bloggtrafik.nu.


  • jag fick problem med gilla knappen, fick ett felmeddelande som såg ut så här
    ”You failed to provide a valid list of administators. You need to supply the administors using either a “fb:app_id” meta tag, or using a “fb:admins” meta tag to specify a comma-delimited list of Facebook users.”

    detta fixades enkelt genom att lägga till sin egen fb id, enligt följande (för att hitta din fb id går du in på din profile och nummret som dyker upp sist i adress fältet är ditt ID ):

    <meta property=”fb:admins” content=”din fb id” />

    ville bara dela med mig om detta ifall fler har stört på mitt probelm.


    • Det stämmer väldigt bra. Tack för det.

      Jag skulle dock beakta denna tagg med försiktighet då deras Open Graph (som de kallas) inte är kod som validerar enligt W3C-standard. Så man får inte en lika fin kod ifall man använder sig av sådant.

      Men om man bestämmer sig för att ändå göra det, så finns det ett helt gäng liknande taggar man kan fylla i för att vidare tala om vad sidan handlar om för Facebook (taggarna placeras alltså mellan <head>-taggarna i början av hela sidan):

      <meta property="og:title" content="The Rock"/>
      <meta property="og:type" content="movie"/>
      <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
      <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
      <meta property="og:site_name" content="IMDb"/>
      <meta property="fb:admins" content="USER_ID"/>
      <meta property="og:description"
            content="A group of U.S. Marines, under command of
                     a renegade general, take over Alcatraz and
                     threaten San Francisco Bay with biological
                     weapons."/>

Lämna en kommentar

XHTML: Du kan använda dessa taggar:
<a href="">, <em>, <strong>, <img src="">,
<pre lang="php">, <code>, <blockquote>