DeinWeb Ein Web fr alle!

Wie man in Facebook einen

iframe-Tab fr die eigene Fanseite
erstellt
Eine Einfhrung
1
1. Grundlegendes
Worum geht es?
Auf Fanseiten-Betreiber kommen in Facebook derzeit groe nderungen zu. Eine nderung betrifft
die Abschaffung der Anwendung Static FBML, mit der es bisher mgich war, indi!iduee "eiter
zu einer Fanseite hinzuzuf#gen. Aerdings waren diese "eiter nur sehr eingeschr$nkt gestatbar.
%er Einsatz !on &a!a'cri(t war nur bedingt mgich, andere )echniken wie ser!erseitige
'cri(ts(rachen oder Fash konnten gar nicht zum Einsatz kommen.
%as wird nun anders. &etzt knnen Fanseiten-Betreiber indi!iduee *nterseiten zu ihren Fanseiten
hinzuzuf#gen, die bez#gich der anwendbaren )echnoogien in keinster +eise eingeschr$nkt sind.
Wie macht Facebook das?
+$hrend bei 'tatic FB,- der .),--/ode direkt in die Anwendung geschrieben und auf
Facebooks 'er!ern ges(eichert wurde, bedient sich Facebook bei der neuen )echnoogie
sogenannter iframes, die den direkt /ode !on einem anderen 'er!er aden. %adurch kann nun 0ede
)echnoogie eingesetzt werden, die auf dem 'er!er, auf dem der /ode iegt, zur 1erf#gung steht.
Was mu ich dafr haben und wissen?
*m einen sochen iframe-)ab ersteen zu knnen, brauchen 'ie
2enntnisse in den +ebtechnoogien, die 'ie einsetzen woen, mindestens 2enntnisse in
.),- und /''.
Einen Account bei einem +ebhoster, auf dem 'ie 3hre Anwendung s(eichern knnen.
Einen Facebook-Account.
%ie Entwicker-Anwendung auf Facebook.
Was will diese Einfhrung?
3n dieser Einf#hrung befassen wir uns mit der Entwicker-Anwendung !on Facebook. 3ch zeige
3hnen, was 'ie machen m#ssen, um eine Anwendung zu ersteen, die 'ie as iframe-)ab einsetzen
knnen.
4
Was kann diese Einfhrung nicht leisten?
%iese Einf#hrung ist keine Einf#hrung in die bentigten +ebtechnoogien, die 'ie brauchen, um
einen iframe-)ab zu ersteen.
2. Vorgehensweise
a. Hinuufgen der Entwickler!"nwendung u #hrem $rofil
5un$chst m#ssen 'ie die Entwicker-Anwendung zu 3hrem 6rofi hinzuf#gen. %ie Anwendung
finden 'ie auf htt(788www.facebook.com8de!eo(ers8. .aben 'ie die Entwicker-Anwendung zu
3hrem 6rofi hinzugef#gt, sehen 'ie oben "echts einen Button Erstelle neue Anwendung.
*m die Entwicker-Anwendung !erwenden zu knnen, m#ssen 'ie sich dann mit 3hrer
.and9nummer oder 3hrer 2reditkarte authentifizieren. %ieser 1organg ist 3hnen sicher durch die
1erifizierung 3hres 2ontos bekannt.
:
b. %enennen #hrer "nwendung
+enn das eredigt ist, werden 'ie nach dem ;amen der Anwendung gefragt und m#ssen den
agemeinen <esch$ftsbedingungen !on Facebook zustimmen.
Achtung7 %er ;ame, den 'ie hier angeben, ist nicht der ;ame, der s($ter auf 3hrer Fan(age
erscheint=
;achdem 'ie auf Anwendung erstellen gekickt haben, werden 'ie noch gebeten, ein /a(tcha zu
sen.
>
c. &'ber uns(
3m n$chsten Fenster werden 'ie dann gebeten, eine Beschreibung 3hrer Anwendung einzugeben und
die '(rache 3hrer Anwendung zu setzen. .ier soten 'ie %eutsch w$hen. %ie Beschreibung
knnen 'ie auch wegassen, ebenso wie den *"- der %atenschutzbestimmungen und der
agemeinen <esch$ftsbedingungen sowie die 2ontakt- und 2undendienst-,aiadresse. %iese
Angaben sind nur wichtig, wenn 'ie 3hre Anwendung aen zur Benutzung auf ihren eigenen 'eiten
zur 1erf#gung steen woen, was bei einem iframe-)ab f#r 3hre 'eite meist nicht der Fa sein
d#rfte. %ar#ber hinaus knnen 'ie ein 3con und ein -ogo hochaden. %as ist sinn!o, wei sonst ein
'tandardogo angezeigt wird, was nicht schn aussieht. %aneben knnen 'ie auch )est-*ser oder
weitere Administratoren der Anwendung hinzuf#gen. 2icken 'ie dann auf nderungen
speichern.
?
d. &Website(
3m n$chsten Abschnitt @+ebsiteA tragen 'ie bei Site URL den genauen *"- zu 3hrer Anwendung
ein. %er *"- mu immer ein 1erzeichnis auf 3hrem +ebser!er bezeichnen. +enn 3hre Anwendung
beis(ieweise auf der %omain htt(788www.eBam(e.com im 1erzeichnis @eBam(eA iegt, geben 'ie
dort htt(788www.eBam(e.com8eBam(e8 ein. %as @8A am Ende ist wichtig. Aes andere assen 'ie
frei. Auch die +erte Anwendungs-3% und Anwendungs-<eheimcode m#ssen 'ie zun$chst nicht
interessieren. %ie sind wichtig, wenn 'ie fortgeschrittenere Anwendungen ersteen woen.
C
e. &Facebook!Einbindung(
;un kommen wir auch schon zum etzten notwendigen 'chritt. 3m ,en#(unkt @Facebook-
EinbindungA gibt es einiges auszuf#en7
Beim 6unkt CanvasSeite !ergeben 'ie einen ;amen f#r 3hre Awendung, unter dem diese
dann auf Facebook erreichbar ist.
Bei CanvasURL geben 'ie den geichen *"- ein wie im 'chritt d. *nter Site URL
oben. Beachten 'ie auch hier, da der *"- mit einem @8A enden und auf ein 1erzeichnis
zeigen mu=
Fas 3hr )ab auch unter htt(s erreichbar ist, knnen 'ie bei Sichere CanvasURL den
geichen *"- wie bei der /an!as-*"- mit htt(s !ergeben.
Bei Canvas !"pe w$hen 'ie #Fra$e aus.
3m Abschnitt @'eiten-)absA tragen 'ie bei @;ame des "eitersA den ;amen ein, der auf 3hrer
Fanseite zu sehen sein so.
Bei %age !a& !"pe w$hen 'ie unbedingt #Fra$e=
Bei URL des Reiters tragen 'ie den %ateinamen ein, den 3hre )ab auf 3hrem 'er!er hat,
aso z. B. indeB.htm oder indeB.(h(.
Ae anderen Einsteungen assen 'ie so, wie sie sind.
D
%as warEs schon. +enn 'ie 0etzt ges(eichert haben, w$hen 'ie auf der fogenden 'eite den 6unkt
Anwendungs%r'(ilseite.

F
%ort finden 'ie dann inks einen ,en#(unkt )u $einer Seite hin*u(+gen ,Add t' $" page-.
+enn 'ie diesen 6unkt ausgew$ht haben, knnen 'ie die Fanseite ausw$hen, zu der 'ie die
Anwendung hinzuf#gen woen.
Herzlichen Glckwunsch! Damit haben ie !hren iframe-Tab !hrer eite hinzugefgt!
G
3. Worauf mssen Sie beim Erstellen Ihres iframe-Tabs ahten!
Auch wenn 'ie bei der Ersteung des )abs sehr frei sind, m#ssen 'ie doch ein (aar %inge beachten7
+ie auch bei FB,--"eitern ist die maBimae Breite eines iframe-)abs auf ?4H(B begrenzt.
3st 3hr 3nhat breiter, wird ein horizontaer 'crobaken eingef#gt, der sehr unschn aussieht.
%ie .he der )abs ist ebenfas begrenzt. Ab einer bestimmten .he wird ein !ertikaer
'crobaken eingef#gt. %as kann man zwar mit &a!a'cri(t !erhindern, indem man die .he
feBibe gestatet, aber es ist trotzdem ratsam, die 3nhate !ieeicht auf mehrere keinere
*nterseiten aufzuteien.
-inks auf andere +ebsites werden innerhab des iframes geffnet. %as kann bei mehr as
?4H(B breiten +ebsites zu sehr h$ichen Effekten f#hren. +enn 'ie woen, da beim
Ankicken eines -inks ein neues Fenster oder ein neuer Browser-)ab geffnet wird, m#ssen
'ie dem -ink das Attribut targetIAJbankA mitgeben.
+enn 'ie 3hren )ab erst ma testen woen, ohne da er f#r andere sichtbar ist, knnen 'ie in
der Entwicker-Anwendung im 6unkt @Einsteungen BearbeitenA den ,en#(unkt
@FortgeschrittenA ausw$hen und dort bei @'andkastenmodusA @berechtigtA w$hen.
1H
". #robleme
Welche $robleme stellen sich dereit noch?
-eider gibt es derzeit K'tand 14. H:. 4H11L noch gewisse 6robeme mit iframe-)abs7
iframe-)abs funktionieren mitterweie auch mit htt(s. Aerdings $t sich eine einma
eingetragene sichere /an!as-*"- derzeit nicht mehr $ndern. %as scheint ganz kar ein Bug
zu sein.
%a das 6robem aber beherrschbar ist, kann man meiner ,einung nach die iframe-)abs inzwischen
durchaus (rodukti! einsetzen.
$. %atenshut&
3m <egensatz zu den aten FB,--"eitern, die direkt auf den 'er!ern !on Facebook agen, binden
'ie mit iframe-)abs 3nhate !on einem anderen 'er!er ein. %as beinhatet auch, da eine
%irekt!erbindung zwischen dem Besucher und dem 'er!er, auf dem der iframe iegt, hergestet
wird. 'omit kommt es auch zu einer %aten#bertragung !om Besucher zu diesem 'er!er. &e nach
dem, weche %aten auf dem 'er!er, der den iframe ausiefert, ges(eichert werden, m#ssen 'ie in
3hrem iframe-)ab eine Datenschutzerkl"rung bereithaten, die dar#ber aufk$rt, wer diese %aten
s(eichert und wozu die %aten !erwendet werden. 3n der "ege ist diese %atenschutzerk$rung
notwendig, da die meisten +ebser!er 36-Adressen s(eichern, die mitterweie ebenfas as
(ersonenbezogene %aten angesehen werden knnen.
ie h"tten gern einen neuen iframe-Tab fr !hre Fanseite# haben aber selbst nicht die
$essourcen# ihn zu erstellen% &ehmen ie mit mir unter info'deinweb(org )ontakt auf( !ch
untersttze ie bei der Entwicklung eines iframes-Tabs!
!n der *wischenzeit wnsche ich +iel ,a- beim .us,robieren!
11