Facebook iframe-Tabs: individuelle Fanseiten-Reiter mit eigener Anwendung erstellen – UPDATED

UPDATE 11.12.2011: Facebook hat das Prozedere für das Hinzufügen der App zur Seite geändert (siehe unten)!

Dieses Tutorial kann kostenlos als pdf-Datei heruntergeladen werden
und ist auch auf scribd verfügbar.

Mit der Umstellung auf das neue Fanseiten-Layout, das Anfang März 2011 für alle eingeführt wird, hat Facebook nun auch das Erstellen von sogenannten iframe-Tabs als individuelle Gestaltungsmöglichkeit von Fanseiten eingeführt. Reiter, die mit Static FBML erstellt wurden, sollen zunächst weiter angezeigt werden. Da die neuen Reiter aber viel umfangreicher gestaltet werden können, sollte man das auch nutzen und bald umstellen.

Dazu nötig sind:

  • externer Webspace (z.B. dort, wo Ihre reguläre Website auch liegt) inklusive Variante mit sicherer Verbindung (https)!!!
  • ein verifiziertes Privatkonto auf Facebook, mit dem Sie auch Admin der Fanseite sind, zu der die individuellen Inhalte hinzugefügt werden sollen
  • HTML- und CSS-Kenntnisse (oder ein Webdesigner, der diesen Teil für Sie übernimmt)

Dieses Tutorial zeigt Ihnen, wie Sie die individuellen Inhalte vorbereiten müssen, die in die Fanseite eingebunden werden sollen, und wie dieses Einbinden dann funktioniert.

Inhalte vorbereiten

Die Inhalte eines iframe-Tabs können Sie wie normale Websites designen und (wie auch sonst im Webdesign) ausgehend von einer index.html konzipieren. Für die CSS-Datei des iframe-Tabs können Sie die CSS-Datei Ihrer Website kopieren und entsprechend anpassen.

Für Fanseiten-Reiter gilt eine maximale Breite von 810px. Da für iframe-Tab aber auch noch eine maximale Höhe von 800px hinzukommt, sollten Sie vorsichtshalber nochmal 10px von der max. Breite abziehen, damit der vertikale Scrollbalken, der beim Überschreiten der max. Höhe erscheint, nicht noch zu einem weiteren horizontalen Scrollbalken führt. Legen wir also 800px Breite und max. 800px Höhe für den body fest.

WICHTIG: Links, die aus dem Reiter hinaus auf externe Webseiten führen sollen, müssen mit target=”blank” versehen werden, weil Facebook sonst versucht auch diese (nicht für die Ansicht in Facebook optimierten Seiten) im Reiter darzustellen.

Von dieser Startseite ausgehend können Sie weitere Unterseiten ganz normal über ein Menü oder Textlinks untereinander verlinken. Solange Sie sich an die genannte Größe halten und folgende weiteren Regeln beachten, werden diese Seiten nachher im Tab selbst navigierbar angezeigt:

Der im Video gezeigte Tab hat z.B. folgende Struktur:

  • Home (index.html)
  • Grundsätze (grundsaetze.html)
  • Publikationen (publikation.html)
  • Kontakt (kontakt.html)
  • Impressum (Link zum Impressum der regulären Website ist ein MUSS und wird daher mit target=”blank” eingebunden!)

Die html-Dateien sowie die dazugehörige CSS-Datei liegen alle im selben Unterordner meiner Website bereit. Diese für die Facebook-Ansich optimierte Miniwebsite muss nun über eine im Folgenden zu erstellende Facebook-Anwendung auf der Fanseite anzeigbar gemacht werden:

Erstellen einer Facebook-Anwendung

  1. Legen Sie auf Ihrem Webserver einen eigenen Ordner an und kopieren Sie die Dateien für den Tab (.css und .html) in diesen Ordner.
  2. Die neu erstellte index.html für den neuen Tab ist also zu finden unter
    http://meinewebseite.de/meinordner/index.html
  3. Öffnen Sie in einem neuen Browser-Tab die Developer-Seite von Facebook
    http://www.facebook.com/developers/
  4. Klicken Sie rechts oben auf den Button + Create new app
  5. Geben Sie Ihrer Anwendung einen Namen (kann man jederzeit wieder ändern und ist nach außen nicht sichtbar) und stimmen Sie den Allgemeinen Geschäftsbedingungen von Facebook zu:
  6.  Klicken Sie auf Weiter.
  7. Danach werden Sie gebeten einen Sicherheits-Code einzugeben.
  8. Nun werden Sie aufgefordert, einen Namen für Ihre Anwendung einzugeben (wird später nicht Name des Reiters) und eine Kontakt-Emailadresse sowie die Anwendungsdomain (facebook.com eintragen):
  9. Ganz oben können Sie außerdem ein Icon für Ihren Reiter hochladen:
    Weitere Anweisungen finden Sie dann im neuen Fenster:
    Es sollte – wie ein normales Favicon –  16x16px groß sein, allerdings JPG-, GIF- oder PNG-Format haben und nicht größer als 5MB sein. Außerdem versichern Sie mit dem Hochladen, dass Sie die Rechte an diesem Bild besitzen.
  10. Jetzt geben Sie weitere Details zu Ihrer neuen Anwendung ein:

    • Website > Adresse der Webseite: http://facebook.com/
    • Seitenreiter > Page Tab Name:  späterer Name des Reiters
    • Page Tab URL: wo befindet sich die Startseite Ihrer extern bereitgestelten Reiter-Inhalte?
    • Secure Page Tab URL: wo befindet sich die sichere Startseite (https) Ihrer extern bereitgestellten Reiter-Inhalte?

    ÄNDERUNGEN SPEICHERN!

Ihre Anwendung zu Ihrer Fanseite hinzufügen (s.pdf-Download ganz oben)

  1. Modifizieren Sie den folgenden Link mit Ihren Parametern:   https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=http://www.facebook.com/
    • YOUR_APP_ID = Ihre App-ID (finden Sie ganz oben auf Ihrer Anwendungsseite, siehe Grafik bei Punkt 8)

    Beispiel:
    https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID_HERE&display=popup&next=http://www.facebook.com/

     

  2. Geben Sie dann diesen modifizierten Link ins Adressfeld Ihres Browsers ein und öffnen Sie ihn. Daraufhin erscheint so ein Dialog:
    • Über Choose Facebook Pages können Sie die gewünschte Facebook-Seite auswählen, zu der der neue reiter hinzugefügt werden soll.
    • Über Add Page Tab fügen Sie den Reiter zu Ihrer Fanseite hinzu.
  3. Wechseln Sie zu Ihrer Fanseite. Dort sollte Ihre Anwendung jetzt als Menüpunkt erscheinen:
    Screenshot Fanseiten-MenüIm Reiter dazu kann man dann die einzelnen Unterseiten direkt im Reiter aufrufen:

    screenshot iframetab schwindt-pr

    Bild anklicken, um Original-Tab zu sehen

The following two tabs change content below.

Annette Schwindt

Bloggerin, Autorin und Beraterin bei schwindt-pr
Ich helfe anderen, ihre digitale Komunikation richtig aufzubauen oder zu optimieren. Mein Motto lautet "Einfach Kommunizieren", mich also möglichst verständlich auszudrücken und echte Gespräche von Mensch zu Mensch zu führen! Denn das geht auch online! :-) Meine Artikel und sonstigen Veröffentlichungen entstehen aus dem täglichen Dialog mit meinen Lesern. >>> Lesen Sie mehr über mein Beratungsangebot

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

504 Antworten

  1. Hallo,
    vielen Dank für Ihr Tutorial. Ich hätte eine Frage: Ich verwalte eine Facebook-Fanseite für meine Band. Mithilfe von RootMusic habe ich eine sogenannte BandPage kreiert. Diese lässt sich für Menschen, die keine Fans der Fanpage sind, als “Landing-Page”, also als Startreiter der Fanpage festlegen. Dies funktioniert allerdings nicht, für Leute, die bereits Fans der Band sind. Sie bekommen immer die Pinnwand als “Landing-Page” zu sehen. Oder gibt es da vielleicht noch irgendeine Einstellung, die ich übersehen habe?
    Vielen Dank im Voraus.

  2. Guten Abend Frau schwindt was soll ich da machen vorhin wollte ich kucken ob Marco Angelini was geschrieben hat und jetzt kann man nicht auf seine Seite.Der Marco Angelini ist übrigens ein EX-Dsds Kandidat er schreibt immer was auf Facebook was kan ich da machen. Es kann ja auch sein Das er schon lange was hochläd.

    • Das ist keine versteckte Seite, sondern nur ein individueller Tab mit getrennten Inhalten für Fans und Nichtfans (sog. Fan- Gating). Dazu braucht man entweder einen Webentwickler oder eine anwendung, die das kann (z.B. iframeWrapper).

  3. Hallo,
    erstmal vielen Dank für dein Tutorial, ich hoffe du liest diesen Kommentar :)

    Ich habe dazu noch 2 Fragen, die Antworten dazu finde ich leider nirgends im Web – eventuell weist du ja weiter.

    Und zwar möchte ich gerne das meine angelegte Anwendung zu erst angezeigt wird, wenn ich die Fanseite Besuche (also jemand der noch nicht auf gefällt mir geklickt hat !) und danach ganz normal die Pinnwand angezeigt wird.

    Außerdem hätte ich gerne den Titel der Anwendnung entfernt, ich finde aber auch dazu keine Möglichkeit das zu lösen!

    Ich hoffe mir kann jemand helfen!

    Danke.

    • Wenn Sie die Anwendung als iframeTab mit eigener Anwendung erstellt haben, können Sie den Namen in den Einstellungen jederzeit ändern. Als Startseite definieren können Sie den Anwendungsreiter nur für Nichteingloggte und Nichtfans (Seite bearbeiten > Genehmigungen verwalten > Standard-Reiter). Alle anderen sehen automatisch zuerst die Pinnwand.

  4. die iframes von facebook etc sind ne tolle erfindung. nutze sie selber auch.
    habe aber auch gelesen, das google iframes nicht gern sieht und vielleicht sogar bestraft.
    hat einer erfahrung damit ?

  5. Bonjour,
    deine Empfehlungen waren für das Thema sehr hilfreich, jedoch steche ich an einen Probleme. Es verlang einen Secure Canvas-URL in https form. wie kann ich sowas erstellen. danke für deinen Tips

  6. Hallo Frau Schwindt,

    danke für die Anleitung. Hat alles sehr gut funktioniert. Eine Frage habe ich aber: Wie kann man vom iFrame auf andere Facebookseiten verlinken – ohne das diese in den Frame geladen werden? target=_top hat nicht funktioniert! Die Browser machen dann gar nichts?? target=_blank funktioniert zwar, aber das ist ja nicht der Sinn der Sache.

    Getestet habe ich mit IE8, FF4 und Chrome.

  7. Hallo,
    leider komme ich auf der Seite http://www.facebook.com/developers/ nicht weiter:

    “Dein Konto muss bestätigt sein, bevor du diese Aktion tätigen kannst. Bitte lasse dein Konto bestätigen, indem du deine Handy oder Kreditkarte hinzufügst.”

    Als Netzbetreiber wird hier nur O2 angeboten und Kreditkartenangaben wollte ich hier nicht vewenden. Was mache ich falsch bzw. gibt es einen anderen Weg?

  8. Hallo Frau Schwindt!

    Vielen Dank für die Tipps, ein Problem habe ich noch: Nach der Erstellung der Apps kommt folgende Meldung:
    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.
    Was bedeutet das? Müssen 5 User die Aplikation benutzen?

  9. Hallöchen,

    erstmal vielen Dank für die Super Anleitung.
    Es klappt alles wunderbar.

    Leider braucht facebook aber ca. 7 Sekunden (!!!) um die Seite zu laden. Die Seite beinhaltet lediglich etwas Text und einige Links – also nichts spezielles.

    Wenn ich die Seite direkt laden lasse, dauert es einige Millisekunden.

    Finde leider auf Google keine Antwort zu diesem Problem, sehe aber dass auf Deiner Seite alles schnell geladen wird.

    Bitte um Hilfe :)

  10. guten Tag Frau Schwindt ich habe eben eine neue Anwendung (nach Ihrer Anleitung – funktioniert alles super!) auf meine Seite gebracht. Die Anwendung ist allerdings nur für Admins sichtbar.
    Wie kann ich sie für alle sichtbar machen ?? (sogar wenn ich die CanvasSeite als startseite (statt Pinwand) eingebe, landet der enduser auf der pinnwand.

    Danke

  11. Hallo Frau Schwindt,

    vielen Dank für Ihr Tutorial!

    Wie integriert man einen Like-Button auf die i-frame-Seite, so dass User, die den Tab/App liken, dessen Namen auch im Profil angezeigt bekommen. In etwa so:

    Maren gefällt “Tabname”.

    Danke schon mal im Voraus und viele Grüße!

      • Hallo Frau Schwindt,

        ich muss leider noch mal “nachbohren”. :)

        Den Likebutton habe ich ganz normal auf die externe iFrame-Seite integriert und die Open Graph Tags hinzugefügt. Soweit so gut.

        Wenn ich auf meiner Testpage in Facebook die iFrameseite aufrufe und auf “Gefällt mir” klicke, erscheint in meinem Profil “Maren gefällt Testpage”.

        Was ich aber möchte ist, dass da steht “Maren gefällt iFrameseite” und bei Klick darauf der User auf die iFrameseite innerhalb meiner Testpage in Facebook gelangt.

        Das Problem hierbei ist, wenn ich beim Erstellen des Likebuttons die Facebook-URL zur iFrameseite eingebe (also http://www.facebook.com/Testpage?sk=app_123456789), wird der Link abgeschnitten und man gelangt nur auf die Startseite (oder Pinnwand) der Testpage.

        Können Sie mir einen Tipp geben oder kennen Sie eine Page, die sowas integriert hat?

        Vielen Dank im Voraus für Ihre Geduld! :)

  12. Sehr gute Anleitung!!!
    Ich habe mitbekommen, dass es jetzt Bedingung ist seine eigene Identität mittels Handy oder Kreditkarte für die Nutzung der “Entwickler”-Ebene freischalten zu lassen.

    Gestern also meine Handy-Nummer angegeben, aber bis heute kam keine Antwort per SMS.

    Weiß jemand, ob dieser Dienst nur für O² (habe ich irgend wo gelesen) gilt oder ob es einfach nur ein Fehler ist? Leider kann ich die Nummer nicht noch einmal senden, da immer das Bestätigungsfenster mit dem Eingabefeld des Codes geöffnet wird.

    Würde mich freuen, wenn mir jemand helfen könnte :o)

    Ciao Holger =;o)

  13. Super Tutorial. Gesucht habe ich eigentlich was anderes…

    Kann man die eigens erstelle App als Start-Reiter festlegen?

    Bei manchen Pages habe ich das schon gesehen. Zuletzt Renault Deutschland.
    Weiß wer zu helfen?

    Gruß Robert

      • HAllo, Standardreiter wurde schon Bandpage angegeben aber irgendwie wird es nicht umgesetzt :(
        Erscheint immernoch die doofe Pinnwand als Startseite. Google schon die ganze Zeit, aber finde nix :(

        Hilfeeeeeeeeee :)

          • Hallo Frau Schwindt,
            danke für Ihre interessanten Beiträge!
            Genau an dieser Stelle setzt aktuell mein Problem an:
            Gibt es eine Möglichkeit, als Fan eben nicht die Pinnwand sondern die neu erstellte iFrame App anzeigen zu lassen?
            Die vergleichsweise aufwendig erstellte App wir vollkommen übersehen und die ‘langweilige’ Pinnwand in den Vordergrund gestellt…das macht doch irgendwie keinen Sinn, oder lieg ich da falsch?
            Vielen Dank im Voraus und viele Grüße
            Schwammakobf

  14. Ich bin bei o2 und habe auch erfolgreich den code bekommen und diesen auf der internetseite eingegeben.

    Zuerst dachte ich es könnte ein paar Minuten dauern, aber ich bekomme immer noch die selbe Meldung und komme nicht mehr weiter:

    “Dein Konto muss verifiziert sein, bevor du diese Aktion tätigen kannst. Bitte verifiziere dein Konto, indem du deine Handy oder credit card hinzufügst.”

  15. Hallo Frau Schwindt,

    gibt es eine Möglichkeit, die App zu verstecken? Ruft man die app über apps.facebook.com/example_app auf ist die Seite ja aus dem Kontext gerissen, das würde ich gerne vermeiden.

  16. Hallo Frau Schwindt,

    die Anleitung ist hervorragend. Vielen Dank!

    Ich habe nur noch ein Problem: Wenn ich auf Den Button der Anwendung gehe, lädt die Seite nicht, sondern es erscheint stattdessen das facebook-Logo mit dem Link “Gehe zu facebook.com”

  17. Es gibt offenbar immer noch keine Möglichkeit, eine Anwendung zu erstellen ohne O2-Handy oder kreditkarte …
    “Dein Konto muss verifiziert sein, bevor du diese Aktion tätigen kannst. Bitte verifiziere dein Konto, indem du deine Handy oder credit card hinzufügst.” :-(
    Also werde ich an Punkt nicht weiter kommen. Pech gehabt.

  18. Hallo, ich bekomme die Fehlermeldung “Method Not Allowed The requested method POST is not allowed for the URL”, die HTML-Dateien werden natürlich auch nicht angezeigt.
    Hab ich grundlegend was falsch gemacht (die Formulare in den Screenshots im Tutorial entsprechen ja nicht 1:1 der aktuellen Situation bei Facebook, vielleicht hab ich bei den Punkten 20, 21 oder 27 gepfuscht)?
    Ansonsten aber vielen Dank für’s Tutorial – sehr cool!

      • Hallöle,
        hatte das selbe Problem mit der Fehlermeldung 405 “Method not allowed”. Umbennen der HTML-Dateieindung in PHP brachte keinen Erfolg. Lösung: Mein Server (Host der Website) kann aus irgendwelchen mir unerklärlichen Gründen die Facebook-iFrame-Anfrage nicht verarbeiten. Habe einen anderen Server genommen und alles funktioniert bestens.

  19. Hallo,
    sehr gute Anleitung, aber wie funktioniert denn nun die Abfrage ob ein User schon Fan ist oder nicht?

    Mit dem FMBL konnte man das alles mit ( ) steuern.

    Wie funktioniert die Anfrage mit dem iframe?

    Vielen Dank!

  20. Hallo Frau Schwindt,

    wissen Sie, wie man das Erscheinen des Menütitels (also Reiternamens) hinter dem Seitentitel verhindern kann? Es erscheint ja dort normalerweise “Meine Seite > Willkommen”, wenn “Willkommen” ausgewählt wird. Bei langen Seitentiteln gibt es dann aber einen hässlichen Umbruch vor “Gefällt mir”.

  21. Bei mir wird der Reiter nach langem hin und her endlich angezeigt – vielen Dank für die Beschreibung wie es geht!

    Aber Punkt 27 habe ich ehrlich gesagt auch noch nicht verstanden.

    Was ist denn der Unterschied zwischen der Angabe unter 21 zu der Angabe unter 27?

    Könnten Sie das eventuell nochmal an einem praktischen Beispiel erläutern?

    Das wäre sehr nett, vielen Dank im Voraus.

    Was mich auch noch interessieren würde ist, wie ich nun weitere Reiter erstellen kann. Muss ich für jeden neuen Reiter wieder bei 0 beginnen?

  22. Hallo Frau Schwindt
    Ich habe alles so durchgeführt wie Sie es beschrieben haben um einen iframe Tab anzulegen.
    Schon bei den Einstellungen kam bei mir eine signifknate Stelle nicht wie gezeigt. Bei Ihnen sieht es bei Punkt 27 so aus: http://apps.facebook.com/spreins/ –> dann kommt das Eingabefeld für die html-Seite bei Ihnen die indesx.html). Bei mir sieht die dieser Bereich nur ein Eingabefeld für “URL des Reiters” vor. Leer und keine Vorgaben. Nun habe hier dann von Hand http;//apps.facebook.com/ –> tja und nun habe ich mehrer Möglichkeiten: a) nur meine.html Seite b) zusätzlich die Canavas URL von oben mit http:// oder ohne c) oder nur meine http://meinewebsite.de/meinfacebookordner/meine.html.
    Egal was ich angebe, es kommt beim Testen mit einem anderen Facebook Account nur unformatierter Text (teilweise von dem was auf meienr html-Site ist) aber keine Bilder oder es ist vollkommen leer (weisse Seite).
    Alles was ich zuvor in einem Editor programmiert habe wurde im Browser einwandfrei, mit formatierten Text, sauberes Layout und Bilder angezeigt.
    Wenn ich in Anwendung bearbeiten im Bereich Facebook Einbinden im Feld “27” URL des Reiters was Neues eingebe wird es teils nicht nach dem Speichern angenommen.
    Es ist mehr als mühsam und vor allem nicht so einfach wie Sie es beschreiben haben. Leider!!
    Ich weiss nicht mehr weiter.
    Haben Sie ine Idee???

    MfG
    K. sprenger

  23. Hallo Frau Schwindt,

    wenn es keine Lösung (Kreditkartenabfrage von Facebook) für die Gestaltung der Reiter mit iframe gibt,
    haben Sie Informationen, wie lange noch der alte Weg mit Static FBML weiterhin unterstützt wird?

    Vielen Dank im Voraus für Ihre Antwort

    Jürgen Heitzmann

    • Eigentlich sollte es bereits nicht mehr möglich sein, Static FBML neu zu einer Seite hinzuzufügen. Aber einige nutzer haben mir berichtet, dass sie es noch können… Einfach mal versuchen, würde ich sagen. ;-)

  24. Hat alles geklappt, danke!

    Nur das mit https klappt nicht, mein Server ist nicht mit https-
    ist ein bisschen doof von Facebook, die das zwingen. Alle, die nicht https unterwegs sind, sehen die Seite, alle andere nicht….

  25. Bei mir erscheint: 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.

    Was soll man da machen?

  26. Hallo, hab ein Tipp und eine Frage:

    Tipp: um die Verifizierung zu umgehen, kann man auch:

    – eine email von eine Institution/verein/Schule/uni nutzen.

    beispiel, wenn man selber student ist, kann man diese email der Universität nutzen, die man bei der Uni-Anmeldung bekommen hat, um sich bei FB zu verifizieren.

    Eine Frage: irgendwie klappt bei mir alles , bis auf dem Punkt: auf die Seite bringen. Ich habe alles getan, aber reiter erscheint nicht auf gewählte Seite. Woran kann das liegen?

  27. Hallo,

    tolles Tutorial!

    Eine Frage zu der Verifizierung per Handy/Kreditkarte: Ist das ein neues Feature? Und gibt es vielleicht eine Möglichkeit es zu “umgehen”? Nicht jeder möchte facebook seine Kreditkarten-Nr. oder Handy-Nr. überlassen. ;-)

    LG Saskia

  28. Hallo Frau schwindt.
    Ich muss mich Verifizieren (Handy, Kredidkarte)
    mein Handy will es nicht annehmen, da ich Symio habe,
    Kredidkarte besitze ich nicht. Und nun?
    Fällt das alles ins Wasser, oder gibt es eine andere Möglichkeit?

    Liebe Grüße.

  29. Wie ist es denn mit dem FBML-Code “”. Funktioniert der auch noch, wenn man das ganze als iFrame einbindet? Oder gibt es eine passende Alternative um Seiten für Fans und Nicht-Fans anzuzeigen?

    • Ein wunderbarer artikel! Nachdem ich ewig versuchte genau das beschriebene in die tat umzusetzen, kam mir dieser text genau richtig. Und schwups die wups war die arbeit getan. Danke dafür.

  30. Vielen Dank für diese sehr ausführliche und hilfreiche Anleitung!

    Wie verhält es sich mit einer sicheren https-Adresse? Auch wenn diese nicht Pflicht ist, wird das iframe-Tab leider nur Nutzern angezeigt, die kein https nutzen. Haben Sie diesbezüglich einen Tipp?