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 & Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug.
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
18 Kommentare
Schreibe einen Kommentar zu Sven Antworten abbrechen
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. ;)
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
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?
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!
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
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
ropo
Verfasst am 15. November 2011 um 12:07 Uhr.
@Severin: Im IE sieht deine Seite auch nicht so dolle aus
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?
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?
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 …
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
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
Direkt über die Tabs, also ohne „s“, ist alles fein.
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