Die iframe-Tabs von Facebook haben eine Begrenzung von maximal 800 Pixeln Höhe. Sobald der Inhalt der Seite, die ihr per iframe-Tab integriert, höher als diese 800 Pixel ist, schneidet Facebook den Inhalt ab und bindet einen Scrollbalken ein. Es entsteht also für gewöhnlich eine sehr benutzerunfreundliche Seite mit zwei verschiedenen Scrollbalken: Einem im iframe und einem im Browserfenster.
Mit folgendem Code-Snippet könnt ihr den Scroller entfernen und Facebook zwingen die volle Höhe der Seite anzuzeigen.

Scrollbalken deaktivieren

Alles was ihr benötigt um den Scroller auszublenden, ist folgendes Code-Snippet und die Application-ID eures iframe-Tabs. Die App-ID findet Ihr unter folgender Adresse: facebook.com/developers/apps.php

Kopiert folgendes Snippet in Eure HTML- bzw. PHP- Seite direkt hinter den öffnenden body-Tag:


<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: 'XXXXXXXXXXXXXXXXXXXXXXX',
status: true,
cookie: false,
xfbml: true
});
FB.Canvas.setSize({ width: 810, height: XXXXXXX });
};
(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>

Vergesst nicht, die App-ID eures Tabs einzutragen und die Höhe anzupassen. Anschließend könnt Ihr die Datei hochladen. Der Scrollbar sollte nun verschwunden sein.

Update:

Facebook hat den Code zur Entfernung von Scrollbalken zum 1. Januar 2012 verändert. Der oben abgebildete Code enthält jedoch bereits die Neuerungen. Details zu diesem Update könnt ihr auf AllFacebook nachlesen.

Update 2:

Facebook hat im August 2012 das Snippet erneut verändert. Das alte Script funktioniert nichtmehr und muss ausgetauscht werden. Das Snippet in diesem Beitrag ist bereits das neue, funktionsfähige Snippet.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 18 Kommentare

  1. Phil
    schrieb am 04.03.2013 um 15:42 Uhr:

    Servus,

    sorry, wenn ich das ganze nochmal aktiviere, aber ich habe leider das gleiche Problem mit dem Script wie Christian. Der Scrollbalken verschwindet bei Chrome nicht, bei Firefox, Opera, Safari & IE jedoch schon. Woran könnte es liegen?

    Danke für eure Antworten

    Antworten
  2. christian
    schrieb am 04.09.2012 um 10:29 Uhr:

    Hey Leute,
    kann es sein das diese Funktion in Chrome nicht geht?!

    Antworten
    • Jonas Hellwig
      schrieb am 04.09.2012 um 10:54 Uhr:

      Hallo Christian. Bei mir funktioniert der Code im Chrome. Probier bitte mal diesen Link: https://www.facebook.com/kulturbanause.de/app_300031096743782 hier ist das Snippet im Einsatz.

      Antworten
      • christian
        schrieb am 04.09.2012 um 13:31 Uhr:

        Tatsache :-)
        Ich danke!

      • Ronny Roger
        schrieb am 02.12.2012 um 18:45 Uhr:

        Mmhhh, ich hab‘ da jetzt das Scripten von akamaihd.net erlaubt, nachdem mir vorher null iframe angezeigt worden war, aber jetzt heisst es

        Dieser Verbindung wird nicht vertraut

        Sie haben Firefox angewiesen, eine gesicherte Verbindung zu facebook.kulturbanause.de aufzubauen, es kann aber nicht überprüft werden, ob die Verbindung sicher ist.

        Direkt über die Tabs, also ohne „s“, ist alles fein.

  3. Sven
    schrieb am 23.08.2012 um 08:50 Uhr:

    Hallo Jonas,

    setSize() setzt eine feste Höhe.
    Facebook hat vorher die Methode setAutoResize angeboten um automatisch die richtige Höhe des Containers zu nutzen. Da diese Funktion von Facebook inzwischen in den Ruhezustand versetzt wurde soll nun setAutoGrow genutzt werden. Diese Funktion sollte dat gleiche machen wie setAutoResize.

    Gruß
    Sven

    Antworten
  4. Höhe von Facebook iframe-Tabs anpassen | kulturbanause blog
    schrieb am 17.08.2012 um 10:08 Uhr:

    […] Scrollbalken in Facebook-iFrame-Tabs deaktivieren → […]

    Antworten
  5. Georg
    schrieb am 13.03.2012 um 12:39 Uhr:

    Jetzt habe ich doch auch mal ne Frage – sind in dem div fb-root irgendwelche Style-Anweisungen enthalten, die den Text betreffen? Mir zerschießt es die line-height bei meinem Fließtext … sehr komisch …

    Antworten
  6. bono
    schrieb am 10.02.2012 um 13:00 Uhr:

    ich versteh das nicht wie ich das machen soll. ich nutze keine apps bei facebook. hab meinen pc formatiert und neu aufgesetzt und jetzt hab ich diese scrollbalken. hab vorher auch nichts genutzt :( kann mir vielleicht jemand helfen?

    Antworten
  7. ropo
    schrieb am 15.11.2011 um 12:10 Uhr:

    Was hier noch fehlt ist was man unter https://developers.facebook.com/apps unter Einstellungen – Fortgeschritten bei Canvas-Width und Canvas-Height einstellt. Oder ist das egal?

    Antworten
  8. ropo
    schrieb am 15.11.2011 um 12:07 Uhr:

    @Severin: Im IE sieht deine Seite auch nicht so dolle aus

    Antworten
  9. Severin
    schrieb am 03.11.2011 um 16:44 Uhr:

    Ist euch auch schon aufgefallen dass der Firefox (MAC) die Scrollbalken dennoch anzeigt? Hier mal ein Sample: https://www.facebook.com/pages/Ausbildung-mit-Spastik-K%C3%B6rperbehinderung-BBW-im-ICP-M%C3%BCnchen/232601833438727?sk=app_172506946171835

    Antworten
  10. Stephen
    schrieb am 23.07.2011 um 20:49 Uhr:

    Hi,

    ich habe es nochmal etwas anders gelöst:

    window.fbAsyncInit = function()
    {
    FB.init({appId: 'deine app-id', status: false, cookie: false,
    xfbml: false});

    FB.Canvas.setSize();
    };

    (function()
    {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
    }());

    Drei Unterschiede:
    – Ich benutze die async-Variante
    – Statt setAutoResize verwende ich nur setSize()
    – Die Variablen status, cookie und xfbml habe ich auf false gesetzt

    Effekte:
    – setAutoResize wird im Hintergrund immer wieder aufgerufen und macht den Browser langsamer, setSize dagegen nur einmal
    – Wenn man die Variablen auf true lässt, dauert is im Firefox etwa eine Sekunde, bis die Scrollbar verschwunden ist. Setzt man sie auf false, geht das deutlich schneller

    Gruß
    Stephen

    Antworten
  11. Christian Weiss
    schrieb am 29.06.2011 um 14:24 Uhr:

    Hallo Jonas!

    Herzlichen Dank für den Tipp, der mir sehr weitergeholfen hat. In manchen Fällen reichen 800px eben nicht ganz aus ;-) Dank Deines snipets passt jetzt wieder alles. Nochmals Danke dafür!

    Antworten
  12. Steffi
    schrieb am 17.06.2011 um 09:52 Uhr:

    Hi Jonas,

    ich habe mir den code kopiert und hinter den befehl gesetzt, die app ID geändert und trotz allem sind noch scrollbalken zu sehen.

    hats du eine idee, wo eine mögliche fehlerquelle liegen kann?

    MfG Steffi

    Antworten
    • Jonas Hellwig
      schrieb am 17.06.2011 um 21:35 Uhr:

      @Steffi: Hast du es mal in einem anderen Browser probiert? In welchem Browser bist du denn?

      Antworten
  13. Stephan
    schrieb am 04.05.2011 um 09:09 Uhr:

    Hallo Jonas, danke für den Supertipp. Das hilft mir ungemein weiter, da ich gerade versuche einen Seiteninhalt in 800 Pixel zu „quetschen“, was mir nicht so richtig gelingt. Ich hoffe, dass mir das weiter hilft.

    Gruß Stephan

    Antworten
  14. Nik
    schrieb am 04.05.2011 um 08:02 Uhr:

    Ebenfalls ist es noch empfehlenswert den body ber CSS auf overflow:hidden zu setzen. Darüber hinaus sollte der Content nicht über 800Px hoch sein, da es wohl im IE9 zu Fehlern kommen könnte. ;)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →