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

Från och med den 11 mars är det iFrames som gäller för att skapa material på Facebook pages. Visserligen kommer Facebook även hädanefter att underhålla existerande implementationer av applikationer och sidor byggda i FBML. Dock kommer det inte längre finnas någon möjlighet till att skapa nya sådana och Facebook uppmuntrar alla som har möjlighet att byta från FBML till iFrame.

Detta öppnar för en intressant utveckling då möjligheterna i och med användandet av iFrames på olika sätt ökar. Men varför får vi inte längre använda FBML? Och vad innebär detta i praktiken?

En iFrame tillåter en html-sida att innehålla ett helt annat html-dokument, som hämtats in från en extern plats. Har du gjort en iFrame-applikation kommer den alltså att visas som en extern html-sida i Facebooks ramverk. Fördelen med detta är att du nu alltså kan använda och visa vanlig hederlig html, css och javascript på Facebook, utan att vara beroende av Facebooks egenutvecklade, något begränsade dito.

Många tror att den externa hostingen som möjliggörs via iFrames är den huvudsakliga anledningen till att Facebook nu fasar över utvecklingen från FBML till iFrames. Detta kommer att avlasta Facebooks servrar och förhoppningen är att nätverket kommer att rulla snabbare hädanefter.

Vidare uppmuntrar iFrames användandet av Facebook Social Plugins, vilket bör vara gynnsamt och önskvärt från samtliga parter, utvecklare, användare, annonsörer och inte minst från Facebook. Till exempel blir det nu möjligt att ha Like-knappar på flera olika ställen på sidan, på samtliga produkter i sortimentet etc. Dessutom kommer det troligtvis att skapas snyggare applikationer hädanefter, då fler användare känner sig trygga och bekväma i att arbeta med html, css och javascript.

Okej, det var en kortare introduktion till vad som komma skall. Nästa vecka lägger jag ut en enklare tutorial för hur man går till väga för att lägga upp en iFrame på sin Facebook Page.

Läs iFrames guiden här!

//Calle

Today we launched Itamae’s two restaurant pages. The brief was to keep it very simple and easy HTML so they could update it in house. We discussed a lot what the customer wants and we came to the conclusion that people want three things from a restaurant page.

1) What can I eat and how much does it cost

2) How do I get to the restaurant?

3) When are you open?

With this in mind and to keep it simple we created two very simple pages that filled that need.

If you are in Stockholm and the cravings for sushi is getting absurd you have to try out Itamae.

Visit them at: http://www.itamae.se