Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Mit der Einführung der neuen Fanpages hat Facebook auch die schon lange angekündigten iFrame Tabs veröffentlicht. Mit Einführung dieser Tabs werden die bisher gebräuchlichen FBML-Tabs überflüssig und in Kürze nichtmehr unterstützt. Insbesondere wenn Ihr neue Seiten hinzufügen wollt müsst Ihr zukünftig iFrame-Tabs verwenden.
Ich möchte Euch kurz erklären was Ihr benötigt um die iFrame-Tabs nutzen zu können, wie Ihr einen neuen Tab erstellt, und wo die Vor- und Nachteile der neuen Tabs liegen.

Voraussetzungen für iFrame-Tabs

Bisher war es so, dass Ihr für die Benutzung von FBML-Tabs lediglich eine bereits existierende Anwendung zu Eurer Facebook-Seite hinzufügen musstet. Anschließend ermöglichte es Euch diese Anwendung Quellcode in die Facebook-Seite zu schreiben und somit individuelle Inhalte darzustellen.
Bei iFrame-Tabs ist das Ganze etwas anders: Ihr müsst zunächst für jede zusätzliche Unterseite (also jeden Tab) eine neue, eigene Facebook-Anwendung erstellen. Diese Anwendung zieht sich dann Quellcode von externem Webspace und stellt diesen mittels iFrame dar. Im letzten Schritt müsst Ihr die Anwendung Eurer Fan-Page hinzufügen.
Die Vorraussetzungen für die Einrichtung eigener Fanpage-Tabs sind damit etwas höher geworden: Um eine Anwendung erstellen zu können müsst Ihr Euch zunächst als Developer verifizieren. Dafür könnt Ihr Eure Kreditkarte oder Euer Handy benutzen.

Darüber hinaus benötigt Ihr ab sofort natürlich auch eigenen Webspace auf den Ihr den Code Eurer Fan-Page-Unterseite hochladen könnt.

Wenn all diese Vorraussetzungen erfüllt sind ist das Erstellen eines iFrame-Tabs keine große Sache mehr. Wir wollen uns das mal im Detail Schritt für Schritt anschauen.

Neue Anwendungen erstellen

Öffnet zunächst den Entwickler-Bereich von Facebook (facebook.com/developers) und klickt oben rechts auf „Erstelle eine neue Anwendung“.

Im nachfolgenden Screen vergebt Ihr einen beliebigen Namen (kann nachträglich geändert werden), bestätigt die AGB und klickt auf „Anwendung erstellen“.

Nach einer eventuellen Sicherheitsabfrage werdet Ihr zu den Anwendungs-Einstellungen weitergeleitet. In den Anwendungs-Optionen habt Ihr nun umfangreiche Möglichkeiten Angaben zu Eurer neuen Anwendung zu machen und Einstellungen festzulegen. Ich beschränke mich jetzt nur auf die Optionen die nötig sind um einen iFrame Tab zu erstellen.


Einstellungen „Website“

In den Website-Einstellungen müsst Ihr die Adresse zu Eurem eigenen Webspace eintragen. Hierbei muss ein Ordner angegeben werden (mit / am Ende!), keine einzelne Datei.


Einstellungen „Facebook-Einbindung“

In den Settings zu den „Facebook-Einbindungen“ müsst Ihr ebenfalls einige Angaben machen. Im Abschnitt „Canvas“ gebt Ihr sowohl die Canvasseite, als auch die Canvas-URL an.
Bei der Canvasseite könnt Ihr einen beliebigen Namen vergeben. Unter dieser Adresse ist die Facebook-Anwendung dann verfügbar.
Die Canvas-URL muss Euer Webspace sein. Hier tragt Ihr demnach den identischen Pfad ein wie zuvor in den Website-Einstellungen.

Im Abschnitt „Page Tabs“ müssen ebenfalls Angaben gemacht werden. Tragt hier zunächst die Bezeichnung des Tabs ein. Dieser Name wird später in der Navigation angezeigt. Achtet darauf, dass als Typ „iFrame“ ausgewählt ist und vergebt zuletzt die „URL des Reiters“. Hierbei muss jetzt die Datei (üblicherweise index.html oder index.php) angegeben werden die auf Eurem Webspace liegt und den Code des späteren Tabs beinhaltet.

Ihr könnt jetzt alle Optionen speichern und werdet zum Bildschirm „Meine Anwendungen“ weitergeleitet.

Externe Daten hochladen und bereitstellen

