Facebook: Wenn der iframe-Tab Probleme macht – UPDATED

Das iframe-Tab-Tutorial zum Einbinden individueller Inhalte in Facebook-Fanseiten erfreut sich großer Resonanz. Leider gibt es aber beim ein oder anderen Anzeigeprobleme. Daher hier noch ein Nachtrag zum Tutorial:

Method POST not allowed

Problem 1: Die externen Inhalte werden im iframe-Tab nicht angezeigt, stattdessen erscheint eine Fehlermeldung wie: „Method Not Allowed The requested method POST is not allowed for the URL“

Lösung: Benennen Sie die einzubindenden Seiten von .html um in .php (auch Verlinkungen innerhalb des Tabs ändern, falls vorhanden!). Dann sollte alles normal angezeigt weden.

Scrollbalken

Problem 2: Die einzubindende Seite ist höher als 800px, so dass Facebook Scrollbalken in den Tab einfügt, was unschön aussieht.

UPDATE2 (August 2012): Die unten gezeigte Lösung funktioniert nicht mehr. Lesen Sie die neue Lösung HIER nach.

 

Lösung: Setzen Sie <body style=“overflow:hidden“>

und fügen Sie folgendes Script am Anfang des body ein:

<div id=“fb-root“>
<script src=“http://connect.facebook.net/en_US/all.js„></script>

<script type=“text/javascript“>
FB.init({
appId : ‚IHRE APP-ID‚,
status : true,
cookie : true,
xfbml : true,
oauth: true
});
FB.Canvas.setAutoResize(true, 500);
</script>

</div>

 

 

Das Tutorial wurde auch um diese beiden Hinweise ergänzt und kann nach wie vor als pdf (439kb) heruntergeladen werden unter:

http://www.scribd.com/doc/50039880/Facebook-iframe-Tabs-Tutorial

oder

http://www.schwindt-pr.com/iframetabs.pdf

Annette Schwindt
hat sich inzwischen als "schwindt-pr" verabschiedet und bloggt jetzt unter annetteschwindt.de.

