Facebook-gilla knapp på VK-bloggen

Like-knappen (tummen upp) som finns överst i varje inlägg i all ära, men en Facebook-like knapp är ju lite fräsigare. Hur gör man då för att lägga in en sån på sin VK-blogg? Väldigt enkelt faktiskt, låt dig inte skrämmas av mängden text!

Nu är jag nästan helt ny som VK-bloggare, men jag ser inga möjligheter att ändra i kodmallen för inlägg eller på övriga sidan (det borde man verkligen kunna VK!). Om det är en korrekt iakttagelse så återstår det att lägga in like-knappen i delen till vänster och/eller i en egen widget till höger. För att illustrera har jag gjort det på båda ställena. Såhär går det till…

Logga in på Facebook och gå in på

https://developers.facebook.com/docs/reference/plugins/like

Där finns egentligen allt man behöver veta, men om jag ska ge mig på att förenkla/förädla lite så struntar jag i allt som har med statistik osv. att göra (Steg 2 och nedåt i guiden). In med knappen bara!

Fyll i fälten i "Step 1".

" URL to Like" Adressen till bloggens startsida, i mitt fall http://blogg.vk.se/betraktelser/ OBS! OM du vill ha en Like-knapp som gäller själva bloggen, dvs. startsidan (vänsterspaltens knapp i min blogg) lägger du in adressen. OM du vill ha en Like-knapp som känner av vilken sida du är på, dvs. medger att man Gillar eller Rekommenderar ett visst inlägg givet att användaren klickat på inlägget lämnar du blankt här (högerspaltens knapp i min blogg). Det senare alternativet fungerar bara med XFBML, mer info om det längre ner.

" Send Button (XFBML Only)" Det finns några olika kodvarianter man kan använda. Om man vill ha en "Skicka"-knapp också, måste man använda den som kallas XFBML. Om du tittar till vänster på min blogg hittar du en utan "Skicka" och i Widgeten till höger en med "Skicka".

" Layout Style" Om man tar standard får man med texten " 4 personer gillar detta. Bli den första bland dina vänner." Då den texten är rätt så lång, passar den dåligt både i vänster- och högerspalt. Jag valde därför button_count istället. Man kan även där se hur många som gillat sidan, men i en "bubbla". box_count ger en smal och hög layout.

Resten av valen är självinstruerande (behöver inte nödvändigtvis ändras). Klicka på "Get Code". Du får då upp ett fönster med diverse kod. Längst upp i fönstret finns 4 val. "HTML5", "XFBML", "IFRAME" och "URL". Om man valde att ha en "Skicka"-knapp är det tomt under de två sista. Min vänstra är utan "Skicka-knapp" och är en IFRAME.

Jag la till den genom att klicka på "IFRAME" i rutan. Där finns en kodsnutt som jag kopierade. Jag gick sen till "Inställningar" i min blogg och fönstret "Beskrivning". Klicka på Källa (OBS!). Klistra in den kopierade koden där du vill att knappen ska vara. Troligen kommer det att vara efter en </p>-tagg och före en <p>. Lägg INTE in koden mellan någon <p> och </p>, det verkar ske per automatik när man sparar. Spara.

Kontrollera att du fortfarande kan komma in på din blogg. Min försvann först (alltså, det gick inte att komma in på bloggen, men inget "försvann"), troligen för att jag gjort nåt knas med <p>-taggarna. Då tog jag bort koden. Sparade om och gjorde om allt igen. Då funkade det bättre. Låt sidan ladda färdigt. Det kan bli en kort fördröjning innan knappen syns.

XFBML-versionen som beskrivs nedan har problemet att rutan som kommer upp när man klickat på Gilla och där man kan skriva nåt innan den publiceras på ens Facebookwall delvis skyms. Skyms så mycket att den inte går att använda (nåja, det fanns en workaround, men den var inte så intuitiv). Troligen går det att få bort genom att ändra i stilmallen, men jag har inte lyckats ännu. Därför har jag breddat min blogg, och lagt den extra bredden på högerspalten. En tillfällig lösning som inte är så snygg, men den funkar i alla fall.

Jag gick in under Widgets och valde att skapa en ny Widget med "Valfritt innehåll", och döpte den till Facebook. Klicka på "Källa" (OBS). Tillbaka till facebooksidan där koden kom ifrån. I det här fallet har jag alltså klickat i " Send Button (XFBML Only)" för att få en skicka-knapp också. I rutan som kom upp när jag valde "Get Code" klickade jag på XFBML och då kommer det upp 3 kodsnuttar i olika rutor. Jag kopierade den första och klistrade in i widgeten. Sen kopierade jag den TREDJE och klistrade in den också, direkt efter den första. Man kan inte komma åt att klistra in saker i <html> taggen på VK-bloggen (tror jag), därför hoppade jag över kodsnutt 2. Om man läser det finstilta är kod 2 till för att knappen ska funka med äldre versioner av Internet Explorer, men det känns som ett icke-problem att de läsare som har gamla webbläsarversioner inte kan "likea". Voila, klart!

Förutom skillnaden i "Skicka" mellan IFRAME och XFBML-varianterna så får man upp en möjlighet att skriva en text till sitt gilla med XFBML-versionen. Det får man inte med IFRAME.

Delvis löst problem: Hur får man rutan som kommer upp när man klickar på Gilla eller Rekommendera att synas helt om man använder XFBML-versionen utan att bredda sidan? CSS-en lär behöva ändras, men hur?

Ställ gärna frågor i kommentarsfältet så ska jag försöka svara, och förtydliga guiden där det behövs.

Glöm inte klicka på FB-like-knappen om du gillade guiden!