Så här optimerar du Facebook Likes!

postad Postad av Simon Sundén 3 mars, 2011 i Tips Taggar: charlie sheen, Facebook, like, meta-taggar, share, Simon Sundén

Tweet
PUSHA

I takt med att Facebook håller ett skarpt grepp om oss svenskar och bara ökar i storlek är det på sin tid att tipsa lite om hur du använder dig av Facebook och dess like-knappar. Det som är bra att veta är att den senaste tiden har Facebook tagit bort fördelen med Facebook Share-funktionaliteten och ersatt den helt med Facebook Like.

Förut var den lilla like-knappen någonting som syntes ganska litet på ens profil och nyhetsflöde, men nu är det snarare som så att Facebook Like ersatt detta helt!

Det här gör att nu ser det ut så här när jag gillar någonting:

Förut var det bara en liten text – men nu är det som sagt mycket större, smidigare och snyggare. Den stora frågan är dock – hur optimerar jag det här och gör det så att det ser så bra ut som möjligt?

Hur du får Facebook Likes att rocka:

Optimera och välj din Facebook Like-knapp:

Det första du behöver göra här att gå till Facebook och välja vilken knapp du anser passar dig bäst. Här finns det en rad möjligheter att anpassa det precis som du själv önskar. Vill du att det ska stå “rekommendera” eller “gilla”?, horisontellt eller vertikalt?

Facebooks Meta-taggar

Facebook har egna META-taggar och det är här det fina ligger i optimeringen. Som grund lägger du till META-taggar för att få det att fungera bättre med Like-optimeringen. Meta-taggarna ser ut så här:

<meta property=”og:tag name” content=”tag value”/>

Det är den här typen av meta-taggar som hjälper till för bättre Like-optimering och det finns en rad funktioner här som du kan använda dig av för att optimera det på bästa sätt.

Uppdatering: Precis som Bitcomplex nämner i kommentarsfältet nedan måste du först lägga till följande i headern på din sida:

<html xmlns=”http://www.w3.org/1999/xhtml”
xmlns:og=”http://ogp.me/ns#”
xmlns:fb=”http://www.facebook.com/2008/fbml”>

Typ av sida:

og:type

Den här taggen definierar vad det är för typ av innehåll. Är det en politiker, ett band, en stad, en bok, en artikel, en bar? Det finns 38 alternativ att välja mellan, men bloggar du bör blogginläggen ha article som som standard.

Exempel:

<meta property=”og:type” content=”article”/>

Bild för sidan:

og:image

Genom den här meta-datan kan du själv styra vilken bild som ska synas när du delar med dig av någonting på Facebook. Risken är annars att Facebook tar den första bra bilden de hittar – vilket inte alltid är optimalt.

Det fungerar även fortfarande att använda sig av <link rel=”image_src” href=”http://dinadress.se/bildduvillvisa.jpg” /> för detta, men om du implementerar meta-taggar kan du lika gärna använda det istället.

Exempel:

<meta property=”og:image” content=”http://blogg.binero.se/binero-rockar/” />

URL för sidan:

og:url

Det här är den viktigaste taggen, för den här försäkrar dig om att det verkligen är rätt sida personer gillar oavsett vilken konstig URL de kommit in via en webbläsare till din sida.

Exempel:

<meta property=”og:image” content=”http://blogg.binero.se/binero-rockar/” />

Namn på sajt

og:site_name

Det här är namnet på sajten som kommer stå med när någon delar med sig via Facebook Like. Det är den text som står direkt efter Like-delen då många delat med sig av ett inlägg och gör det lättare för dig att tydliggöra namnsättning på din sajt.

Exempel:

<meta property=”og:site_name” content=”Binero blogg”/>

Koppling till din Facebook-sida:

fb:page_id

Genom att lägga in ditt unika ID för din Facebooksida kan du koppla en “like” med en specific sida du har på Facebook

Exempel:

<meta property=”fb:page_id” content=”212917804514″ />

För att få tag på ditt ID för din sida gör så här:

Gå in på din Facebook-sida
För musen över profilbilden för sidan
Du ser då en URL i stil med http://www.facebook.com/album.php?profile=1&id=212917804514
Den sista delen id=212917804514 är ditt ID för din Facebook-sida

Titel på sidan

og:title

Det här är titeln som du visar på inlägget.

Exempel:

<meta property=”og:site_name” content=”Binero rockar mest!”/>

Beskrivning av sidan

og:description

Det här är beskrivningen som sedan visas när du delar med dig av innehållet

Exempel:

<meta property=”og:description” content=”Binero är Sveriges bästa webbhotell med bra priser på både domäner och webbhotell”/>

Nu när detta är gjort kan vi se hur det ser kommer det se ut någonting så här i koden:

<meta property=”og:site_name” content=”Binero blogg” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”http://blogg.binero.se/2011/03/traffa-oss-pa-webcoast-i-goteborg-18-20-mars/” />
<meta property=”og:title” content=”Träffa oss på Webcoast i Göteborg 18-20 mars“/>
<meta property=”fb:page_id” content=”423344605625″ />
<meta property=”og:description” content=”Binero Webbhotell är stolt sponsor och deltagare på Västkustens första deltagardrivna konferens Webcoast 18-20 mars 2011″/>

Och resultatet ser då ut så här:

Mycket snyggare och smidigare – samtidigt som du får det bättre ihopkopplat och med korrekt bild! Det finns en rad WordPress-plugins som sägs ska inkludera detta automatiskt. Jag har inte hittat något som är riktigt bra än, men återkommer med rekommaendation när det kommer ut ett som är 100% bra för detta. Fram tills dess rekommenderar jag att ni hårdkodar det .

http://bitcomplex.se Bobo Wieland

För det första vet jag inte riktigt om detta verkligen kan kallas “optimering”. Förväntade mig att få reda på hur jag ska göra för att inte sidan ska stå och tugga och vänta på att like-knappen ska laddas in eller liknande. Men jag gissar på att du syftar på optimering av utseendet enbart?

För det andra har du glömt att nämna att du måste lägga in xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml” i html-taggen för att det ska fungera med OpenGraph i alla webläsare

Kan vara kul med lite kuriosa över hur Facebook räknar likes också http://bitcomplex.se/webbutveckling/kort-om-facebooks-gilla-knapp/
Lis-h

Like-knappar och dylika “socia-media”-ikons är ju fult som as.
http://bitcomplex.se Bobo Wieland

Kan väl hålla med lite på den, men folk gillar att gilla. Och det är aldrig fel att på ett enkelt sätt kunna dela med sig av något bra/viktigt/roligt
Pingback: Hittat, länkat och kommenterat – March 3, 2011 | Emanuels randanmärkningar
http://www.joinsimon.se/ Simon Sundén

Tack för klargörandet där Bitcomplex! Ja, syftar mer på designen av Facebook Like-knapparna och inte laddningen av Like-knappar.

Har uppdaterat bloggposten nu med korrekt information samt även alla kodexempel som föll bort när inlägget publicerades!
http://twitter.com/ordbajsarn Stefan Bergfeldt

Jag hade också hoppats på något annat en en översättning av dokumentationen Det här var inget nytt under solen, även om min förhoppning handlade om hur jag ska utforma texterna för att generera fler likes när någon väl har gillat sidan (alltså personens vänner, via fb-flödet)
http://twitter.com/livsnjutare Igor Pavlic

Hej Simon (och resten av Binero),

Jag vill bara uppmärksamma dig och övriga läsare om att dina citationstecken är “felaktiga”. De är fel hos mig iaf.

Dina: ”Felakigt”
Mina: “Korrekt”

Observera att “dina” och “mina” citationstecken kanske ser exakt likadana efter att jag postat denna kommentar, men jag vill uppmärksamma de som kopierar koden ovan att det kan bli fel just på grund av detta. Därmed kan det hända att koden inte fungerar när man klistrar in den på sin hemsida.

Öppna exempelvis Antecknignar och byt ut samtliga citationtecken så ska det fungera. Detta är inget fel som Simon har gjort, utan jag misstänker att bloggen gör dessa per automatik.
http://marcusolsson.me Marcus Olsson

Ett till litet klargörande bara – du skriver att man ska lägga in i head-taggen, den ska ju så klart vara innan head-taggen =) Snygg guide dock – har använd Facebook knapparna tidigare, men har inte tänkt på att “customize” dem på det här sättet.

Sedan bör du snacka med stackaren som har lagt in taggarna på den här sidan, han/hon (eller det kanske var du?) har kopierat från din text, och då fått med de kursiva citat-tecknerna – inte så bra =) Dem bör du för övrigt lägga i en pre-tagg eller i alla fall ta bort den kursiva stilen så att inte fler sitter och kliar sig i huvudet över varför det inte fungerar sedan.
Pingback: META-taggar och SEO | Binero blogg

Bineros blogg om webbhotell, domäner och annat kul på nätet