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

Ich freue mich, wenn Sie diesen Beitrag weitersagen:

Annette Schwindt
...im Web bekannt als "schwindt-pr". Bloggerin und Beraterin für digitale Kommunikation, freie Journalistin, Mentorin und Fachlektorin. Lesen Sie mehr über mein Leistungsangebot. Ich helfe Ihnen dabei, sich selbst oder Ihr Unternehmen optimal im Web zu präsentieren, und sich besser im digitalen Wandel zurecht zu finden.

505 Kommentare

    1. Hallo Frau Schwindt

      Vielen Dank für die Super Anleitung, als FB Neuling bin ich auf solche angewiesen.

      Ein Problem habe ich noch:
      Ich habe alles nach Ihren Angaben gemacht und die Anwendung hinzugefügt. Sie erscheint mit Icon aber der Inhalt bleibt leer, ohne Fehlermeldung oder sonst was…

      Wenn ich den Inhalt auf meinem Webspace ansehe funktioniert es einwandfrei. Also müsste ein Fehler in der Anbindung sein???

      Liebe Grüsse

      1. Lieber Grueter,
        versuchen sie das Tutorial wie oben beschrieben durchzuführen, die Anwendungsdomain aber auf die Adresse ihrer eigenen Webseite umzustellen. Bei mir hat das in der Praxis genau dasselbe Problem behoben 😉

        1. Hallo,

          leider funktioniert es nicht wenn man die Anwendungsdomain ändert. Dort kommt sofort eine Fehlermeldung.

          Mein Problem liegt darin das mein Inframe bei manchen Usern angezeigt wird und bei manchen der inhalt einfach nur weiß bleibt.
          kann mir jemand helfen das Problem zu lösen?

          Viel Dank

    2. Mit „Test“ ist ein Fehler aufgetreten. Bitte versuche es später noch einmal.

      API Error Code: 191
      API Error Description: The specified URL is not owned by the application
      Error Message: redirect_uri is not owned by the application.

      Leider ist bei mir folgender Fehler aufgetaucht. Früher ging das super mit der Anwendung, aber jetzt kriege ich das nicht mehr hin.

        1. ich habe das gleiche Problem. ich habe bei url/secure url entsprechend den Link der seite hinterlegt, die angezeigt werden soll. und dann habe ich die url wie in der anleitung modifiziert und aufgerufen.

          wär ja auch zu einfach gewesen, wenn fb es einfach so gelassen hät wie es super funktioniert hat, link auf profilseite, einbinden klicken und fertig

          1. also ich habe gefunden woran es liegt. wenn man unter den erweiterten Einstellungen eine Page für die App anlegt, dann kann man den Link wie beschrieben nutzen

            1. Ich habe das selbe Problem. Kann mir jemand erklären wie ich es löse? Erweiterte Einstellungen habe ich nicht gefunden nur „Fortgeschrittene“ … sehr leider grad garnicht durch 🙁
              Danke!!!

      1. bei mir ist auch immer die gleiche fehlermeldung gekommen, bin dann aben nach einigen versuchen draufgekommen wo mein fahler war!
        man muss als YOUR_URL (wie im tutorial beschrieben) die gesamte url inklusive dem index.html – file eingeben.

        also nicht wie im beispiel:

        https://www.facebook.com/dialog/pagetab?app_id=123456789012345&display=popup&next=http://www.meinedomain.de/fb/

        bei

        […] http://www.meinedomain.de/fb/

        aufhören, sonder dann auch noch index.html hinten anfügen!

        dann müsste das beispiel so aussehen:

        https://www.facebook.com/dialog/pagetab?app_id=123456789012345&display=popup&next=http://www.meinedomain.de/fb/index.html

        so hats bei mir funktioniert!
        ich hoffe ich konnte weiterhelfen!

    3. Super Sachen, vielen Dank für die Anleitung. Also nach der Facebook anleitung hät ich das nicht hinbekommen, war schon kurz davor den PC ausm Fenster zu schmeißen. Haben Sie mir also Zeit und Geld gesparrt hehe.

      Bitte mehr von diesen Super Anleitungen 🙂

      gruß

      Daniel

  1. 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?

  2. 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?

    1. 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.

  3. 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.

  4. 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

    1. Nein, gibt es nicht und diese Art der Verifizierung ist auch nicht neu, sondern gilt schon eine ganze Weile, wenn man Facebook-Apps entwickeln will. Nur auf diesem Wege erreicht man den „Developer-Status“

    2. Wo ist das Problem? Wozu gibt es Prepaid-Handies?

      Unabhängig davon finde ich es auch nicht gut, so etwas umgehen zu wollen. Diese Sicherheitsmaßnahmen haben ihren Sinn, gerade im Developerbereich.

  5. 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?

      1. Bei mir erschien der Reiter auch nicht automatisch, einfach bei den Einstellungen der Seite auf „Applikationen“ gehen, dort die neue auswählen und bei Reiter „hinzufügen“ auswählen.

  6. 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?

        1. Richtig!

          Falls man keine https-URL hat, kann man diese beim Domainhoster beantragen, bei einigen Anbietern ist dieses Sicherheitszertifikat bereits kostenfrei im Paket enthalten.

          Ganz ohne https-URL funktioniert es nach meinen Erfahrungen (derzeit/bisher) leider nicht.

          1. Wenn ich das recht richtig sehe – geht ohne eine https – Seite garnichts mehr – kann mir einer bitte mal sagen welches SSL-Zertifikat für Facebook ausreichend ist? Danke und Gruß Peter

    1. Gehen Sie zu den Einstellungen Ihrer Anwendung unter facebook.com/developers und geben Sie bei Fortgeschiritten > Sichere Canvas-URL die https-Verbindung ein, über die Ihre Inhalte erreichbar sind (wenn Sie sowas haben).

  7. 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….

  8. 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

    1. 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. 😉

  9. 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

  10. 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?

  11. 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“.

  12. 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!

  13. 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!

      1. 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.

  14. 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.

  15. 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“

          1. Danke für die tolle Anleitung!

            Hatte das selbe Problem und habe beim schreiben der Antwort die Lösung gefunden 🙂

            Bei mir lag es an den Canvas Settings, hier hatte ich bei Tab URL den falschen Wert hinterlegt. Es war leicht verwirrend, da die Bilder der Anleitung von dem aktuellen Zustand abweichen.

            Ich hatte vorher die komplette Adresse der app hinterlegt:
            http://apps.facebook.com/meineApp/index.php

            Es reicht jedoch einfach nur „index.php“

  16. 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.

      1. Die App ist nicht hinzugefügt. Trotzdem kann ich sie auch ohne Anmeldung anwählen. Liegt hier ein Fehler vor? Ich kann die App zwar nicht über die fb-Suche finden, allerdings über die direkt Adresse ansprechen.

          1. Hallo Frau Schwindt,

            ich habe dasselbe Problem. Ich möchte die Fanseite in den FB-Suchergebnissen erscheinen lassen, die App jedoch nicht. Ist soetwas möglich?

            Beste Grüße

            Daniel San

            1. Hallo Frau Schwindt,

              schonmal vielen Dank für die Antwort.
              Gibt es die Möglichkeit die App aus dem Verzeichnis zu entfernen?

              Vielen Dank und beste Grüße
              Daniel San

  17. 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.“

  18. 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

      1. 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 🙂

          1. 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

  19. 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)

  20. 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!

      1. 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! 🙂

  21. 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

  22. 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 🙂

  23. 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?

  24. 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?

  25. 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.

  26. 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

  27. 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 ?

  28. 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.

    1. 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.

    1. 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).

  29. 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.

  30. 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.

Hinterlasse einen Kommentar.

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