Facebook Custom Tabs: Iframes wieder mit Scrollbars

Seit ein paar Tagen werden Iframes mit Scrollbars angezeigt, obwohl der HTML Code tunlichst das Limit von 520px nicht überschreitet.Das Problem ist daß Facebook die eigene JavaScript-Bibliothek verändert hat und der Code im „fb-root“ Element ein Objekt hat welches breiter ist als 520px. Die Lösung ist, das fb-root-Element auf unsichtbar (display:none) zu setzen.

Somit gilt ab sofort um die Scrollbars bei Custom Tabs weg zu bekommen:

1) Im Header folgenden Code benutzen:

<script type="text/javascript">// <![CDATA[
// get rid of facebook scollbars!
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
function sizeChangeCallback() {
FB.Canvas.setSize();
}
// ]]></script>

2) und irgendwo am Ende der Seite die EInbindung der Facebook Lib:

<div id="fb-root" style="display:none;"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId : "<your app id>",
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoResize();
</script>

Advertisements

Eine Antwort zu “Facebook Custom Tabs: Iframes wieder mit Scrollbars

  1. danke, danke, danke! es hat mich die letzten nerven gekostet diese blöde scrollbars wegzubekommen und das war die lösung!

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s