I den första guiden för Facebook tittade vi över det mest vad Facebook Like är och hur man lägger till knappen:
Facebook Like knappen på din sajt steg för steg
Hör följer vi upp exakt hur Facebook Like knappen placeras ut i Google Blogger.
Att ta fram koden för din Blogger layout
Börja med att ta fram källkoden till din Blogger Layout. Det gör du genom att klicka på Layout, Redigera HTML och klicka i Utöka gränssnittskomponentmallar. Detta ser ut motsvarande:
Spara därefter undan en säkerhetskopia av koden. Detta måste du göra efter att du klickat i Utöka gränssnittskomponentmallar. Gör du gör detta innan får du inte med hela koden.
Om du ändrar något som får bloggen att sluta fungera (händer av och till även avseende allt så att endast en felkod visas) är det inte alltid lätt att korrigera felet och i dom fallen är det enklaste att byta tillbaka koden till säkerhetskopian.
Lägg till meta-taggarna og:site_name och og:image
De av meta-taggarna som bör läggas till är og:site_name och og:image (läs 3. Meta-taggar Facebook Like behöver) d.v.s. bloggens namn och en passande bild.
För Nyhetsbloggen blir koden:
<meta content='Nyhetsbloggen' property='og:site_name'/>
<meta content='http://4.bp.blogspot.com/_HAwM8GMv3V0/S9kHnOeEgJI/AAAAAAAAF78/fKFdrP3gCtU/s400/newfoundland.jpg' property='og:image'/>
Detta läggs till innanför head exempelvis enligt:
Att hantera og:title
För og:title kommer värdet sättas till sidan du befinner dig på om denna meta-tagg inte anges.
Det fungerar utmärkt på enskilda sidor men precis som för Google Buzz knappen får vi problem på startsidan och i pagination. Detta eftersom läsaren kan klicka på knappen avseende ett inlägg som visas medan URL som skickas blir den till startsidan.
Det kan gå att lösa med Facebook men jag har inte försökt göra det. Därför anger vi inte denna.
Skapa iframe för Like knappen
För att lägga till själva Like knappen genererar du först iframe kod enligt första guiden.
Precis som jag skrev där fungerar denna inte utan att URL till sidan du befinner dig på angivits (även om det påstås på ett par ställen). För att det ska bli inlägget knappen befinner sig på istället för att ange samma adress för hela sajten används följande funktion i Blogger:
data:blog.url
Därefter behöver du sätta samman den strängen med övrigt för den URL som ska anropas. Det sker i Blogger med expr.
I de inställningar jag valde blir detta:
expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:blog.url + "&layout=button_count&action=like&width=100&show_faces=false"'
Ingenting rörande ' eller " kan skrivas om. Avseende " kommer Blogger efter att du har sparat skriva om denna till " men det gör ingenting.
Därefter lägger du in denna kod i den iframe som ska användas. Även denna behöver skrivas om något för att fungera med Blogger:
1. Citationstecken (") runt värden måste skrivas om till "'".
2. Följande rörande utseendet fungerade inte bra med Blogger:
style='border:none; overflow:hidden; width:100px; height:20px'
Och skrevs om enligt:
frameborder='0' height='20' scrolling='no' width='100px'
Pröva dock gärna att behålla style eftersom det ska fungera och problemet jag hade (knappen visades inte respektive problem med att spara) behöver inte alls vara generellt.
3. Storleken på knappen och dess omgivande yta måste ställas in för att passa din blogg och var du tänker placera knappen och hur du ställt in den t.ex. om du tillåter ansikten, Facebook-namn m.m. att visas.
Storleken ändras genom att öka och minska siffrorna för height och width.
Slutligen behöver man sätta samman alla delarna och vi får:
<iframe allowTransparency='true'
expr:src='"http://www.facebook.com/plugins/like.php?href=" + > data:blog.url +
"&layout=button_count&action=like&width=100&show_faces=false"'
frameborder='0' height='20' scrolling='no' width='100px'>
</iframe>
Att placera Like button koden för iframe
Koden placerar du på den plats som motsvarar var du vill ha den utskriven. De flesta vill troligen skriva ut den vid inläggets slut.
Att exakt hitta den delen av koden behöver inte vara lätt. I min layout börjar den vid:
<div class='post-footer'>
Men det kan variera. I samma område skrivs dock normalt labels etiketter för inlägget ut och koden för det kan man söka på så hittar man ungefär rätt:
<data:label.name/>
Därefter får man pröva sig fram tills det ser acceptabelt eller bra ut beroende på ambitionsnivå.
Att lägga Like i sidelement
Ett till alternativ för att lägga till denna typ av knappar är att placera dem i ett sidelement för HTML genom att gå in på Layout:
Troligen räcker det bra med att öppna en HTML sidelement och kopiera in koden. I detta fall behöver du inte bry dig om " och '.
Däremot kommer inte URL gå att sätta URL till den sida läsaren befinner sig varierat (om du inte gör en lösning för det i Javascript). Du kan dock sätta URL till samma för hela bloggen t.ex. www.nyhetsbloggen.com.
Vidare gäller det kanske bara iframe eftersom meta-taggarna om jag kommer ihåg rätt ska vara placerade i head. Ingen html som ska hamna i head går att sätta via sidelementen.
