iframes in Facebook Tabs für Profile und Pages
6. September 2010
Kommentiert: 21 | Gelesen: 10259
Kategorien : Facebook, FBML / FBJS, Tutorial
Die Ausgangssituation
Wir haben eine Applikation gebaut für Facebook und diese hat auch einen Tab View, den wir gerne in unserem Profil oder auf einer unserer Facebook Seiten installieren möchten.
Und wir haben unsere Applikation als iframe gebaut (so wie es aktuell auch empfohlen wird, da iframe Apps schneller sind als FBML Apps).
Den Tab zu erstellen ist eine relative einfache Sache aber mit Erschrecken stellen wir fest, dass in unserem Tab nicht viel passiert, weil iframes in Tabs aus Sicherheitsgründen nicht erlaubt sind.
Aber es gibt eine Möglichkeit das zu umgehen – wie hatte ich in einem anderen Post schon mal beschrieben, da kamen aber des öfteren Rückfragen, daher hier mal der Weg.
“Schritt für Schritt”
Schritt 1 – Die App
Wir bauen unsere App, die eigentliche Anwendungslogik liegt dabei in einem iframe, so wie das z.B. der Fall ist, wenn Google Maps eingebunden werden soll. D.h. in der Datei (in meinem Fall PHP) wird der iframe eingebunden. Die Datei am besten index.php nennen, sonst wird das nervig, da facebook dann bei der App Erstellung zickt.
Wir erstellen uns eine facebook App und stellen da auf dem Reiter Facebook Integration folgendes ein:
- Canvasseite -> Name unsere Canvas
- Canvas URL -> Pfad zu unserer Ordner auf dem Server wo die Datei liegt (also die index.php in der unser iframe eingebunden wird)
- Name des Reiters für das Profil
- Dateiname der Datei mit dem Tabview
Hier als Grafik:
Wichtig! Bei 4. steht nicht der Pfad, nur der Dateiname (z.b. tab.php) in dem Feld! Die Datei liegt im gleichen Ordner wie die Canvas URL.
Falls ihr oben bei der Canvas URL nicht auf einen Ordner sondern eine Datei zeigt, dann wird das nicht so einfach klappen, da die Canavas URL und der Dateiname zusammengefügt werden und das gibt dann sowas wie “xyz.de/facebook-app/indexp.phptab.php” .
Kann man sicherlich über ne Dynamik erschlagen per Variable, hab ich aber noch nie gemacht.
Als “normale” App läuft das ganze hier:
http://apps.facebook.com/iframe_canvas_test/
Als normale App reicht uns das aber nicht, wir möchten gerne auch die Installation für User und Fanpages auf einem Reiter (Tab) erlauben.
Schritt 2 – Der Tab
Eigentlich auch eine einfache Sache, in den Settings der App definieren wir den Tab View und die dazugehörige Contentquelle
Wenn wir den Tab jetzt auf unserem Profil oder auf einer unserer Pages installieren (dazu muss übrigens der Haken in den Settings gesetzt werden, der Installation für Seiten erlaubt siehe oben), dann passiert leider nix – wir bekommen lediglich eine Fehlermeldung, dass iframes nicht erlaubt sind an dieser Stelle.
Grund: Facebook blockt den iframe weil keine 3rd Party Inhalte ohne Userinteraktion gestartet werden sollen.
Aber wir können tricksen und den iframe content nicht von vornherein laden sondern ihn an ein onclick event binden.
Schritt 3 – Abhilfe durch ein onclick event
Um das zu erreichen, bauen wir eine Variante unserer App und nennen diese z.B. app_tab.php.
Die Datei besteht aus recht wenigen Elementen:
- einem DIV als Container für den Iframe
- einem Element (in meinem Fall einem Button), dem ein Onclick Event zugeordnet wird
- etwas FBML / FBJS welches die Quelle und die Abmessungen des iframes definiert
- etwas Javascript , dass die onclick function des Buttons definiert
Und unser fertiger Tab ist als Reiter auf der Get-A-Gadget Fanseite zu finden, den Quellcode Ausschnitt für den Tab könnt ihr als Txt runterladen
Was passiert hier genau?
Der iframe ist zunächst nicht eingebunden, lediglich der leere DIV Container, etwas Text und der Button.
Sobald der User den Button klickt, wird per Javacript das InnerHTML des Containers geändert (genauer per FBJS daher das “setInnerHTML”) und eingefügt wird der iframe dann per FBML Tag <fb:iframe>
Ich hoffe, das wird so deutlich 
21 Kommentare zu: “iframes in Facebook Tabs für Profile und Pages”
Umfrage
Loading ...
Unser Newsletter
Kategorien
Tag Cloud
Android
Arduino
Cacoo
Email Alerts Google Wave
enterprise
Facebook
facebook tabs
Facebook UI
ferengi
firefox
Formulare
fußball
fußballsprüche
fußballzitate
Goodschool
Google
Google Instant
Google Wave
Horrorskop
IE
iframes in facebook
innerHTML
ipad
Kennzahlen
Notifier Google Wave
Online Tools
Palo Altona
Projektmanagement
science fiction
sci fi
Selectbox
Social Media
sport
star trek
Tabelle
table
Tinkern
tng
Tools
Twitter
Wave
Webservices
Wireframes
Wordpress
zitate Allgemein (5)
Android OS (2)
Authentifizierung (1)
Communities (2)
CSR (1)
DRM (1)
Entertainment (4)
Events (1)
Facebook (6)
Facebook UserInterface (2)
FBML / FBJS (2)
Gadgetentwicklung (3)
Google (3)
Google Streetview (1)
Google Wave (5)
Hardware (3)
HTML 5 (1)
Information (2)
Javascript (2)
Location Based Services (1)
Mobile (1)
Online Tools (5)
Onlinemarketing (2)
Onlinemarketing Kennzahlen (1)
PHP (1)
SEM (2)
Shopping (1)
Social Media Marketing (1)
Technik (5)
Tools (2)
Tutorial (2)
Twitter (1)
Twitter API (1)
Vermarktung (1)
Website Vermarktung (1)
Wordpress (2)
WP Cumulus Flash tag cloud by Roy Tanck and Luke Morton requires Flash Player 9 or better.
Auf Facebook
[...] iframes in…Kategorie: FBML / FBJS [...]
Ich danke dir sehr herzlich dafür, dass du dir nochmal die Mühe gemacht hast, einen so ausführlichen Ergänzungsartikel zu diesem Thema zu verfassen. Er war mir sehr hilfreich beim Einbetten meiner Flash-Facebook-Applikation in eine Fanpage.
Viele Grüße & weiter so!
ich schaff es einfache nicht mit den reiter zu verbinden könnte ich bitte einen kl support haben ?
Hallo Hans,
kannst du dein problem ein wenig genauer beschreiben?
Was meinst du mit verbinden? In den Einstellungen der App die URL hinterlegen?
Dann ist der Pfad wichtig zu der Datei der Anwendung, die muss im selben Order liegen wie die Anwendung und die Datei mit der Anwendung sollte auch ne index.html sein, sonst wird das mit dem Pfad problematisch.
(dann sagt er er könnte die URL nicht speichern)
Hier auf dem Screen zu sehen – in dem Ordner http://www.get-a-gadget.de/facebook_iframe/ liegt eine index.php, die ist für den Canvas View.
im gleichen Ornder liegt die facebook_iframe_tab.php, das ist die Datei für den Reiter.
http://www.get-a-gadget.de/wordpress/wp-content/uploads/2010/09/screen_facebook_app.jpg
“Ich hoffe, das wird so deutlich”.
Nein, tut mir leid.
Das “Demo-App” im Text scheint nicht zu funktionieren, und auch sonst ist die Anwendung des ganzen nicht gerade ersichtlich…
“Um das zu erreichen, bauen wir eine Variante unserer App” Bitte? Das ganze nochmal? Oder werden die Veränderungen im besagten ersten App durchgeführt?
“Die Datei besteht aus recht wenigen Elementen”
Wo diese hinkommen, erfährt der Leser nicht. Ins erste App? Ins zweite? In “static FBML” oder gar auf einen externen Server?
(darüber hinaus ist zwar offensichtlich, dass die “Raute-Zeilen” nicht in den Code gehören, aber zur Lesbarkeit tragen sie nicht gerade bei).
“wir bekommen lediglich eine Fehlermeldung, dass iframes nicht erlaubt sind an dieser Stelle”.
Hmm, nein, bekommen wir nicht.
Stattdessen erscheint
FBML Error (line 5): illegal tag “body” under “fb:tab-position” auf dem Bildschirm.
Ich will ja nicht übermäßig kritisch erscheinen, aber ein paar mehr Details wären ganz nett. Nicht jeder spricht fließend HTML
Hallo texxi,
zu deinen Fragen :
1. Wir bauen eine Variante und nennen diese “xyz.php” => es gibt 2 Varianten, eine für den Canvas View als normale App und eine speziell für die Installation auf einem Profilreiter
2. Ich nutze hier kein StaticFBML sondern ich arbeite mit externen Dateien, auf die in den App Settings verwiesen wird; die app_tab.php wurde dabei als eine Variante erstellt, da der User erst eine Interaktion (hier onklick auf den Button) ausführen muss, bevor Fremdinhalte geladen werden dürfen (=> siehe Screenshot untere Hälfte “Profil Reiter”, dort wird auf die “xyz.php” verwiesen, welch im selben Ordner liegen muss wie die index.php, für den Canvas View)
3. zur Fehlermeldung “Illegal Tag Body [...]“, das liegt vermutlich daran, dass deine Datei einen
-Tag enthält, bei stackoverflow.com wurde das z.B. auch beschrieben, den ganzen Teil “ braucht deine Anwendung nicht, das übernimmt Facebook. (vgl. Quellcode der Datei für den Proflreiter)Von der Formulierung her sollte es vielleicht deutlicher werden, dass die eigentlich Anwendung im iFrame liegt, die App und die Variante der App für den Profilreiter sind zwei unterschiedliche Arten sie einzubinden. Für den Canvas direkt als Iframe beim Reiter über den Umweg mit dem Onclick Event, dass den iframe dann einbaut.
Hoffe das ist hilft.
Gruß
Sven
Okay, danke nochmal für die Erläuterungen.
Hallo Sven ;o)
nun stehe ich sozusagen vor meiner ersten Einbindung einer Test-App
…also ein bisschen verwirrt bin ich ja schon.
Vielleicht hat da FB etwas verändert?
Ich vermisse in den FB Einstellung den Checkboxenabschnitt von “Installable to?”.
1.) In den Einstellungen (zu 4) wurde von mir die app_tab.php
angegeben. Ist das richtig so?
2.) Ich habe das iFrame erstellt und es (wie Du auch)
“facebook_iframe_test.html” benannt.
3.) Es wurde eine index.php erstellt und darin via echo das iFrame
eingebettet.
# <?php
# echo '’;
#?>
4.) Eine tab.php habe ich nicht erstellt, dafür aber die (erweiterte?) app_tab.php .
Dort wurde dann die src an die meinige angepasst:
…und ich hoffe ich hab das richtig verstanden, dass ich dort dann auch die “facebook_iframe_test.html” angegeben habe?
Na jedenfalls stehe ich vor dem Phänomen, dass wenn ich die URL der app aufrufe, dann direkt das iFrame angezeigt wird – und nicht wie erwartet der Button.
Habe ich da irgendwas übersehen?
Wäre schön, wenn Du mir da helfen könntest.
grüßi Nestoslider^^
heyhey,
also zu deiner ersten Frage, ja, da scheint sich was geändert zu haben; der “installable to” ist bei mir auch weg
und zu den weiteren Fragen (bevor ich mich da im Detail reinschraube) eine schnelle Rückfrage zu deiner Anmerkung:
“Na jedenfalls stehe ich vor dem Phänomen, dass wenn ich die URL der app aufrufe, dann direkt das iFrame angezeigt wird – und nicht wie erwartet der Button.”
Den Button brauchst du ja nur auf dem Profil tab wie hier auf Facebook zu sehen:
http://goo.gl/h5Ns
Wenn du den Canvas View einer App aufrufst, dann ist der iframe gleich geladen, den Button brauchste nur, um als Workaround um iframe Apps in einem Profil Tab zu kriegen.
Gruß
Sven
Danke erstmal Deiner schnellen Antwort! Fiel mir gerade erst auf, sorry^^
Hmn, dann bin ich ja beruhigt, dass das in Deinen Einstellungen ebenfalls verschwunden ist und dennoch weiterhin funktioniert.
.oO da werde ich wohl etwas missverstanden haben.
Ja, genau d a s habe ich vor – die “Test-App” als Tab einzubinden.
Doch an diesem Schritt hapert es leider noch.
Sehe ich doch richtig so, dass im Profil dann auf “+” geklickt werden muss und ich mir dann die neu erstellte App raussuchen muss, um sie dann hinzufügen zu können oder? Nur um sie hinzufügen zu können, muss sie doch erst mal veröffentlich werden(?). Und genau bei diesem Schritt hapert es ->
Zitat: “Wenn du mit deiner Anwendung fertig bist, kannst du sie ans Anwendungs-Verzeichnis absenden.”, do_click();
und folgend dann : “All of the following fields are required. Your application must have at least 5 total users or 10 monthly active users before you can submit it to the Anwendungsverzeichnis. We cannot showcase any applications that are under construction or do not utilize the Facebook-Plattform.”
Wenn mich meine Englischkenntnisse noch nicht ganz verlassen haben, so benötige ich zur Veröffentlichung noch die Erffüllung dort angegebener Kriterien.
Aber wie ist das zu verstehen? Muss ich facebook jetzt via Proxy, 10 aktive User “vorgaukeln”?
Oder gibt es da eine andere Möglichkeit?
Wie gesagt, bin ich noch recht neu in Sachen Facebook, bin aber dankbar um jedliche Hilfe in diesem Bereich.
Klartext: Wie realisiere ich so einen Tab für die App denn überhaupt?
Schöne Grüße
Mathias^^
Moin Matthias,
stimmt, der Teil ist etwas tricky, ich werde den Artikel dazu noch erweitern.
Kurzfassung:
Die App muss aus dem Sandkasten Modus raus aber nicht unbedingt im Verzeichnis drin sein.
Das Verzeichnis ist halt nett um von User gefunden zu werden aber kein Muss für die Tab Installation.
Für Pages:
Gehe einfach auf die Profilseite deiner App z.B. http://goo.gl/FdPT für meinen FB Test
Links oben unter dem Bild als 3. “zu meiner Seite hinzufügen” => dort die Seite auswählen, dann sollte es auf der Page wenn du auf das “+” für weitere Tabs klickst zur Installation bereitstehen.
Für Profile wird das wohl bald auch abgeschafft werden => da steht so ein Hinweis Text wenn du auf meinem Profil den FourSquare Badgets Reiter siehst.
http://goo.gl/vn7X
Vielleicht geht es schon nicht mehr neue hinzuzufügen? Muss ich mir mal im Detail angucken.
Zusatzinfo: den frisch gelöschten Reiter 4Square Badges konnte ich auch nicht wieder anfügen … schade eigentlich
Oh ja, dann hab ich mich ja nicht all zu dumm angestellt, wenn man nach dem geht was Du mir da wohlwollend nachsichtig schreibst ;o)
Ja das mit den Tab-Reitern habe ich auch bereits gelesen, ..allerdings soll da wohl eine Möglichkeit über die Hauptseite zur Verfügung gestellt werden, wenn mich nicht alles täuscht.
*seufz* aber auch ich werde mich mit dieser Thematik wohl noch eine ganze Weile auseinander setzen müssen. Seit 2007 hatte ich meine “Forschungen” diesbezüglich vernachlässigt und erst wieder Mitte 2009 aufgenommen. In dieser Zeit hat sich im WEB einiges getan, wie ich zu meinem gefassten Erstaunen festestellen musste.
Nicht nur WEB2.0 -> AJAX, usw, sondern auch Dinge wie APPs und Gadgets wurden populärer.
Damit muss ich mich erst mal besser vertraut machen – neben dem Auffrischen von etlichen anderen Scriptsprachen.
Ich danke Dir jedenfalls herzlichst für Deine Mühe und Geduld – und gewiss laufen wir uns noch mal über den Weg im Netz.
…schönen Abend noch ;o)
Hallo Sven,
ich habe dein Skript mal ausprobiert, doch leider funktioniert es bei mir nicht. Ich bekomme einen JS Fehler “a7146470109_link_1 is not defined” – das scheint ein bekannstes Facebook Problem zu sein. Hast du davon schon mal was gehört? Auch eine Idee das zu umgehen?
Beste Grüße,
Daniel
Eine sehr gute Beschreibung! Danke. Nicht so einfach durch Facebook sonst durchzusteigen. Naja so ein tolles System ist es halt auch.
Hi Sven,
Super Beschreibung, Danke!
Ich hatte die Anwendungs-Profilseite übersehen und dadurch den Link “Zu meiner Seite hinzufügen” nicht gefunden.
Jetzt läufts!
Nur finde ich die Anwendung nicht im Anwendungsverzeichnis, obwohl ich diese Meldung habe.
“Directory Status: Bestätigt”
“Your app is currently listed in the Anwendungsverzeichnis.”
Kennst du das Problem?
Grüße
Matthias
Hey Matthias, ist die Anwendung für Page installierbar? Kann man auf einem von den Einstellungsreitern anpassen. Könnte daran liegen
Gruß
Sven
Hi
ich hab auch mal eine App mit deiner Anleitung erstellt (Danke übrigens dafür!).
Nur hab ich das Problem mit den “10 monthly active users”..
Schon mehrere Freunde haben die App aufgerufen, nur sind alle Zähler immernoch bei 0.
Was kann ich denn da tun?
Viele Grüße
Daniel
Für die neue Seite gibt es hier eine schöne Lösung: http://www.facebook.com/apps/application.php?id=197936773558886
Viele Grüße,
Hendrik
Moin Daniel,
ich glaube, dass mit den 10 Fans brauchste garnicht mehr mit der neuen Version der Pages.
Geht einfach auf die Profil Seite der App und drücke dort auf “zu meiner Seite hinzufügen” dann kriegst du die Auswahl im PopUp mit deinen Seiten und wenn du eine Tab URL angegeben hast, dann kannst du in den Settings der Page unter “Anwendugen” den Reiter hinzufügen, der dann unter dem Profilbild in der Liste mit “Pinnwand”, “Fotos” etc. auftaucht.
moin hendrik, sieht interessant aus, wobei selber bauen mit den neuen pages scheinbar auch keine rocket science mehr ist