Facebook Like knappen på din sajt steg för steg

Facebook Like är en ny funktion som hjälper dina läsare att visa upp att de gillar ditt innehåll på deras Facebook sida.

INNEHÅLL

Hur bra är Facebook för att få trafik?
Hur ser Facebook Like ut?
3. Meta-taggar Facebook like behöver
4. Att lägga till Facebook JavaScript SDK
5. Koden till Facebook like knappen
6. Att lägga till like med iframe
7. Ange aktuell sida för iframe
8. Mer att ställa in för like 9. Like knappen i PHP
10. Problem med Mozilla Firebox och Facebook like med <fb:like>
11. Hur ser exemplen ut?
12. Mer om Facebook Like

Läs även:

Facebook Like knappen till Google Blogger

Att läsarna gillar ditt innehåll på Facebook kan hjälpa dig få fler läsare därifrån eftersom andra Facebook-användare upptäcker ditt innehåll.

Dessutom stimulerar Facebook och andra sociala media diskussion om ditt innehåll. Det innebär värdefulla tips om hur innehållet kan förbättras och vad det bör kompletteras med. Även om antalet extra besökare du får är lågt är värdet ändå högt om du får detta värde.

1. Hur bra är Facebook för att få trafik?

Jag har själv använt Facebook väldigt sällan och förutom de senaste dagarna när jag experiment med deras sociala funktioner troligen inte fler än fyra gånger totalt. Ändå från vad jag sett i Analytics kan Facebook ge jämfört med mycket annat bra med trafik.

Ett generellt men dåligt underbyggt intryck är också att Facebook naturligt lättare utan särskilda åtgärder ger innehållsleverantörer (inte minst tidningar) lättare trafik än t.ex. vad Twitter gör.

Att många av våra större tidningar är väldigt glatt välkomnande mot Facebook tror jag pekar på att jag har rätt i detta. I allmänhet är de annars väldigt negativa mot sociala media även om det förändrats sista halvåret. Även om sådant inte är medvetet är det lätt hänt och inte sällan väldigt indikativt när motsatsen gäller.

Jag menar därför att för tidningar på nätet, bloggar med mer redaktionell natur, specialiserade bloggar, nättidningar och jämförbart är Facebook troligen bra.

2. Hur ser Facebook Like ut?

Utseendet går att anpassa även om möjligheterna är begränsade till att likna vad Facebook själva använder. Även bl.a. bredd, höjd och om avatar ("ansikte") för dom som gillat ditt innehåll ska visas.

Nedan ser vi hur det blev i Nyfiken vital vilket motsvarar hur det blev med koden som används i införandet här:

Du kan se utseendet "live" till exempel i:

Hur din blogg blir länkad från Nyfiken vital

3. Meta-taggar Facebook like behöver

Du behöver lägga till några meta-taggar med information om din sida för att Facebook like ska fungera. Dessa är:

og:title
Titeln för sidan. Om du inte anger denna används vad som är angivet för html-taggen title.

og:site_name
Namnet på din sida t.ex. "Nyhetsbloggen" eller "Nyfiken vital".

og:image
URL till en bild som passar bra att visa i Facebook. Bilden måste vara minst 50px X 50px och det maximala förhållet mellan sidorna 3:1.

Givetvis går det för og:image att ange samma bild för hela sajten. Det är vad som är enklast. För särskilt nyhetssajter och bloggar kan det dock vara intressant att där bilder finns ha möjlighet att ange en sådan. Det kräver dock viss anpassning av den plattform man publicerar på och vilka av dessa som ev. har stöd för det idag vet jag inte och troligen finns det ännu inte. Gissningsvis kommer det dock snabbt åtminstone till Wordpress.org.

Följande exempel för hur meta-taggarna kan bli är från Nyfiken vital:

<meta property='og:site_name' content='Nyfiken vital'/>
<meta property='og:image' content='http://www.nyfikenvital.org/nyfikenvital.jpg'/>

I detta fall har og:title inte angivits eftersom titel för respektive sida redan är välanpassad även för Facebook.

4. Att lägga till Facebook JavaScript SDK

För att visa själva knappen finns två möjligheter:

"The basic Like button is available via a simple iframe you can drop into your page easily. A fuller-featured Like button is available via the XFBML tag and requires you use the new JavaScript SDK. The XFBML version allows users to add a comment to their like as it is posted back to Facebook. The XFBML version also dynamically sizes its height; for example, if there are no profile pictures to display, the plugin will only be tall enough for the button itself."

Från: JavaScript SDK | Facebook Developers

