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.
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.
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
Hey Leute,
kann es sein das diese Funktion in Chrome nicht geht?!
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.
Tatsache :-)
Ich danke!
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.
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
[…] Scrollbalken in Facebook-iFrame-Tabs deaktivieren → […]
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 …
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?
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?
@Severin: Im IE sieht deine Seite auch nicht so dolle aus
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
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
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!
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
@Steffi: Hast du es mal in einem anderen Browser probiert? In welchem Browser bist du denn?
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
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. ;)