kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Facebook: Fanpage mit iFrame-Tabs erweitern

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

65 Kommentare

  1. Stephan

    Verfasst am 21. Februar 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

  2. Sven

    Verfasst am 22. Februar 2011 um 8: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

  3. PC-Doktor-Dortmund

    Verfasst am 26. Februar 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 ?

  4. PC-Doktor-Dortmund

    Verfasst am 26. Februar 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

  5. v2ehret

    Verfasst am 28. Februar 2011 um 7: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?

  6. Lisa

    Verfasst am 2. März 2011 um 6: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

  7. Felix

    Verfasst am 3. März 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…

    • Jonas Hellwig

      Verfasst am 4. März 2011 um 9: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.

  8. Felix

    Verfasst am 5. März 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 :-)

  9. Bernd Daniel

    Verfasst am 21. März 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; …

  10. Wolfgang Kubannek

    Verfasst am 28. März 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

  11. Wolfgang Kubannek

    Verfasst am 28. März 2011 um 17:33 Uhr.

    Problem selbst gelöst.

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

    Viele Grüße

    Wolfgang

  12. timo schuster

    Verfasst am 5. April 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

    • Jonas Hellwig

      Verfasst am 5. April 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.

  13. Andreas

    Verfasst am 9. April 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!!!

  14. Johannes

    Verfasst am 11. April 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

  15. Torsten Winter

    Verfasst am 14. April 2011 um 9:08 Uhr.

    Hallo,

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

  16. Tim

    Verfasst am 15. April 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

    • Jonas Hellwig

      Verfasst am 15. April 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.

  17. Tim

    Verfasst am 16. April 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 :)

  18. Alex

    Verfasst am 19. April 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

  19. Roland

    Verfasst am 24. April 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…..

  20. Boris

    Verfasst am 27. April 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

    • Jonas Hellwig

      Verfasst am 28. April 2011 um 8: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?

  21. Boris

    Verfasst am 28. April 2011 um 9: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.

    • Jonas Hellwig

      Verfasst am 28. April 2011 um 9: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. :)

  22. Boris

    Verfasst am 29. April 2011 um 13:25 Uhr.

    @ Jonas: Super, hat geklappt!

    Vielen Dank!

  23. Streusselchen

    Verfasst am 9. Mai 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

    • Jonas Hellwig

      Verfasst am 9. Mai 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 …

  24. Streusselchen

    Verfasst am 9. Mai 2011 um 12:56 Uhr.

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

  25. Streusselchen

    Verfasst am 9. Mai 2011 um 15:02 Uhr.

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

  26. Thomas

    Verfasst am 30. Juni 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?

  27. Sebastian Schneider

    Verfasst am 11. Juli 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

  28. Michael Seiler-Gerstmann

    Verfasst am 20. Juli 2011 um 13:45 Uhr.

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

    • Jonas Hellwig

      Verfasst am 20. Juli 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).

  29. Christian Günther

    Verfasst am 26. Juli 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!

  30. Michael Seiler-Gerstmann

    Verfasst am 27. Juli 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 :)

  31. dani

    Verfasst am 18. August 2011 um 15:14 Uhr.

    danke für das HowTo! :-)

  32. Torsten Seifert

    Verfasst am 26. August 2011 um 16:27 Uhr.

    war sehr hilfreich auch wenn nicht ganz aktuell ;-)

  33. Oliver

    Verfasst am 28. August 2011 um 0: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?

    • Jonas Hellwig

      Verfasst am 28. August 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.

  34. Florian

    Verfasst am 1. September 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?

  35. Thorsten

    Verfasst am 9. September 2011 um 20:34 Uhr.

    Super Anleitung. Hat einwandfrei funktioniert.
    Danke

    Gruß Thorsten

  36. Hans-Jürgen Preetz

    Verfasst am 23. Oktober 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

  37. Sebastian

    Verfasst am 28. Oktober 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

  38. Alex

    Verfasst am 31. Oktober 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:

  39. Torben kania

    Verfasst am 14. November 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

    • Jonas Hellwig

      Verfasst am 14. November 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.

  40. Jens

    Verfasst am 16. November 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

  41. Willi

    Verfasst am 10. Dezember 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?

  42. Peter

    Verfasst am 21. Dezember 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?

  43. willi

    Verfasst am 22. Dezember 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/

  44. nicci

    Verfasst am 2. März 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

  45. Der Kieler

    Verfasst am 26. März 2012 um 19:59 Uhr.

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

  46. torben

    Verfasst am 13. Juni 2012 um 9: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

    • Jonas Hellwig

      Verfasst am 13. Juni 2012 um 9: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/

  47. Robert Becker

    Verfasst am 18. Juli 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

  48. Steffen

    Verfasst am 13. Mai 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..

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.