Ihr habt jetzt eine eigene Anwendung erstellt und Euren externen Webspace hinterlegt. Falls noch nicht geschehen müsst Ihr jetzt natürlich den externen Inhalt bereitstellen. Hierfür habt Ihr alle Möglichkeiten die beim coden einer normalen Website auch zur Verfügung stehen. Also Multimedia, jQuery, PHP, Tracking-Tools etc. Viele der neuen Möglichkeiten waren mit den bisherigen FBML-Tabs nicht realisierbar.
Erstellt eine neue HTML/PHP-Datei, fügt Inhalt ein und ladet diese Datei unter dem zuvor angegebenen Dateinamen in das zuvor angegebene Verzeichnis hoch.
Achtung! Aktuell sind die iFrame-Tabs auf eine Höhe von 800 Pixeln begrenzt.

Anwendung der eigenen Seite hinzufügen

Wenn Ihr Euch im Dialog „Meine Anwendungen“ (facebook.com/developers/apps.php) befindet, so klickt nun auf „Anwendungs-Profilseite“.

Ihr gelangt auf eine weitere Seite über die Ihr Eure neue Anwendung bewerben könntet. Hier stehen ähnliche Möglichkeiten zur Verfügung wie dies auch bei privaten Profilen und FanPages der Fall ist. Klickt auf „Zur Anwendung“ um Euren iFrame-Tab-Inhalt zu testen.
Über den Link „Zu meiner Seite hinzufügen“ fügt Ihr diesen Tab nun Eurer Fan-Page zu.

Anschließend erscheint der Tab unter dem zuvor angegebenen Namen in der linken Navigationsleiste. In den Einstellungen zu Eurer Seite könnt Ihr zudem festlegen, dass Besucher als Startseite einen iFrame-Tab sehen. Auch das Icon des neuen Tabs lässt sich über die Anwendungs-Einstellungen individualisieren.

Das war’s auch schon. Diese Prozedur müsst Ihr nun ab sofort für jede zusätzliche Unterseite der Fan-Page durchführen. Ihr habt Ergänzungen oder Anmerkungen zu diesem Artikel? Dann schreibt einfach einen Kommentar.
Was haltet Ihr von den neuen iFrame Tabs? Überwiegen die Vorteile und die Freiheiten beim Coding oder findet Ihr die neuen Tabs zu kompliziert, lästig oder gar überflüssig?

Update: Sichere Verbindungen sind nun Pflicht

Facebook erlaubt seit Oktober 2011 nur noch sichere Tabs. Was das zu bedeuten hat und wie ihr einen Tab mit einem Sicherheitszertifikat ausstattet erfahrt ihr hier: So geht’s: Sicheres durchstöbern (https) für Facebook-Fanpages gewährleisten

Update 2: Facebook veröffentlicht Anleitung für Fanpage-Tabs

Facebook hat nun eine eigene Anleitung zum Hinzufügen von Fanpage-Tabs veröffentlicht.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 65 Kommentare

  1. Steffen
    schrieb am 13.05.2013 um 16:31 Uhr:

    hallo Jonas,

    schön aufbereitete Seit mit interessanten Tips… ;-)

    Zum Thema iFrame tabs eine grundlegende Frage:
    Wenn man (nachdem man einen iFrame Tab konfiguriert hat)auf FB werben will und als „Zielseite“ eben diesen iFrame Tab angibt, der „Content“ von der Firmenwebsite enthält (alles richtig konfiguriert, mit https etc.) wird dieser von FB als „Anwendung“ betrachtet (was er ja auch ist) und man kann ihn auch nur als solche bewerben. Eine direkte URL gibt es zwar, diese wird aber nicht als „Zieladresse“ akzeptiert, der Anzeigentyp wird automatisch wieder auf „Anwendung bewerben“ umgestellt.

    Somit nötigt man seine potentiellen Kunden eine „Anwendung“ zu installieren (was natürlich erst mal als dubios empfunden wird) somit hat man viele „views“ (für die man teuer zahlt) aber wenig echte Klicks, weil eben nicht jeder FB Nutzer Lust hat, sich eine „Anwendung“ zu installieren…

    Irgendeine Idee, ob man die iFrame Tabs, welche reinen Webcontent spiegeln, direkt verlinken kann? (Das Ziel ist es, dass der Kunde FB nicht verlässt, ich kann ihn natürlich auf meine Firmenseite leiten, das will ich aber gerade vermeiden)

    Danke für eventuelle Tips..

    Antworten
  2. Robert Becker
    schrieb am 18.07.2012 um 11:01 Uhr:

    Hallo,

    Seit eine Woche versuche ich mir eine Facebook Fanpage mittels iFrame zu erstellen.
    Ich mache die ersten Schritte so wie Sie hier besrieben haben. Ich gebe dem Anwendung einen Namen, ich bestätige das AGB und klicke auf Anwendung erstellen. Leider lande ich auf einer ganz anderen Seite, nämlich für durchstöbern des sicheren https für Facebook Fanpages.
    Ich habe schon das in Sichekeitsoptionen https deaktiviert, aber das hat nichts gebracht.
    Ich habe gehört, dass man das irgendwie einstellen kann aber ich schaffe das einfach nicht.
    Ich komme einfach nicht weiter. Bitte helfen Sie mir, wie ich auf die Seite für Erstellung von Fanpage mit iFrame-Tabs komme.

    Viele Grüße Robert

    Antworten
  3. torben
    schrieb am 13.06.2012 um 09:05 Uhr:

    Hi Jonas

    Gilt das Tutorial noch unter der aktuellen Timeline von Facebook ?
    Oder gibt es hier was anderes zu beachten ?

    Jetzt ist die Breite nicht mehr auf 500px – 520px beschränkt oder ?
    Es geht jetzt bis zu 800 px breite ….

    Danke für eine Antwort

    Antworten
    • Jonas Hellwig
      schrieb am 13.06.2012 um 09:14 Uhr:

      @Torben: Im Grunde genommen funktioniert es immer noch genauso. Facebook sieht nur etwas anders aus als auf den Screenshots in meinem Beitrag. Bei der Breite des Tabs hat man in der „Installation“ nun die Wahl zwischen 520px und 810px.
      Facebook hat auch eine eigene kleine Anleitung veröffentlicht. Ich habe meinen Artikel entsprechend um diese Info erweitert. Du findest die Anleitung hier: https://developers.facebook.com/docs/appsonfacebook/pagetabs/

      Antworten
  4. Der Kieler
    schrieb am 26.03.2012 um 19:59 Uhr:

    Also bei mir hat’s eigentlich ganz gut geklappt – insofern schönen Dank für die Tips ..!

    Antworten
  5. nicci
    schrieb am 02.03.2012 um 22:13 Uhr:

    vielleicht könnt ihr mir helfen…

    ich habe seit gestern morgen das problem, das ich den Code zur bestätigung meines kontos nicht mehr auf meinem handy erhalte… erst war es nur wenn ich mich auf´m lappi anmelden wollte, jetzt ist es aber auch beim iphone so… das heißt das ich seit gestern komplett keinen zugang mehr auf mein fb-profil habe.
    ich habe bei meinem handyanbieter (O2) angerufen und nachgefragt, nach langer wartezeit wurde mir gesagt das es an fb läge-durch irgendwelche umstellungen… keine ahnung..

    und jetzt grad-während ich hier schreib kam eine sms mit einem bestädigungscode… ich gleich versucht mich bei fb anzumelden, aber da heißt es: “Du hast einen fehlerhaften Code eingegeben. Bitte versuche es erneut.” was soll das jetzt???

    ich hoffe ihr könnt mir helfen, da von fb auf bereits von mir 4 geschickten emails keine antwort kommt!!!!..

    lg und danke, nicci

    Antworten
  6. willi
    schrieb am 22.12.2011 um 13:29 Uhr:

    @Peter
    das Verfahren wie hier beschrieben ist korrekt. Nur wird aus der Developerumgebung der Tab nicht mehr auf der Seite bei Facebook eingebunden. Dies mußt du mit einer kleinen Applikation selber machen.

    Siehe hier:
    https://developers.facebook.com/blog/post/611/

    Antworten
  7. Peter
    schrieb am 21.12.2011 um 19:46 Uhr:

    Hallo Jonas,
    ich habe eben versucht nach der Anleitung ein iFrame-Tab zu erstellen. Allerdings sehen meine Eingabefelder bei Facebook.com/Developers ganz anders aus. Am Ende ist es mir gelungen einen Reiter auf der Page einzubinden. Allerdings wird weder die Website, noch eine Fehlermeldung dazu angezeigt. Vermutlich habe ich eine URL nicht nichtig angegeben. Gibt es zu deiner Eingabebeschreibung noch andere Screenshots?

    Antworten
  8. Willi
    schrieb am 10.12.2011 um 12:35 Uhr:

    Hallo,
    ich habe genau nach Anleitung gearbeitet. Alle relevanten Felder sind mit korrekten Werten gefüllt. Die generierte Canvas-Seite ist über den Link aufrufbar. Nur erscheint bei den Verwandten Links kein Button zum einbinden der Seite auf Facebook.Das umbenennen von index.html auf index.php bewirkt auch nichts. Woran kann es sonst noch liegen?

    Antworten
  9. Jens
    schrieb am 16.11.2011 um 12:59 Uhr:

    Hi Jonas,
    klasse Blog mit super Tipps. Felix hatte gefragt ob zwei verschiedene Startseiten bei fb möglich seien, je nachdem ob man Besucher ist oder bereits „Gefällt mir“ geklickt hat. Ich kann nur soviel sagen, das es geht – allerdings weiß ich nicht genau wie.

    Also, viel Erfolg weiterhin – ich werdce jetzt hier auch mal regelmäßig vorbeischauen.

    Gruß,
    Jens

    Antworten
  10. Torben kania
    schrieb am 14.11.2011 um 22:46 Uhr:

    Hallo

    Ist es möglich Facebook Tabs zu verschieben und in der Reihenfolge entsprechend anzuordnen ?

    Danke für einen Zipp

    MFG

    Torben

    Antworten
    • Jonas Hellwig
      schrieb am 14.11.2011 um 23:20 Uhr:

      @Torben: Ja, links in der Seitennavi von Facebook siehst du den Punkt „editieren“. Anschließend kannst du die Punkte per Drag & Drop verschieben.

      Antworten
  11. Alex
    schrieb am 31.10.2011 um 17:51 Uhr:

    Hallo,

    vll kann mir hier einer helfen.dieser acc wurde über handy freigeschaltet. ich konnte auch schon apps erstellen. nur jetzt geht es net mehr und ich erhalte folgende meldung.

    danke für euer hilfe.

    You can no longer create apps because our systems indicated that your account may not be authentic. Facebook requires users to provide their real first and last names, and fake accounts are a violation of our Statement of Rights and Responsibilities (SRR 4.1), even when used to host or test apps. Also note that maintaining multiple accounts, even if they are authentic, is also prohibited. If you would like to create a test user to test app functionality, you can do so here:

    Antworten
  12. Sebastian
    schrieb am 28.10.2011 um 12:19 Uhr:

    Hallo,

    ich habe jetzt mit iframewrapper eine Landingpage erstellt. Funktioniert auch wunderbar. Allerdings ist standardmäßig die Pinwand als Startseite eingestellt. Wie kann ich das ändern?

    Unter „Genehmigungen verwalten“ sehe ich zumindest keine Möglichkeit.

    Viele Grüße.

    Sebastian

    Antworten
  13. Hans-Jürgen Preetz
    schrieb am 23.10.2011 um 11:46 Uhr:

    Hallo,
    irgendwie bin ich echt zu doof dazu da was rein zu bringen.
    Ich möchte gerne auf der „Startseite“ der Fanseite ein Iframe laufen haben das den sendenden Moderator, den Titel des aktuell gespielten liedes und auch eine Streambox anzeigt. Dieses Iframe gibt es auch schon und läuft bei uns im Chat.
    Aber irgendwie bekomme ich die Anwendung weder konfiguriert noch zum laufen :(

    Kann mir da evtl. jemand bei helfen ?

    Liebe Grüße
    Hans-Jürgen

    Antworten
  14. Thorsten
    schrieb am 09.09.2011 um 20:34 Uhr:

    Super Anleitung. Hat einwandfrei funktioniert.
    Danke

    Gruß Thorsten

    Antworten
  15. Florian
    schrieb am 01.09.2011 um 10:58 Uhr:

    Hallo,
    ich brenne darauf neue Tabs nach dieser grandiosen Anleitung für unsere Firmen-Fanpage zu erstellen, allerdings scheitert es an zwei Dingen. Ersten bin ich noch relativ unerfahren was zum zweiten Problem führt: Als Admin angemeldet möchte ich die erwähnte Developers-Seite aufrufen und bekomme folgende Meldung „Um diese Funktion nutzen zu können, musst du dich für ein persönliches Facebook-Profil registrieren.“.

    Per Handynummer wurde der Account schon in der Vergangenheit verifiziert.

    Muss ich da jetzt noch mein privates Profil angeben?

    Antworten
  16. Oliver
    schrieb am 28.08.2011 um 00:23 Uhr:

    Ich hab mal eine andere Frage. Was ist wenn ich eine Webseite übernommen habe und der ehemalige Inhaber die Fanpage erstellt hat, ich nun aber Administrator bin… muss ich jetzt wirklich meine Handynummer dort angeben? Vor allem: Wie kann ich die Vorhandene Fanpage nun bearbeiten? Läuft die auf den Account des erstellers oder ist das automatisch meiner, weil ich nun Admin bin?

    Antworten
    • Jonas Hellwig
      schrieb am 28.08.2011 um 10:33 Uhr:

      @Oliver: sobald du Admin bist kannst du die Seite ganz normal bearbeiten. So als hättest du die Fanpage selbst eingerichtet. Wenn du die Fanpage mit Anwendungen erweitern willst – beispielsweise mit iframe-Tabs – dann musst du deinen privaten Account verifizieren (über Handy oder Kreditkarte) und kannst dann anschließend die Anwendungen der Fanpage hinzufügen. Wenn der alte Admin seinerseits Anwendungen erstellt hat, wirst du wohl eher keinen Zugriff darauf haben. Du könntest sie höchstens von der Fanpage entfernen bzw hinzufügen.

      Antworten
  17. Torsten Seifert
    schrieb am 26.08.2011 um 16:27 Uhr:

    war sehr hilfreich auch wenn nicht ganz aktuell ;-)

    Antworten
  18. dani
    schrieb am 18.08.2011 um 15:14 Uhr:

    danke für das HowTo! :-)

    Antworten
  19. Michael Seiler-Gerstmann
    schrieb am 27.07.2011 um 20:05 Uhr:

    @jonas
    danke, hast recht. ich seh zwar das app, aber als funktionierende seite und finde das app über die suche nicht – von daher passt das. war nur verwirrt das ich immer das app immer eingeloggt in meiner suche gefunden habe :)

    Antworten
  20. Christian Günther
    schrieb am 26.07.2011 um 18:27 Uhr:

    Super, dieser Artikel war genau das was ich gerade brauchte. Klasse Darstellung, auch wenn bei fb inzwischen alles schon wieder ein bisschen anders aussieht. Macht aber nix, ist nur optisch, soweit ich das sehe. Danke dafür!

    Antworten
  21. Michael Seiler-Gerstmann
    schrieb am 20.07.2011 um 13:45 Uhr:

    Super Beitrag. Wie kann ich aber das erstellte App verstecken? Oder sehe nur ich die Anwendung?

    Antworten
    • Jonas Hellwig
      schrieb am 20.07.2011 um 18:59 Uhr:

      @Michael: Die App ist öffentlich soweit ich weiß. Ich habe es mal mit meiner Startseite getestet. Auch die ist öffentlich aufrufbar (probier es mal mit einem Browser ohne Facebook-Login-Cookie): http://apps.facebook.com/kb-welcome/

      Sehe ich aber auch nicht als Problem. Besucht werden soll sie ja eh – außerdem ist sie nicht über die Facebook-Suche zu finden (soweit ich es eben erkennen konnte).

      Antworten
  22. Sebastian Schneider
    schrieb am 11.07.2011 um 20:21 Uhr:

    hey,

    sehr gute Darstellung :-) Großes Lob!

    Falles es jemandem doch zu kompliziert sein sollte kann er hier mit 3 Klicks seiner Facebook Seite einen Tab hinzufügen!
    facebook.com/247GRAD

    viele Grüße aus Koblenz,
    Sebastian

    Antworten
  23. Thomas
    schrieb am 30.06.2011 um 12:47 Uhr:

    Hallo zusammen,

    erst mal ein großes Lob für diese übersichtliche Einführung.

    Ich konnte damit die Iframe Seite ohne größere Probleme anlegen.
    Sie erscheint auch unter der angegebenen Canvasseite.

    Was leider nicht funktioniert ist das einbinden auf der Fanseite.
    Die Iframe Seite erscheint einfach nicht in der linken Navigation!

    Wenn ich dort unter Anwendungen versuche den Reiter zu erstellen bekomme ich die folgende Meldung: Es gibt keine Einstellungen für diese Anwendung.

    Habe ich hier etwas übersehen?

    Antworten
  24. Externe Links in die Facebook-Fanpage einbinden | kulturbanause blog
    schrieb am 21.06.2011 um 07:55 Uhr:

    […] müsst ihr einen iframe-Tab zu eurer Facebook-Fanpage hinzufügen. Wie das geht, habe ich hier bereits geschrieben. Die HTML- oder PHP-Datei, die innerhalb des iframe-Tabs geladen wird, füttert ihr anschließend […]

    Antworten
  25. WordPress-Editor für Facebook-iFrame-Tabs nutzen | kulturbanause blog - Artikel, Tutorials, Downloads, Tipps, Hacks, Snippets und aktuelle Szene-News rund um Webdesign und digitale Bildbearbeitung
    schrieb am 18.05.2011 um 00:01 Uhr:

    […] Um das Plugin nutzen zu können solltet Ihr mit der Integration von iFrame-Apps in Facebook vertraut sein. Wie das geht habt ich in einem vorherigen Beitrag bereits erklärt. […]

    Antworten
  26. Streusselchen
    schrieb am 09.05.2011 um 15:02 Uhr:

    Muss man Facebook auf dem Handy haben und damit angemeldet sein, damit das klappt??

    Antworten
  27. Streusselchen
    schrieb am 09.05.2011 um 12:56 Uhr:

    @Jonas. Danke, aber das habe ich alles schon probiert. :( Irgendwie klappt das alles nicht…

    Antworten
  28. Streusselchen
    schrieb am 09.05.2011 um 11:34 Uhr:

    hallo.
    Vielleicht könnt ihr mir ja weiterhelfen.
    Ich möchte den Bestätigungscode per SMS bekommen. Also habe ich meine Handynummer angegeben (ohne die 0 dann z.B. 15781234567) muss ich noch irgendwas machen? Denn den Code habe ich nicht bekommen und ich warte schon seit Donnerstag (05.05) dadrauf. :(

    Liebe Grüße und danke im Voraus
    Streusselchen

    Antworten
    • Jonas Hellwig
      schrieb am 09.05.2011 um 12:32 Uhr:

      @Streusselchen: Also bei mir kam der Code mehr oder weniger sofort an. Wenn Facebook es erlaubt dann würde ich den Code nochmal anfordern und evtl. auch verschiedene Schreibweisen bei der Nummer ausprobieren. Ich glaube ich habe meine Handynummer einfach ganz normal (ohne internationale Vorwahl oder so) angegeben. Also 0151xxx …

      Antworten
  29. Boris
    schrieb am 29.04.2011 um 13:25 Uhr:

    @ Jonas: Super, hat geklappt!

    Vielen Dank!

    Antworten
  30. Boris
    schrieb am 28.04.2011 um 09:42 Uhr:

    @Jonas: Ich habe unter der Canvas-URL den ganzen Pfad eingegeben (http://www.abcdefg.de/facebook-iframe/).

    Ber der URL des Reiters: index.html

    Wenn man: http://www.abcdefg.de/facebook-iframe/index.html aufruft, erscheint die Seite auch.

    Im Facebook-Reiter kommt die Meldung:

    Method Not Allowed
    The requested method POST is not allowed for the URL /facebook-iframe/index.html.

    Antworten
    • Jonas Hellwig
      schrieb am 28.04.2011 um 09:51 Uhr:

      @Boris: Probiere mal die Datei von index.html in index.php umzubenennen. Das könnte helfen. Achte aber darauf die Änderung auch innerhalb von Facebook inden App-Einstellungen vorzunehmen.

      Auf deinem Webspace muss im entsprechenden Verzeichnis natürlich PHP aktiviert sein – nur so als Tipp. Da habe ich mir mal die Zähne dran ausgebissen. :)

      Antworten
  31. Boris
    schrieb am 27.04.2011 um 15:30 Uhr:

    Hallo Jonas!

    Vielen Dank für die Beschreibung. Das Einrichten klappt auch super, er zeigt mir in dem Reiter nur leider nichts an.

    Die Screenshots scheinen nicht mehr ganz aktuell zu sein, die sehen jetzt etwas anders aus. Ich denke, dass ich irgendwas bei „URL des Reiters“ nicht richtig angegeben habe.

    Kommt nach: „http://apps.facebook.com/“ wirklich die komplette Canvas-URL inkl. http://www.abc.de/facebook-iframe ?

    Vielen Dank & Gruß
    Boris

    Antworten
    • Jonas Hellwig
      schrieb am 28.04.2011 um 08:51 Uhr:

      @Boris: Hallo Boris! Du hast recht, die Screenshots sind etwas veraltet – aber die Grundfunktion hat sich nicht geändert. Bei der „Canvas-Page“ gibst du einen beliebigen Namen ein – unter diesem Pfad ist die App dann innerhalb von Facebook gespeichert. Wichtiger für dich ist die „Canvas-URL“: Hier muss der absolute Pfad zu deiner Seite angegeben werden. Also bei mir beispielsweise http://facebook.kulturbanause.de/publikationen/
      Unter „URL des Reiters“ muss dann die index.php/html etc. angegeben werden.

      Hast du geprüft ob deine Seite korrekt aufgerufen wird, wenn du die Adresse der „Canvas-URL“ im Browser öffnest?

      Antworten
  32. Roland
    schrieb am 24.04.2011 um 18:27 Uhr:

    Super Beitrag! Bin dadurch gleich klar gekommen. Das Einzige wo ich noch hänge ist: Wo kann ich das Symbol (Zahnräder) vor dem Link ändern?

    Nochmals vielen Dank und mehr davon…..

    Antworten
  33. Alex
    schrieb am 19.04.2011 um 15:43 Uhr:

    Wie bekomme ich es hin, dass man direkt unter meiner Fapage, Postings abgeben kann?! Gibt es dafür einen Code?
    Hier ein kleines Beispiel:
    http://www.facebook.com/zalando?sk=app_117936971618717

    Antworten
  34. Tim
    schrieb am 16.04.2011 um 12:16 Uhr:

    Hi Jonas!

    Danke für den Tip. Doch leider klappt es so auch noch nicht, ich bekomme immer nur die Pinnwand angezeigt. Was kann es sonst noch sein? Evtl. etwas an der Landingpage falsch? Es geht um die facebook.de/Shirtwood Seite :)

    Antworten
  35. Tim
    schrieb am 15.04.2011 um 11:50 Uhr:

    Hallo! Super Doku, konnte es auch genau so umsetzen! Jedoch habe ich eine Willkommens Seite eingerichtet, wo Facebook aber nicht direkt als erstes drauf gehen will. Habe als Standart Reiter die „Willkommen“ Page ausgewählt, jedoch klappt es nicht. Was mache ich falsch?

    Danke für die Hilfe

    Antworten
    • Jonas Hellwig
      schrieb am 15.04.2011 um 16:46 Uhr:

      @Tim: Wenn du selbst Admin bist, kann es vorkommen, dass du immer die Pinnwand als erstes angezeigt bekommst. Teste es mal mit einem anderen Browser in dem du nicht bei Facebook eingeloggt bist.

      Antworten
  36. Torsten Winter
    schrieb am 14.04.2011 um 09:08 Uhr:

    Hallo,

    vielen Dank für die Hilfe. Super Erklärung.

    Antworten
  37. Johannes
    schrieb am 11.04.2011 um 17:51 Uhr:

    Hallo,
    ich bin gerade auf dein Tutorial gestoßen und mein Hirn freut sich wieder wie ne Pellkartoffel dass ich deinen Blog immer wieder mal in Augenschein nehme;)

    Allerdings habe ich ne Frage die du vlt beantworten kannst, ich versuche mich gerade an einer automatischen Verlinkung auf die Pinnwand.

    Sprich:
    Person sieht sich die Site an und sieht mein i-Frame. Person klickt auf Gefällt mir und wird nicht nur als Fan getaggt sondern auch gleich an die Pinnwand weitergeleitet.

    Mir wärs ja egal, aber mein Chef besteht auf solche Kleinigkeiten, vlt weisst du ja Rat=D

    Auf jeden Fall danke für die tolle Tutorials!

    Lg
    Johannes

    Antworten
  38. Andreas
    schrieb am 09.04.2011 um 13:32 Uhr:

    Ich bekomme keine Code von Facebook auf mein handy geschickt? habe keine Kreditkarte,,,,,was belibt mir für eine alternative? Vielen Dank!!!

    Antworten
  39. Fan-Gating für Facebook iFrame-Tabs: Inhalte nur für Fans | kulturbanause blog
    schrieb am 05.04.2011 um 20:05 Uhr:

    […] Facebook: Fan-Page mit iFrame-Tabs erweitern […]

    Antworten
  40. timo schuster
    schrieb am 05.04.2011 um 13:30 Uhr:

    habe alles so gemacht wie beschrieben. und gestern hat das auch geklappt. heute habe ich eine neue anwendung gemacht. wie oben beschrieben, aber sie wird nicht zu meiner seite hinzugefügt. obwohl ich das auch gemacht /seite hinzufügen) habe. irgendeine idee an was es liegen könnte=

    beste grüsse timo

    Antworten
    • Jonas Hellwig
      schrieb am 05.04.2011 um 13:40 Uhr:

      @Timo: Kann es sein, dass die Anwendung gleiche Einstellungen verwendet und daher nicht erneut hinzugefügt werden kann? Schau mal in den Einstellungen deiner Seite unter „Info bearbeiten → Anwendungen“ ob die Anwendung dort schon aufgeführt wird.

      Antworten
  41. Wolfgang Kubannek
    schrieb am 28.03.2011 um 17:33 Uhr:

    Problem selbst gelöst.

    Ich hatte einen falsche URL beim Reiter.
    Jetzt funktioniert es.

    Viele Grüße

    Wolfgang

    Antworten
  42. Wolfgang Kubannek
    schrieb am 28.03.2011 um 14:39 Uhr:

    Hallo zusammen,

    super Block. Toll erklärt! Trotzdem habe ich ein Problem. (Bin Anfänger)
    Man sieht auch meine Anwendung. http://apps.facebook.com/eifelbike/
    Nur wird die Anwendung nicht auf meiner Seite als Reiter angezeigt. http://www.facebook.com/eifelbike.
    Zur Zeit sind da noch die alten fbml Reiter.
    Wenn ich auf „Seite bearbeiten“ gehe, dann kommt die Fehlermeldung „Bitte update deine Callback-URL“…Um sicherzustellen, dass Nutzer deine Anwendung über eine sichere Browserverbindung (https) sehen, besuche bitte den Entwicklerbereich, um die Callback URL zu updaten. ????
    So richtig weit weg kann ich doch garnicht von der Lösung sein;-) Viele Grüße aus der Eifel. Wolfgang

    Antworten
  43. Bernd Daniel
    schrieb am 21.03.2011 um 10:31 Uhr:

    Hallo,
    ich werde wohl ca. 10 dieser Anwendungen einbauen; … ch verwalte damit die Ergebnisse und Tabellen unserer Volleyball-Hobby-Liga. Ist es danach möglich, die Anwendungen untereinander zu sortieren und anzuordnen?

    Bis dann mal; …

    Antworten
  44. Felix
    schrieb am 05.03.2011 um 15:49 Uhr:

    @Jonas: Danke das weiss ich aber ich möchte einen iFrame haben, der:

    – für nicht FANS als Startseite angezeigt wird mit dem hinweis „gefällt mir“ zu klicken.
    – für Fans wird aber nicht der iFrame angezeigt, sondern die Pinnwand
    – wenn ich Fan bin und auf den iFrame klicke sollte hier dann auch ein anderer Inhalt / Bild drinstehen

    Das ist mein Ziel :-)

    Antworten
  45. Felix
    schrieb am 03.03.2011 um 17:07 Uhr:

    Dabke für die gute Beschriebung – hat geholfen :-)

    Mich würde interessieren wo man die Einstellung wählt, dass ein „Besuche“ der noch nicht auf „gefällt mir“ geklickt hat auf die iFrame Statseite gelangt und ein FAN eben gleich auf die Pinnwand?

    Danke im voraus…

    Antworten
    • Jonas Hellwig
      schrieb am 04.03.2011 um 09:51 Uhr:

      @Felix: Du kannst in den Einstellungen deiner Seite einen allgemeinen Start-Tab festlegen. Dass Fans eine alternative Startseite sehen ist glaube ich nicht möglich.

      Antworten
  46. Lisa
    schrieb am 02.03.2011 um 06:03 Uhr:

    Hallo Kulturbanause,
    diese Seite hat mir nun schon mehrfach weitergeholfen. Du bist einfach spitze und die Anleitungen sind super verständlich geschrieben. Kaum zu glauben, dass Du aus Düsseldorf kommst!;-)))
    Danke dir, für die viele Arbeit, die Du in diese Seite investierst und dass Du mit anderen Dein Wissen teilst!
    Liebe Grüße aus Köln!
    Lisa

    Antworten
  47. v2ehret
    schrieb am 28.02.2011 um 07:31 Uhr:

    Hallo Zusammen,
    ich habe das gleiche Problem wie PC-Doktor-Dortmund – illegal tag “body” under “fb:tab-position” und einige CSS-Errors.

    Ich habe aber überall iframe gewählt und nicht fbml! Warum also diese Fehler? Es ist mir klar, dass unter fbml kein body tag etc benutzt werden darf, aber in einem iframe muss das doch machbar sein!? Darum wurde das ding doch bei fb jetzt eingeführt… Hat da jemand ne Idee? ist das ein FB-Bug oder sitzt der Bug zwischen meinen Ohren?

    Antworten
  48. PC-Doktor-Dortmund
    schrieb am 26.02.2011 um 12:20 Uhr:

    konnte den Fehler mittlerweile selbst lösen.

    ab und zu taucht zu meinem oben beschrieben Problem hilfreiche Fehlermeldungen, wie diese auf:
    „Errors while loading page from application
    Parse errors:
    FBML Error (line 18): illegal tag „body“ under „fb:tab-position“ “
    oder mal so:

    Anwendung derzeit nicht verfügbar
    Laufzeitfehler:
    HTML error while rendering tag „img“: Relative URLs not allowed here

    Die Lösung war dann klar:
    1. Ich hatte im iFrame noch den HTML, HEAD, und BODY Tag eingetragen, das mag FB aber nicht.
    2. die Image-Pfade müssen logischerweise basolut und dürfen nicht relativ gesetzt werden.
    und noch ein TIP zum Schluß:
    die IFrame Breite ist max 520px

    Antworten
  49. PC-Doktor-Dortmund
    schrieb am 26.02.2011 um 11:53 Uhr:

    Hallo !
    zu erst einmal vielen Dank für diese gut beschriebene Anleitung.
    Ich habe nun seit drei Stunden diese neuen iFrames, dank dieser Anleitung getestet und komme leider immer noch nicht zum gewünschten Erfolg.
    Als Inhaber der Fanpage kann ich den Contend der erstellten Anwendung (auch als Reiter) auch wirklich sehen, aber ein anderer Facebook-User oder auch nicht eingeloggte User sehen nur eine leere Seite (das Iframe scheint geladen zu werden) doch der Contend ist nicht zu sehen.
    Den Hinweis von Sven, mit der sicheren Canvas-Site habe ich schon kontrolliert, es ist nicht aktiviert und ich habe auch keine SSL-URI angeben.
    Hat jemand noch eine Idee ?

    Antworten
  50. Sven
    schrieb am 22.02.2011 um 08:36 Uhr:

    Was eventuell noch fehlt:
    Wenn der Benutzer unter Kontoeinstellungen >> Kontosicherheit „Sicheres Durchstöbern (https)“ aktiviert hat, wird der Content von dem iFrame Tab nicht angezeigt. Zumindest noch nicht. Der Fehler ist aber noch bei Facebook zu suchen, da trotz angabe einer Sicheren Canvas-URL auf http zurückgegriffen wird.

    Ganz nett ist auch, dass man ein idividuelles Icon an der Navigation einbinden kann. Okay ja Jonas hast ja recht … zu Erstellung der App ist es nicht nötig aber nett anzuschauen.

    Gruß
    Sven

    Antworten
  51. Stephan
    schrieb am 21.02.2011 um 12:56 Uhr:

    Vielen Dank für die tolle Anleitung. Das hat doch ein paar Fragezeichen für mich aufgelöst. Auf zum nächsten Versuch.

    Gruß Stephan

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →