Guide til opsætning af iFrame-applikationer på Facebook

Posted By on 22 jun, 2011 | 2 comments


Facebook meddeler i marts 2011, at static FBML-applikationen udgår og at disse ikke længere kan tilføjes til Facebook-sider. Nuværende FBML-sider bliver dog ikke permanent slettet (og via min link-samling fra tidligere indlæg kan de dog stadig tilføjes). Facebook opfordrer dog på det kraftigste, at alle fremover bør flytte fra FBML til iFrame-applikationer.

I indlægget her finder du en tutorial, der hjælper dig godt i gang med at bruge iFrame-applikationer på din Facebook-side.

Hvad er en iFrame-applikation på Facebook

Kort fortalt er en iFrame en ekstern HTML-side, som du integrerer i en Facebook-fane i menuen til venstre på din Facebook-side.

De gode nyheder ved iFrames på Facebook er, at disse ikke er hosted af Facebook ligesom FBML, og så kan du både bruge standard HTML, CSS og JavaScript. Du skal dog være fortrolig med disse teknologier. Du får også brug for en webserver, hvor du kan uploade filerne via FTP, så din Facebook-applikation kan vise indholdet og køre koden.

Upload til din server

På din webserver skal du oprette en mappe til dine iFrames og dit indhold i form af billeder, videoer og grafik. Opret for eksempel en ny mappe på din server og døb den “Facebook” og herunder en undermappe kaldet “iFrames”. Stien til dine filer kan se sådan ud: www.ditdomæne.dk/Facebook/iFrames.

HTML-filen der skal fungere som iFrame

Din HTML-fil skal benytte tags, HTML og JavaScript (Brug ikke FBML eller FBJS).
Indholdsfeltet (container DIV) må max. være 520 pixels bred. Her er et skrabet eksempel på en HTML-fil:

<DOCTYPE html PUBLIC “- / / W3C / / DTD XHTML 1.0 Transitional / / EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<style type=”text/css”>
body {
bredde: 520px;
margin: 0; padding: 0; border: 0;
}
</ style>
<meta  = “Content-Type” content = “text / html;
charset = iso-8859-1 “/>
</ head>
<body>
<div id=”container”>
<p> Dette er noget HTML-indhold </ p>
</ div>
</ body>
</ html>

I eksemplet finder du også koden til det eksterne stylesheet (style.css), som styrer din typografi, layout osv.

Installation af Facebook Developer

Det første skridt, i oprettelsen af en iFrame-applikation på Facebook, er at installere Facebook Developer. Det gør du ved at logge på Facebook og følge linket http://facebook.com/developers

Tilføj Facebook Developer applikation

 

 

 

 

 

 

 

 

 

 

Øverst i menuen under “Om” indtaster du navnet på din applikation og en kort beskrivelse. Upload et lille og et stort ikon. Det lille ikon bliver synligt i din venstre menu på din Facebook-side. Så nu slipper du for <<>> eller kedelige grå hjul i menuen. Så her har du mulighed for at gøre ikonet iøjefaldende og kønt, ellers får du som standard de to grå tandhjul.

Indtast navn og beskrivelse om applikationen

 

 

 

 

 

 

 

 

 

 

 

 

Herefter springer du til “Facebook integration” i menuen.

Facebook applikation Om-feltet

 

 

 

 

 

 

 

 

 

 

 

 

 
Den valgfrie “Secure URL” skal bruges, hvis din besøgende får adgang til Facebook via en sikker forbindelse (https://facebook.com). Denne webadresse skal begynde med https:// Lad det bare være tomt, hvis du ikke har et SSL-certifikat til din server.Under “Facebook integration” skal du i “Page Tabs” indtaste stien til, hvor du har gemt din iFrame. Fanenavnet er det, der bliver vist i indholdsoversigten på din fanside. Det kan være op til 16 tegn i bredden.

Bemærk: Hvis du ikke indtaster en Secure URL, får de besøgende ikke adgang til din iFrame, hvis de kommer på Facebook via SSL (https). Applikationen vil ikke være synlig for dem. Disse besøgende ser så blot din væg i stedet for din fane.

Klik på knappen “Gem ændringer”.

Nu er vi kommet til det punkt, hvor vi skal installere din iFrame-applikation på din Facebook-side.

Installation af iFrame-applikationen på din Fan Page

For at tilføje iFramen skal du klikke på linket “Tilbage til mine applikationer” øverst og vælge linket “Applikationens profilside”.

Facebook developer: Tilføje applikation til Facebook-side

 

 

 

 

 

 

 

 

 

 

 

 
En dialog-boks åbner, der viser alle de sider, som du er administrator på.Nu skal du klikke på “Føj til min side” i rækken af links til venstre.

Find den side du vil tilføje til og klik på “Føj til side”.

Føj til side på Facebook

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Din nye iFrame-applikation bør nu ligge på din Facebook-side. Hvis du ikke kan se den, kan det være nødvendigt at justere dine sideindstillinger. Fra forsiden af din Facebook-side, skal du klikke på knappen “Rediger side” øverst til højre. Klik derefter på Applikationer og find det program, du lige har tilføjet. Klik på “Rediger indstillinger” og vælg “Tilføj”.

Tjek altid dine URL’er

Sørg for at den URL, du angiver til din iFrame er korrekt. Prøv at få adgang til URL’en direkte, via din browser, i stedet for via din Facebook-side. Det er typisk en tastefejl i din URL-adresse, som giver problemer.

Fejlmeddelelser fejl 405 – HTTP verbum eller lignende

Hvis din server returnerer denne fejl, når Facebook forsøger at indlæse din iFrame, skal du muligvis ændre filtypenavnet fra .HTML til .PHP eller .ASPX (afhængig af den server-platform, du bruger). Jeg vil blot lige nævne dette, da det gav min kollega og jeg et problem, da vi forsøgte at uploade iFrame til Dynamicweb.

Fjern scrollbar i din iFrame

Hvis din iFrame får en vandret scrollbar og overstiger de 520 pixels (hvilket er det maksimale, Facebook tillader i bredden) så kan du evt. tilføje noget CSS (enten inline som vist nedenfor eller i din separate CSS-fil). Så bør du kunne fjerne margin og padding.

<style type=”text/css”>

body {

bredde: 520px;

margin: 0; padding: 0; border: 0;

}

</style>

Har du testet iFrames af på Facebook? Hvis du brugte denne tutorial, hvordan fungerede den så for dig?

2 kommentarer

  1. Hej Marianne,

    Jeg synes det er supergodt at du har lavet denne tutorial.
    Jeg har forsøgt at følge den for at få lavet en velkomstside.

    Mit problem er at siderne inde hos mig ser anderledes ud og hedder noget andet end inde hos dig. Jeg ved ikke om der er ændret en masse på facebook inden for de sidste par måneder siden du lavede din guide, men det betyder, at det er temmelig svært at finde ud af, hvad man egentlig skal udfylde, og hvor og hvordan tingene skal stå – især når man er nybegynder som mig.

    vh. Pernille

    Post a Reply

Send kommentar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

Pin It on Pinterest