Som de trendnördar vi är byggde vi självklart in Facebooks ”gilla”-knappsfunktion på bloggen efter gårdagens inlägg. Så alla ni läsare (för ni är några stycken trots allt!) som inte vill/orkar skriva kommentarer får väldigt gärna slänga iväg ett snabbt klick på dessa knappar om ni gillar något inlägg.

Om inte annat är jag lite nyfiken på hur/hur bra det hela fungerar, då man behöver hacka Facebooks funktionskod en del för att det ska fungera i WordPress, så det är lite av ett publikt betatest.

De ligger till höger om inläggsförfattarens namn i foten av varje inlägg, och om ni klickar in er till inläggets egna sida via rubriklänken så bör ni på samma ställe ha en utökad knapp som visar vilka av dina vänner som också gillat om det finns en sådan.

Om du själv har en WordPressblogg och undrar hur man lägger in funktionen så att den funkar i systemet, läs vidare på resten av inlägget så berättar jag hemligheterna.

Hur Facebooks originalkod ser ut

Så här ser koden ut i sitt grundutförande, men har du en vanlig sajt bör du istället använda Facebooks egna widget för att skapa en anpassad kod enkelt. Där ser du även lite vad olika parametrar gör.

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2F&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

Ändra källsidan

Problemet är att Facebooks URL-sträng är byggd för att ligga på en enda sida, så alla knappar du lägger in kommer länka till samma ställe. För att få den att hämta individuella blogginlägg i WordPress, ersätter du strängen som kommer vid ”like.php?href=” med denna snutt:

like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>

Det är egentligen allt du behöver göra med den, och nästa steg är att gå in i källkoden på din mall.

Förändringarna i mallfilerna

För att lägga till den under inläggen på framsidan öppnar du index.php, och vill du ha den även på blogginläggssidorna öppnar du single.php, och klistrar in koden där du vill ha den. Vanligtvis precis under den här raden (kan ha lite annan text i sig beroende på din template):

<?php the_content('<p>Read the rest of this entry &raquo;</p>'); ?>

Som exempel är här den fulla koden som jag använt på inläggssidorna på den här bloggen:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show-faces=false&amp;width=250&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:250px; height:25px"></iframe>

Anpassa utseende och funktioner

Som den uppmärksamme noterar har jag ändrat lite andra variabler också. Framför allt ”show-faces” har jag satt till false. Den funktionen visar presentationsbilderna på ens Facebookvänner som gillat inlägget/sidan man är på om det finns. Anledningen att jag valde bort den är att det dels känns en smula overkill, gör sidan stökigare med ännu fler bilder/grafik som drar uppmärksamhet men framför allt att det kräver att knappen tar ruskigt stort utrymme för att reservera plats åt dessa eventuella bilder.

Så personligen nöjer jag mig med att det står ens vänners namn bredvid knappen, men det är en smaksak förstås. Men om man sätter den på false, så kan man med gott samvete minska inte minst höjden drastiskt. Den är inte satt i originalscriptet men verkar ligga på runt 60 px. Utan bilder har jag kunnat minska detta till 28px, då får två rader plats. Bredden på 450px är också lite i mastigaste laget för de flesta layouter, så jag har testat att sätta den till 250px då jag tror de flesta personnamn får plats gott och väl. Har dock inte sett ännu hur Facebook använder sig av sina bredd- och höjdbehov när det blir flertalet vänner där, så kan inte garantera något.

För att göra den enklaste, lilla knappen som inte visar upp vänner och bara ett antal hur många som gillat, ersätt parametern ”layout=standard” med ”layout=button_count” som är vad jag gjort på den här bloggens förstasida (index.php) där utrymme är mer av en bristvara. Den lilla knappen kan man sätta bredd till 80px och höjd till bara 20px.

En sista intressant liten grej man enligt Facebooks informationsguide kan göra är att definiera en bild som dyker upp i flödet hos de som gillar istället för bara ren text. Exempelvis bloggens logotyp eller något annat representativt. Definiera en sådan genom att öppna din templates header.php och lägga till följande, efter du anpassat den med rätt sökväg till din bild, precis nedanför ”<head profile=…>”-taggen:

<meta property="og:image" content="http://www.dinblogg.se/sökväg/bilden.jpg"/>

Är dock osäker på hur/var den där bilden visas, för så vitt jag kan se syns den inte i vanliga flödet. Har dock inte hunnit testa det så mycket än, men kanske kan ha att göra något med antingen att det är en iframelösning eller den dynamiska implementationen man har behövt göra i scriptet.

För andra PHP-sajter

Om du inte kör WordPress utan har en annan dynamisk PHP-byggd sida behöver du istället först lägga in följande funktion tidigare i källkoden:

<?php $url = “http” . ((!empty($_SERVER['HTTPS'])) ? “s” : “”) . “://”.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>

Och när du då fått in nuvarande adress i en variabel så ersätter du samma Facebook-kodsnutt som ovan med:

like.php?href=<?php echo urlencode($url); ?>

Slutsats

Den här lilla funktionen tror jag har potential att bli riktigt utbredd, och kunna bli mycket effektivare för att dels marknadsföra mindre bloggar/sajter och dels ge personen/personerna bakom positiv feedback att folk gillar vad de gör, än vad alla olika tipsa-funktioner som funnits hittills nånsin varit.

Värt att notera är att lösningen jag beskriver ovan är en av två potentiella varianter, detta är en iframevariant som är den enklaste och som är den jag och många andra bloggare har hunnit anpassa. Det är inte jättesnyggt, och helst vill man ju ha sådana här saker integrerat på själva sidorna för att det ska funka bäst och snyggast, och det går även att bygga den här funktionen i Facebooks egna XFBML-språk. Då måste man dock först integrera deras javascript-SDK att utgå från.

Det är nog overkill för de flesta bloggare, men bygger man sajter är det nog värt att kika på det alternativet istället. Om någon sätter sig in i den varianten och får det att lira med WordPress/PHP så tipsa mig gärna!

Så have fun med denna nya lilla funktion; och gilla gärna det här inlägget om ni lärt er något nyttigt.

—–

Uppdatering:

Har noterat ett antal märkliga beteenden med knappen och funktionen. Bland annat verkar det som om när man har en knapp både på index.php och single.php, som vi har här, så visar ibland dessa inte samma saker av någon mystisk anledning. Om det är pga wordpress, koden eller facebook – eller bara något individuellt med cookies – är osäkert just nu.

Återkommer…

	Niklas Weidel Projektledare på Wisely
	2010/04/23
Kategori: Teknik Taggar: Digital teknik, Facebook, Fakta, Teknik

Detta inlägg var postat den 23/04 2010 klockan 11:03 i kategorin Teknik. Du kan följa eventuell respons på detta inlägg via vår RSS 2.0 länk. Du kan lämna en kommentar, eller återlänka från din egen sida.