Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse
Facebook API – Facebook plugins för bloggar!

Facebook API – Facebook plugins för bloggar!

Medan vi väntar på den nya idén så tänkte jag köra ett inlägg här om Facebook API och hur man lägger till de olika pluginsen och redigerar dem så man vill ha dem.

Plugins från facebook hittar ni på följande länk -> http://developers.facebook.com/docs/plugins/

Vi börjar med facebooks själva javascript-kod. Javascript-koden ser för det mesta ut så här:


<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/sv_SE/all.js#xfbml=1&appId=217470551695795";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Oavsett vad för plugin du väljer – facebook gilla knapp, facebook’s kommentarfält – eller annat så kommer det alltid vara samma Javascript-kod. Notera att ni inte ska använda den jag klistrat in här i inlägget utan ni måste få eran egna. Den behöver ni inte lägga in mer än en gång.

Först av allt så har vi “Gilla”-knappen. http://developers.facebook.com/docs/reference/plugins/like/
När ni kommer in där ni väljer “Gilla”-knapp så kommer det se ut så här ungefär:

Tänkte gå igenom lite snabbt om vad man ska ändra för vad.
Först så har vi “URL to like”. Där ska du fylla i adressen som du vill att man ska gilla. Det kan vara allt från din Facebook-fan-page (Facebook sida) eller din blogg. Tex: “http://felix.blogg.se”. Då skriver man in vad folk ska gilla i fältet.

Sedan har vi en liten kryssruta.  Där väljer man ifall man vill ha “Send button” (Skicka knapp) så att man kan rekommdera sidan för andra facebook-vänner.

Sedan har vi Layout Style. Där väljer du hur knappen och det andra ska se ut. Såhär ser de olika alternativ ut:

Standard

Button_count

Box_count

Sedan har vi Width. Med denna så bestämmer du hur bred diven ska vara för själva facebook-gilla-knappen. Den står på 450px först. Det man skriver in är alltså i px (pixlar). Även om det inte ser ut som att den är 450px bred, så betyder det att diven fortfarande kommer vara 450px. Säg till exempel att du har valt Standard som stil för facebook-gilla-knappen. Sedan så väljar man mindre antal pixlar. Bilden under visar hur det kommer se ut med 100px:

“Show faces” då. Tyvärr så kan jag inte fixa en bild för hur det ser ut, men som det står på facebook så är “Show Faces” att det kommer upp små profilbilder på dem som har gillat din sida/blogg.

“Verb to display”. Där väljer man ifall det ska vara en “Gilla”-knapp eller “Rekommendera”-knapp. Det är skillnad på dessa två. Om man klickar på en rekommendera knapp så kommer det komma en liten ruta där man kan skriva ett inlägg om sidan/bloggen man rekommenderar.

“Color Scheme”. Översatt så betyder det “Färgschema”. Då finns det två alternativ. Antingen “Light” (ljus färg) eller “Dark” (mörk färg). Så här ser den mörka ut:

“Font”. Font är textens typsnitt för texten i knapparna och räknaren. Du får själv prova dig fram vad du vill ha, men det finns dessa alternativ:

Arial
 – Lucida Grande
Segoe UI
Tahoma
Trebuchet MS
Verdana

När du är färdig med alla inställningar och du har den så som du vill ha den så klickar du på “Get Code”. Då kommer en ruta upp som ser ut såhär:

Det som du ser i ruta 1, koden där, är det som får facebookplugins att fungera så som dom ska. Det är den koden som kommunicerar med facebook. Den kommer man som sagt bara behöva EN i koden. Bara för att du ska ha fler funktioner så betyder inte det att du måste lägga till koden i ruta 1 varje gång. Det räcker med att lägga till den en enda gång.

Ruta 2 innehåller själva diven för facebook-knappen. Du klistrar in den koden vart du vill ha den på din  blogg. Ifall du sedan måste positionera den rätt eller styla den på andra sätt så kan du lägga till detta i din stilmall eller där du har din CSS:


.fb-like {

}

Innanför måsvingarna (” { } “) så skriver du CSS koden som ska gälla för facebook-gilla-knappen.

 

Det var första pluginet. Då går vi vidare till nästa.

“Send Button”. Översätts till “Skicka knapp”. Den här är mycket simplare att konfigurera då den bara har så få alternativ. Alternativen är detsamma som Gilla-knappen.

“URL to send”. Adressen som du vill att man ska skicka.
Font – typsnitt.
Color Scheme – Färgschema för knappen.

Läs Gilla-knappens förklaringar på dem olika alternativen för “Skicka knappen”.

 

Prenumerera-knappen. Det är i stort sett exakt samma som “Gilla”-knappen bara att det står “Prenumerera” på knappen istället för “Gilla”. Men istället för vilken url som helst (adress) så måste vara din facebook profils adress. Prenumerera gör man på ens facebook profil. Så om någon klickar på prenumerera så komme den personen få dina poster från facebook.

“Comments” (kommentarer). Med den här så kan man lägga in ett kommentarfält på sin blogg så att läsare kan skriva vad man tycker om bloggen eller annat. Som innan så väljer du först adressen man ska kommentera. I detta fall så blir det din bloggs adress.

Sedan har du “Number of posts”. Alltså hur många poster som ska få synas samtidigt. Lämna den blank för att få med alla poster eller fyll i ett tal som du känns lämpligt.

“Width”. Här väljer du hur bred kommentar/post-fältet ska vara i px (pixlar).

Activity Feed kommer jag ta i ett annat inlägg då det kan bli en lång förklaring. Här måste man nämligen ha ett såkalat APP ID som man skaffar på ett speciellt sätt. Men det kommer komma ett inlägg om det någon dag. Samma med “Recommendations”.

 

Like Box. Här har vi en “Gilla”-box. Här kan man se senaste nytt från facebooksidan man har, vilka som gillar sidan, osv. Här har ni ett exempel:

 

Exemplet är på min facebook sida (Fexell). Först så ser man gilla-knappen som man kan trycka. Sedan ser man flödet från min sida och sist miniatyr bilder på dem som har gillat min facebook sida.
Detta plugin gäller tyvärr enbart dom som har en facebook-sida.

– Facebook Page URL (Facebook Sidans Adress). Fyll i facebook sidans adress i det fältet.
– Width vet ni vad det är vid det här laget.
– Height är dock hur hög den ska få vara. Det kan du bestämma helt själv. Talet du skriver in är i px (pixlar).
Color Scheme vet ni nu också vad det är, detsamma med Show Faces.

– Border color. Här skriver du in HEX-coden (exempel: #000 (svart)) för den färg du vill ha.

– Stream. Här väljer du ifall inlägg som skrivits på facebook sidan ska synas eller inte.
– Show Header. Klicka ur den här för att ta bort headern på boxen. Där det står “Hitta oss på facebook”.

När du är färdig så klickar du på “Get Code”. Kom ihåg att koden i ruta 1 ska bara finnas EN GÅNG på din blogg. Har ni redan ett annat plugin så behöver ni inte lägga till koden i ruta 1 igen!
Sedan kopierar du bara koden i ruta 2 och klistrar in den vart du vill ha den i kodmallen (där du har din HTML-kod). För att redigera den med CSS så lägger du bara till detta i stilmallen (där du har din CSS):


.fb-like-box {

}

 

Login Button och Registration kan vi hoppa över då det är mer för avancerade användare och mest tillför hemsidor.

 

Facepile. Detta plugin är tillför att enbart visa vilka som gillar ens blogg eller facebook sida.

URL tror jag ni har förstått vid det här laget.

– Action. Tänker inte skriva någon om den då den inte behövs.
– Size. Här väljer du storlek på profil-bilderna. Small, Medium eller Large.
– Num Rows. Ifall du har många som gillar så kan detta vara ett bra alternativ. Här fyller du i hur många rader av profilbilder som får synas. Varje rad har 6-stycken profilbilder.
– Width förstår ni nog nu, detsamma med Color Scheme.

 

 

Skribent och ansvarig för DDB. Driver Designa din blogg sedan juni 2015. Har bland annat studerat webbdesign, marknadsföring och online strategier både i Sverige och USA. Jobbar inom IT.

Läs mina andra inlägg

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *