Facebook: Neues Script für lange iframe-Tabs erforderlich

Facebook hat wieder mal was geändert und so funktioniert der bisherige Workaround zum Entfernen des Scrollbalkens und vollständigen Anzeigen von iframe-Tabs auf Facebook-Seiten jetzt leider nicht mehr. Den Scrollbalken entfernt es zwar weiterhin, aber der Reiter wird abgeschnitten angezeigt.

Ich gab die Frage an meine Leser weiter und erhielt sogleich folgende Lösung von Danny Trapp:

  • der body-tag wird künftig ohne overflow:hidden verwendet
  • man füge statt des alten fb-root scripts folgendes ein:

<div id=“fb-root“></div>
<script type=“text/javascript“>
window.fbAsyncInit = function() {
FB.init({
appId: ‚APP-ID‚,
status: true,
cookie: false,
xfbml: true
});
FB.Canvas.setSize({ width: 810, height: xxxxx });
};
(function() {
var e = document.createElement(’script‘);
e.async = true;
e.src = document.location.protocol +
‚//connect.facebook.net/de_DE/all.js‘;
document.getElementById(‚fb-root‘).appendChild(e);
}());
</script>

  • Bei APP-ID setzen Sie wie gewohnt die ID Ihrer eigenen App ein, mit der Sie Ihre page(s) in Facebook einbinden.
  • Mit der Pixelangabe der Höhe muss man ggf. etwas experimentieren, bis man den richtigen Wert hat.
  • Wichtig ist auch, dass man in den App-Settings im Developer-Bereich auf 810px Weite umschaltet (falls nicht ohnehin schon geschehen).

 Herzlichen Dank, Danny!

Das komplette (und hiermit aktualisierte) Tutorial zum Einbinden von eigenen Inhalten in Seitentabs bei Facebook finden Sie hier:

http://spr.li/iframe

oder auf Scribd:

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

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

16 Kommentare

  1. Statt dem „setSize“ Befehl kann man auch einfach …

    FB.Canvas.setAutoGrow();

    … verwenden. Dadurch passt sich der Frame immer der Größe an. Sonst müsste man ja immer die Höhe seiner eigenen Seite kennen. Daher hat sich aber auch eigentlich nichts geändert. Alles wie früher.

  2. Ich setz bei meinen aktuellen Projekten immer das hier ein. Funkt auch:

    window.fbAsyncInit = function() {
    FB.init({
    appId : ‚XXX‘, //Your facebook APP here
    cookie : true // enable cookies to allow the server to access the session
    });
    }

    window.onload = function() {
    FB.Canvas.setAutoGrow(91);
    }

  3. Im alten Skript stand die Methode FB.Canvas.setAutoResize(true, 500); die alle 500 Millisekunden die Höhe neu berechnet hat. Diese Methode ist anscheinend „deprecated“, jedenfalls ist die Doku-Seite nicht mehr abrufbar. Nachfolger ist FB.Canvas.setAutoGrow() mit der gleichen Syntax:
    https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/

    Ich habe im alten Skript nur setAutoResize() mit setAutoGrow() ersetzt, und das scheint zu funktionieren. Auf meiner „Startseite“ ist wenig Inhalt. Höhe des iFrame ist dann ca. 800px. Nach einem Klick auf die Seite „Homepage-Schule“ mit mehr Inhalt erscheint kurz ein Scrollbalken , dann wird die Seite neu berechnet und der Scrollbalken verschwindet.

    Ich habe nichtsdestotrotz erstmal overflow:hidden vom body entfernt und sämtliches JS von Facebook rausgenommen, denn ich habe ehrlich gesagt keine Lust, mich da wieder drum zu kümmern.

    Das Einfügen von längeren Inhalten auf FB-Seiten per iFrame-App ist so ziemlich das Umständlichste, was ich bisher beim Webseiten bauen bisher erlebt habe. Und das dann auch noch andauernd pflegen zu müssen, weil FB gerade mal wieder was ändert? Ach nö, dann man lieber mit Scrollbalken 😉

  4. Hallo Leute,

    Set auto size geht natürlich auch, allerdings macht das auf alten Browsern zicken (einer unseren Kunden setzt nach wie vor auf Internet Explorer 6….) und frisst auch Performance.
    Eigentlich ist ja unnötig, dass der Browser alle 100 oder 500ms die Höhe checkt. Die ändert sich ja i.d.R. nicht. Aber möglich sind beide Wege!

    Viele Grüße
    Danny

  5. Hallo,
    habe den o.g. Code in meine App eingefügt, aber bei meiner Tab-App funktioniert die Anpassung der Höhe einfach nicht.
    Habe mittlerweile zahlreiche identische Bugreports gefunden und die zahlreichen Lösungsvorschläge ausprobiert – auch das oben vorgeschlage window.onload() sowie FB.Canvas.setDoneLoading(), FB.Canvas.setSize() sowie setAutoGrow() mit und ohne Parameter: ich werde diese blöde Scrollbalken nicht los und Firebug meldet stoisch eine Höhe von 800px für den iframe.

    Hat vielleicht jemand einen Tipp?
    Vielen Dank im Voraus 🙂
    Chris

      1. Hallo Frau Schwindt,

        das PDF http://spr.li/iframe war eine meiner besten Quellen (danke dafür!) – habe alles genauso befolgt, wie es darin steht. Und trotzdem will es nicht. Habe über’s Wochenende nun zahllose Bug-Reports & Lösungsberichte durchprobiert, die iframe-Höhe bleibt bei 800px. Der Code an sich wäre ja super einfach – wenn er denn seinen Dienst tun würde…

        Also drehe ich die Frage mal um: kennt jemand eine Tab-App (keine Canvas-App) die höher als 800px ist und keinen Scrollbar hat? Das möchte ich nach all den Fehlerreports und den eigenen Erfahrungen am liebsten mit eigenen Augen sehen…

        Weder die Tab-App noch die Canvas-App reagieren auf Änderungen mit FB.Canvas.setSize(), FB.Canvas.setAutoGrow(), sizeChangeCallback(), window.onload() sowie FB.Canvas.setDoneLoading(). Die Höhe der Canvas-App (nicht der Tab-App) lässt sich einzig über die App-Einstellungen beeinflussen, das löst aber mein Tab-App-Problem nicht. Ich bin mit diesem „unlösbaren“ Scrollbalken-Problemen kein Einzelfall, irgendwo scheint es an einer versteckten Stelle zu haken.

        Wäre sehr dankbar über Hinweise auf funktionierende Bespiele,
        Chris

          1. Habe mittlerweile eine Lösung, die poste ich gleich noch – vielleicht haben ja andere auch das Problem…

            Für Canvas-Apps habe ich die Einstellungsmöglichkeit in der Einstellung-Box „App on Facebook“ gefunden (und es funktioniert auch) – aber für Tab-Apps trotz langer Suche auch außerhalb der Einstellungs-Box für Tab-Apps („Page Tabs“) nicht.
            Vielleicht ist das ein Feature, was wieder nur langsam für alle ausgerollt wird…wo sollte die Einstellungsmöglichkeit denn zu finden sein? Würde mich schon noch interessieren.

        1. Hallo,

          habe mittlerweile dank netter Unterstützung eine Lösung gefunden,
          Hoffe, dass diese anderen Scrollbar-Geplagten auch weiterhilft 🙂

          Funktioniert unter Windows, Mac, Android und iOS in allen Hauptbrowsern,
          bei Chrome und Internet Explorer müssen die Surfer allerdings die „unsicheren
          Inhalte“ zulassen, damit die Scrollbars verschwinden.

          Chris

          1. dazu in den App-Einstellungen in der Tab-App-Einstellungs-Box
          (>Settings >Basic >Page Tab) die „Page Tab Width“ auf „Normal (810px)“
          setzen.
          Habe an dieser Stelle (wo sie eigentlich hingehören würde, wenn es sie
          bei allen schon geben würde) leider keine Höhen-Einstellung, vielleicht
          haben die ja Andere schon als Rollout bekommen (s. Anwort von Frau
          Schwindt oben).

          2. Die folgenden Code-Snippets in die App-Seite einfügen
          („APP_ID“ natürlich durch die eigene ersetzen):

          window.fbAsyncInit = function() {
          FB.Canvas.setSize();
          }
          function sizeChangeCallback() {
          FB.Canvas.setSize();
          }

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

  6. Hallo Frau Schwindt,

    ich sitze gerade an einem iframe tab und bekomme ihn einfach mit Ihrer Anleitung nicht erstellt. Ansonsten hat das immer geklappt. Es hat sich einiges geändert, bzw. ist was hinzugekommen meine ich. Auf jeden Fall tritt bei mir immer folgende Fehlermeldung auf:

    Fehler
    You have disabled Facebook-Anmeldung in your app, but you must still specify Package Name or Key Hashes.

    Können Sie mir hierzu weiterhelfen? Ich finde dazu leider nirgends was.

    Viele Grüße und vielen Dank.

Kommentare sind geschlossen.