45 Kommentare

  1. Hallo, ich hab das mit der .php-Endung probiert und auch mal eine echte PHP-Seite bei mir auf den Server gestellt. Allerdings wird bei mir eine 404-Seite angezeigt, will ich die Anwendung aufrufen, obwohl die URL definitiv korrekt ist. Kann da vielleicht was mit den Servereinstellungen nicht stimmen?

  2. hallo
    ich habe 2 seiten, 1x ort, 1x seite.
    das einfuegen der anwendung & somit des reiters in den ort funktioniert einwandfrei. auf der seite allerdings konnte ich zwar die anwendung hinzufügen, aber der reiter ist trotzdem nicht sichtbar.

    irgendwelche tips?

    danke

      1. gefunden 😉
        ich musste bei der fanpage noch in anwendungen -> meine anwendung -> reiter hinzufuegen

        war dort irgendwie nicht aktiviert.

  3. Aus dem Facebook-Hilfebereich:

    Warum kann ich keine Felder zu meiner Anwendung hinzufügen?
    Wir haben bestehende Felder entfernt, um die Navigation für Nutzer zu vereinfachen und die Komplexität für Entwickler zu reduzieren. Die Fähigkeit Felder zu erstellen wurde außerdem deaktiviert. Mehr dazu erfährst du in diesem Blogbeitrag. Updates zu unseren weiteren Plänen erhältst du in unseremBlog für Entwickler.

  4. Hallo,
    habe auch eine Frage, ich weiß echt nicht mehr weiter.

    In allen Browsern (Opera, Internet Explorer, Chrome, Safari) wird mein i-frame-Tab einwandfrei, ohne Scrollbalken, angezeigt. Nur im Firefox wird ein Scrollbalken hinzugefügt, ohne dass man mit diesem überhaupt scrollen kann weil die Seite komplett angezeigt wird. Habe ja auch die richtigen Größen. Selbst bei 700px Höhe ist er da. Und auch mit dem oben genannten html-Code ist der Scrollbalken da, obwohl es funktioniert und die Seite selbst bei höherer Länge als 800px dann noch vollständig angezeigt wird. Das Problem ist, dass er diesen Scrollbalken einfach auf die Seite einfügt und somit teilweise Bilder verdeckt.
    Was mache ich falsch, woran kann das liegen?

    Vielen vielen Dank im voraus
    Julian Brunke

    1. Das kann ich so nicht beurteilen. Allerdings berichten in letzter Zeit öfter Leser von solchen Problemen. Vielleicht wird da bei Facebook grade was geschraubt?

      1. Danke für die Antwort 🙂
        Ist natürlich ziemlich unpraktisch und auch ziemlich seltsam, weil es nur bei diesem Browser so ist. Nur ist es leider der meistgenutzte …

        Irgendetwas mache ich wohl falsch, weil es bei anderen Seiten nicht so ist, aber ich kenne mich leider nicht mit Programmierung aus.
        Mal abwarten…

  5. Hallo, vielen Dank für den Tipp mit der PHP-Endung. Hatte das selbe Problem und konnte es dank dieser Seite in 5 Min lösen 🙂

  6. Hallo Frau Schwindt,

    super Anleitung, ich habe dazu natürlich auch eine Frage.
    Kann ich diese Anwendung irgendwo administrieren, damit
    die Seite nur angezeigt wird, wenn sie „geliket“ wird?

    Bzw. ich möchte gerne eine Startseite für einen „fremden“ und
    wenn er die Seite liked, sollte eine weitere Seite erscheinen z.b. für ein Gewinnspiel.
    Ich hab das schon öfters bei größeren Firmen gesehen.

    Gruss
    Frank

  7. hallo zusammen,

    ich habe ein problem mit der höhe meiner iphrame-tabs.. wenn diese über die 800px hinausgehen, hilft die o.gen. lösung mit code-einbau nur teilweise. ie zeigt die seiten komplett an. in firefox wird die seite bie 800px „abgeschnitten“.. gibt es hier ein browserübergreifende lösung?

    btw: FB.Canvas.setAutoResize(true, 500); wird zum 1.1.2012 abgeschafft und muss durch FB.Canvas.setAutoGrow ersetzt werden, was bei mir aber im effekt nichts ändert..

    danke für tipps
    martin

      1. Ich hatte diesen Fehler auch, mit folgendem Code hat es funktioniert:

        FB.init({
        appId : ‚APP-ID‘,
        status : true,
        cookie : true,
        xfbml : true
        });
        FB.Canvas.setAutoGrow(true,500);

    1. Dieses Problem tritt ebenfalls häufig durch ein fehlerhaftes JavaScript in der Seite auf (entwickle selbst regelmäßig facebook-Apps). Ich würde diese ebenfalls mal kontrollieren, dann ist ein

      FB.Canvas.setAutoGrow(true,500); mit Parametern nicht nötig,

      FB.Canvas.setAutoGrow() reicht.

  8. Hi an Alle,

    Bis jetzt scheint es mir so als konnte in diesem Blog schon jedem geholfen werden – also versuche ich mal mein Glück!
    Ich habe ein (in allen Browsern) wunderbar funktionierendes iframe tab erstellt (es ist eine Seite mit html und css, soll also ein Reiter werden).
    Sowohl eine normale als auch eine SSL-Variante habe ich als Domains hinzugefügt.
    Doch – egal was ich mache – es geht einfach nicht!
    Ich bin zwar kein professioneller Web-Developer, aber ich habe die Seite mit html und einem css (in langwieriger arbeit) doch recht perfekt zusammengebastelt 😉

    Wenn ich fertig mit dem Angeben aller Daten beim Erstellen der Anwendung bin und anschliessend auf „Profilseite der Anwendung anzeigen“ klicke kommt immer die Selbe Fehlermeldung!

    -> „Die von dir angeforderte Seite konnte nicht gefunden werden.
    Du hast möglicherweise auf einen ungültigen Link geklickt oder die URL falsch eingegeben. Bei manchen Internetadressen wird zwischen Groß- und Kleinschreibung unterschieden.“ <-

    … und irgendwie kommt diese auch sooo arg schnell, dass ich vermute, dass es an meinen Angaben liegt… ?!
    … es scheint so, als würde er nicht mal versuchen auf irgendetwas zuzugreifen… ?! … puh! ich weiss es nicht :'-(

    Ich bin mir auch beim Eingeben der Daten nicht mehr wirklich 100%ig sicher, da alle Anleitungen und Turorials scheinbar älter sind als die aktuelle Eingabemaske ist!
    Was z. B. muss in das Feld "Anwendungsdomain" geschrieben werden?
    (ich habe alles versucht, gehe jedoch davon aus dass es die Domain meiner erstellten Seite ist)
    Egal was ich hier eingebe – wenn ich hier (wie gefordert) nach der Eingabe Enter drücke, läd der Browser kurz, läd die Seite neu und das Feld ist wieder leer 😀

    Bitte bitte liebe Leute, helft mir! 🙂
    Ich hab mir soviel Mühe gegeben und jetzt geht nichts… 🙁

    Ich danke Euch schon im Voraus!

    Grüße, Max.=

  9. Hallo Frau Schwindt,

    möchte mich zuerst einmal bedanken für die vielen hilfreichen Tips. Ich ahbe mir Ihre Buch gekauft, das hat mich sehr viel weitergebracht. Habe auch schon eine Seite auf Facebook für einen Freund gemacht („Bernshaus“ – bis jetzt nur das Impressum und den Reiter dazu, andere folgen.)
    Ich würde gerne noch eine Seite machen und zwar: wenn man auf den gefällt mir Button von facebook klickt, soll sich eine Gutscheinseite auftun. Aber nur einmal für denjenigen und ich möchte auch, dass dann meine Fananzahl dadurch höher steigt. Habe Sie da zufällig auch eine Beschreibung irgendwo stehen? Wäre Ihnen Dankbar für ein Feedback.

    Vile liebe Grüße
    Christa Saiko

    1. Dazu müssen Sie einen individuellen Reiter mit verschiedenen Inhalten für Nichtfans und fans anlegen (sog. Fan-Gating). Das erfordert aber fortgeschrittene Developer-Kenntnisse. Oder Sie verwenden eine Drittanwendung z.B. iframeWrapper oder Tabmaker von 247GRAD, dort ist das schon inklusive. Dann müssen Sie diesen reiter nur noch als Startreiter einrichten (Seitebearbeiten > Genehmigungen verwalten > Standard-Reiter).

  10. Hallo,
    ich habe jetzt alles versucht und komme nicht mehr weiter. Die erstellung von den tab und iFrame…alles nach ihren Anweisungen hat super geklappt. Ich möchte nun meine Webseite einfügen und es wird angezeigt das FB die Seite nicht findet (alles URL stimmen mit Sicherheit). Das Seltsame ist, eine andere Webseite ich ich gemacht habe (gleiches Programm) wird angezeigt.
    Gibt es hierfür eine Erklärung? Ich weiß nicht mehr weiter….muß ich im Programm irgend etwas einstellen damit FB es anzeigt?
    Mfg Christian

  11. ich verzweifel… die scrollbalken…
    ich bekomme sie einfach einfach einfach nicht weg. gibt es ein update für das script? bitte helft mir…

    1. Einfach folgendes Script ans Ende der Seite (VOR dem schließenden Body-Tag) einfügen:

      window.fbAsyncInit = function() {

      FB.init({
      appId : ‚APP_ID‘,
      status : true,
      cookie : true,
      oauth : true,
      xfbml : true
      });
      FB.Canvas.setAutoGrow();

      }; // End window.fbAsyncInit
      // Load the SDK Asynchronously
      (function(d){
      var js, id = ‚facebook-jssdk‘;
      if (d.getElementById(id)) {
      return;
      }
      js = d.createElement(’script‘);
      js.id = id;
      js.async = true;
      js.src = „//connect.facebook.net/de_DE/all.js“;
      d.getElementsByTagName(‚head‘)[0].appendChild(js);
      }(document));

  12. einfach folgendes Script direkt unter dem – Tag eingeben

    window.fbAsyncInit = function()
    {
    FB.init({appId: „APP-ID“, status: false, cookie: false,
    xfbml: false});
    FB.Canvas.setSize();
    };
    (function()
    {
    var ele = document.createElement(’script‘); ele.async = true;
    ele.src = document.location.protocol + ‚//connect.facebook.net/de_DE/all.js‘;
    document.getElementById(‚fb-root‘).appendChild(ele);
    }());

    funktioniert auf jeden Fall…ich hab es vorher auch nicht hinbekommen mit dem o.g. Skript…hab das dann hier bei facebook ausgelesen.

    viel spaß damit

  13. Ich habe die nötigen Anpassungen alle vorgenommen. Scrollbalken sind auch keine mehr da. Aber ich habe ein ganz anderes Problem mit dem Script: Nachdem die Seite geladen wurde, wird sie nach unten immer länger !? Und das in dem Takt der bei AutoGrow eingestellt ist (bei mir 1000). Der Scrollbalken der Browers wird kleine und kleiner… Schwer zu erklären, am besten ansehen: https://www.facebook.com/millingen.rheinberg/app_240543492633592

    Was ist denn da los?

    1. Ich nehme mal an, das liegt an den Skripten, die Sie im Contentbereich verwenden. Die eingebundene Seite selbst sieht webdesigntechnisch äußerst merkwürdig aus… Verwenden Sie valides HTML und ggf. CSS (oder direkt inline style).

      1. Das verwendete PHP-Skript ist nicht von mir. Ich versuche nur dieses Tipp-Spiel einzubinden. Das Design ist Baustelle… 😉
        Na dann werde ich mal weiter experimentieren…
        Danke 🙂

        1. Habe das Problem durch simples Probieren gelöst. Und zwar war im Stylesheet für das Element Body eine Höhe von 100% angegeben. Nachdem ich hier 90% eingetragen habe, taucht das Problem nicht mehr auf.

  14. besteht die möglichkeit einen reiter zu erstellen, diesen aber unsichtbar zu machen und den nur über die url anzuzeigen wenn man die direkt aufruft?

    also wenn ich jetzt zum beispiel einen inhalt anzeigen möchte der nur aufrufbar ist wenn jemand den link dazu kennst… geht sowas?

  15. Guten Tag Frau Schwindt,

    Sie haben mir durch Ihren Blog schon sehr viel geholfen – vielen Dank.
    Ich habe folgendes Problem:
    Meine Seite wird leider auf facebook nicht angezeigt.
    Habe folgende Fehlermeldung auf facebook:
    „Method Not Allowed Error 405“

    Hab das mit der .php Endung anstatt der .html Endung auch schon versucht. Leider erfolglos.

    Kann es damit zusammenhängen, das die Seite die ich auf facebook als Reiter anzeigen möchte (nämlich das Impressum) ein Blog ist?

    Vielen Dank im Voraus.

  16. Hallo Frau Schwindt,

    ich habe auf eine Facebook-Seite erfolgreich mehrere iFrame-Tabs eingebaut, die mit Firefox auch korrekt angezeigt werden. Wir haben jedoch zwei Rechner Zuhause, bei denen mit dem Internet Explorer nur leere Tabs angezeigt werden (einmal mit Windows XP, einmal mit Windows 7), auf allen anderen Rechnern läuft alles problemlos.
    Ist Ihnen solch ein Problem schon einmal begegnet und kennen Sie vielleicht die Ursache?
    Vielen Dank für Ihre Mithilfe!

    1. Woran das jetzt bei Ihnen konkret liegt, kann ich so ins Blaue nicht sagen, aber es ist bekannt, dass der Internet Explorer mit Facebook Probleme hat. Es könnte aber uach an irgendwelche Einstellungen liegen, das kann ich von hier nicht sehen. Wie ist es denn, wenn Sie einen vernünftigen Browser nutzen?

      1. Vielen Dank für Ihre Antwort!
        Wir benutzen eigentlich nur Firefox, aber wir wollen, dass auch die Leute, die den Internet Explorer verwenden, die Tabs sehen können.
        Wahrscheinlich liegt es in der Tat an einer Einstellung des Internet Explorers.
        Nochmals vielen Dank!

  17. Hallo Frau Schwindt

    wir hatten ja das Profil in eine Page umgewandelt und leider war kaum noch etwas machbar

    Nun ist meine Frau mit ihrem neu erstellten privaten account neben mir Manager der Page.
    Folgendes nun

    neue Administratoren können nicht eingesetzt werden

    aber viel schlimmer

    ich wollte mit Ihrer Anleitung ein Impressum einbinden – auf eigenem webspace

    alles wurde korrekt ausgefüllt, extra ssl bestellt

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

    diese Anwendung unterstützt die Einbindung in dein Profil nicht

    was nun ?

    normalerweilse müsste hier die Auswahl der einzubindenden Page kommen

    Die App wurde als Administrator erstellt – im Privaten Profil meiner Frau als Anwendung sichtbar – als admin sollte diese der Geschäftsseite zugefügt werden- – alles wurde fehlerlos geschluckt bis zu dieser Meldung

    Woran kann das liegen ?

    Lieben Dank im Voraus

    R.Eisinger

  18. Hallo Frau Schwindt,

    ich habe eine Frage, die sich auf den Scrollbalken in den iFrame-Tabs bezieht. Das einbinden des Scripts ist kein Problem. Der Scrollbalken verschwindet auch unter Firefox, IE, Opera & Safari… nur unter CHROME nicht. Die Versionen sind bei allen Browsern die neuesten. Woran könnte es liegen?

    Vielen Dank für Ihre Hilfe

    Phil

Kommentare sind geschlossen.