Att lägga till Facebook JavaScript SDK bör inte vara någon nackdel. Det möjliggör även att skapa integration med Facebook på fler sätt. Vi valde därför att skapa like på Nyfiken vital via Facebook JavaScript SDK.

På varje sida lades därför följande kod till som laddar Facebooks JavaScripts funktioner:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

Här förklaras både hur du lägger till knappen med Facebook JavaScript SDK och utan.

5. Koden till Facebook like knappen

Därefter är det bara kvar att placera ut koden för själva like knappen. Exakt hur du gör det varierar beroende på plattform du publicerar på. I många fall kan du behöva göra det med PHP. I andra fall räcker det med att kopiera in HTML-koden direkt.

På följande sida kan du ställa in utseendet för knappen och få HTML-koden för den:

Like Button

Den översta koden fodrar inte att Facebook JavaScript SDK finns medan den undre kräver denna. Den senare uppges vara mer flexibel för anpassning men skillnaderna avseende just Like knappen rör ingenting viktigt. Däremot gäller att många andra typer av funktioner för integration, diskussion, delning av innehåll m.m. möjliggörs.

6. Att lägga till like med iframe

Lägger du till knappen med iframe behöver du inte Facebook JavaScript SDK. I många fall räcker det då med att kopiera koden och lägga till den i din layout.

7. Ange aktuell sida för iframe

Om ingen sida anges sägs att aktuell sida ska vara standard men jag är inte 100% säker på att det alltid fungerar. Det kan därför vara bättre att ange denna explicit.

Det sker direkt efter URL till Facebook. Till exempel är URL till den sidan som här används som exempel:

www.nyfikenvital.org/?q=node/2829

I detta fall blir koden till och med denna:

<iframe src='http://www.facebook.com/widgets/like.php?href=www.nyfikenvital.org/?q=node/2829

Därefter fyller man på med övriga parametrar. Enklast ställs dessa in via den widget Facebook gjort för detta:

Like Button

8. Mer att ställa in för like

Bredd och höjd går att ställa även om nödvändigt utrymme påverkas av hur du låter dom som rekommenderat sidan ska synas. Visas dom som gillar din sida med avatar behövs tillräckligt utrymme under för att det inte ska se konstigt ut. Standard bredden på 450px är i dessa fall troligen bäst att använda.

Det går att välja bort att avatar ("faces") visas.

Några olika fonter finns att välja mellan. Antingen väljer du samma som du använder i övrigt, samma för övriga widgets eller en egen för att skilja ut Facebook.

Du kan välja mellan mörk och ljus färg i båda fallen överensstämmande med Facebook i övrigt.

Om många kommer rekommendera ditt innehåll kan sätta scrolling till yes för att göra det möjligt att se alla. Det krävs också om du ger Facebook like ett väldigt begränsat utrymme.

Även går det att sätta en frameborder d.v.s. som en kant respektive ange om det hela ska vara transparent eller inte. Ingen av dessa behöver andra enstaka om någon ändra.

Fler inställningar finns och kan möjligen tänkas utökas när Facebook får respons på hur väl knappen fungerar. Deras dokument för sociala plugins visar den information som ännu finns dokumenterad:

developers.facebook.com/plugins

9. Like knappen i PHP

På Nyfiken vital var det nödvändigt att lägga till like i PHP för att enkelt kunna ange URL till aktuell sida.

För att skapa en sträng med URL för aktuell sida användes följande kod:

<?php
$pageURL = 'http://www.';
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
$pageURL = "href=" . $pageURL;
?>

I följande rader skrivs koden ut för knappen med iframe (d.v.s. utnyttjar ej Facebook JavaScript SDK):

<?php

print "<iframe src='http://www.facebook.com/widgets/like.php?" . $pageURL . "'";
print "scrolling='no' frameborder='0'";
print "style='border:none; width:450px; height:80px'></iframe>";
?>

Nedan har vi ett exempel där istället <fb:like> med XFBML använts. Denna kräver att du använder Facebook JavaScript SDK.

print "<fb:like layout='button_count' show_faces='true' width='450' action='like' font='verdana' colorscheme='light'></fb:like>";

10. Problem med Mozilla Firebox och Facebook like med <fb:like>

Både like gjord med iframe och <fb:like> fungerade bra i Google Chrome. Däremot fungerade endast iframe med Mozilla Firefox. När <fb:like> användes syntes den inte alls i Mozilla Firebox.

Därför valde vi på Nyfiken vital att tillsvidare att använda iframe.

11. Hur ser exemplen ut?

Exemplet med iframe och <fb:like> gjordes med lite olika inställningar. Först visas iframe: