kulturbanause Blog

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

Scrollbalken in Facebook-iFrame-Tabs deaktivieren

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

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.

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!

Das könnte dich auch interessieren

17 Kommentare

  1. Nik

    Verfasst am 4. Mai 2011 um 8: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. ;)

  2. Stephan

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

  3. Steffi

    Verfasst am 17. Juni 2011 um 9: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

    • Jonas Hellwig

      Verfasst am 17. Juni 2011 um 21:35 Uhr.

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

  4. Christian Weiss

    Verfasst am 29. Juni 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!

  5. Stephen

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

  6. Severin

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

  7. ropo

    Verfasst am 15. November 2011 um 12:07 Uhr.

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

  8. ropo

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

  9. bono

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

  10. Georg

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

  11. Sven

    Verfasst am 23. August 2012 um 8: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

  12. christian

    Verfasst am 4. September 2012 um 10:29 Uhr.

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

    • Jonas Hellwig

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

      • christian

        Verfasst am 4. September 2012 um 13:31 Uhr.

        Tatsache :-)
        Ich danke!

      • Ronny Roger

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

  13. Phil

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

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.