Jag skrev i förra veckan om att Facebook från och med fredagen den 11 mars 2011 stryper utvecklingen av applikationer via FBML till förmån för iFrames. Det här är nog ändå ganska bra för Pages framtid. Att utvecka i html, CSS och JavaScript via iFrame erbjuder större flexibilitet och större möjligheter att skapa snygga och användbara applikationer.

Jag lovade i min förra post att lägga upp en liten tutorial i syfte att förklara hur man lägger upp sin iFrame på sin Facebook Fan Page. Nu är den äntligen här!

1. Servermiljö och html/css/javascript

Det finns två saker vi måste ta itu med innan någon fräsig app kommer att se dagens ljus. Först måste vi ha tillgång till en server där html-dokumentet vi skapar kan ligga. Kom ihåg att en iFrame är  hostad externt och ligger alltså inte direkt hos Facebook, utan hämtas in utifrån. I det här exemplet har jag valt att skapa en katalog under roten på min server som heter ”Appar”. I den katalogen (eller i underkataloger) lägger vi allt material såsom html-filer, css-filer, script-filer, bilder osv.

Sen måste vi också skapa ett html-dokument med lite innehåll att lägga upp på vår Facebook Page. En sak som kan vara bra att ha i åtanke är att sätta container-diven till 520 pixlar i bredd. Detta för att det snyggt ska passa in i Facebooks canvas utan att behöva scrolla till höger och vänster.

2. Developer –> Set up new app

När vi har vårt html-dokument klart och när filerna ligger i vår katalog på vår server är det dags att installera ”Developer”-applikationen från facebook.com/developers . Klicka på länken och sedan på ”Allow” i boxen som dyker upp.

Efter att applikationen installerats klickar vi på ”Set up new app”. Här döper vi vår applikation till någonting valfritt, godkänner villkoren och klickar på ”Create app” för att skapa appen. Därefter ombeds vi att fylla i en säkerhetsfras. Gör det och klicka på ”Submit”.

Nu kommer vi att se en ny vy med en tabbmeny i vänstermarginalen. Under den första fliken i listan, ”About” finner vi ”Basic Information”. Här har vi möjlighet att ändra namn på vår applikation, skriva en beskrivning om den samt lägga till en liten och stor ikon. Dessa fungerar som applikationens logotyp. Väljer vi ingen ikon kommer applikationen tilldelas en av Facebooks trista standardikoner. Således, vill vi att applikationen ska dra ögonen till sig bör vi också välja någonting fint.

3. Ge Facebook URL:en till din iFrame

Nog om ”About”. Under fliken ”Facebook Integration” ska flera viktiga uppgifter föras in. Under ”Canvas” skriver vi in var på din server filen ligger. Utelämna filnamnet, då det ska in längre ner på samma sida. Under sektionen ”Page Tabs” väljer vi först ett ”Tab Name”. Jo, jag vet. Detta är andra gången vi väljer ett namn åt din applikation. Det kan lätt bli lite förvirrande. Det namn vi väljer här är det namn som, tillsammans med den ikon vi har valt, kommer att visas i sidomenyn på vår Page. Vidare klickar vi i radioknappen för ”Iframe” och under ”Tab URL” skriver vi in namnet på html-filen vi har skapat och vill visa på vår Facebook Page. Vi klickar på ”Save Changes” för att spara våra framsteg och gå vidare.

4. Installera applikationen på en Facebook Fan Page

Vi är dock inte riktigt klara ännu. Kanske har vi flera Pages, men vill just den här appen på bara en av dem. Därför måste vi först välja vilken av våra Fan Pages vi vill installera den på. I vyn vi nu befinner oss i, listan över våra apps med huvudrubriken ”My Apps”, väljer vi ”Application Profile Page” i menyn till höger.

Vi kommer nu således till applikationens profilsida. Den påminner som man kan se väldigt mycket om din egna profilsida på Facebook. I menyn till vänster klickar vi på ”Add to my page”. Nu dyker de Fan Pages vi är administratör för upp i en popup. Vi väljer vilken Page vi vill lägga in vår nya app på genom att klicka på knappen ”Add to Page” vid ditt val.

5. TADAM…!

Om du nu går in och tittar på din valda Page så kan du se din nya applikation ligga i vänstermenyn, förhoppningsvis med ett fräckt namn och en flådig ikon.

//Calle

Consider yourself invited, you and all your splendor!