Seit Facebook sich langsam aber sicher von der alten FBML „Sprache“  für Apps verabschiedet und auf iFrames setzt, ist vieles leichter geworden. Bei der Einbindung einer iFrame App allerdings kann es dazu kommen, dass Scrollbalken innerhalb der Facebook Landing Page entstehen/angezeigt werden, in die die App eingebettet ist.

Das, so könnte man denken, lässt sich in den Einstellungen der App regeln, wenn man die Option „Größe automatisch anpassen“ beim Punkt „iFrame Größe“ aktiviert, zumal der danebenliegende Radio Button mit „Show Scrollbars“ ja genau das ausdrückt, was man eben nicht will – Scrollbalken anzeigen, wenn die eingebettete iFrame App mal ein bisschen länger ist. Ist man damit also schon gut bedient?

Wie man Scrollbalken bei einer Facebook iFrame App entfernt

Leider hat die Auswahl der Option „Größe automatisch anpassen“ keine Auswirkungen, wenn man nicht auch einen kleinen Schnipel Javascript Code in seiner App verbaut (was für allem für Einsteiger nicht sofort zwingen ersichtlich ist). Die Einstellungen in der App weisen darauf hin – zwar etwas kleingedruckt, aber immerhin: „Choose ‚Auto-resize‘ (‚Größe automatisch anpassen‘, Anm. d. Red.) if you are using FB.Canvas.setAutoResize in your iframe app and want the Canvas iframe to grow to the height of your app’s content.

Damit also der iFrames der Canvas Seite mit der Höhe des Inhalts in der eigentlichen App „mitziehen“ kann und es KEINE Scrollbalken gibt, braucht man das schon erwähnte Stücken Javascript Code, das wir hier nachfolgend zur Verfügung stellen wollen:

<div id=“fb-root“></div>
<script>
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
};
(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>