Seit kurzem hat Facebook die Implementation von iFrames in Reitern/Tabs vorgestellt. Diese werden wohl über kurz oder lang die bisherige Methode mit FBML (Facebook Markup Language) ablösen. Wie man eine solche iFrame Anwendung erstellt und mit einer Seite verbindet, haben wir bereits in einer dreiteiligen Serie „Fanseiten-Tabs mit einer iFrame Anwendung erstellen“ beschrieben.
Das Problem mit den unschönen Scrollbalken
Wer sich mit iFrames in Facebook-Seiten beschäftigt, wird früher oder später auf das Problem stossen, dass die iFrames mit störenden Scrollbalken ergänzt werden. Ein iFrame kann normalerweise eine Breite von 520 Pixeln haben, ohne dass horizontale Scrollbalken entstehen. Auch in der Höhe gibt es eine Beschränkung – diese liegt standardmässig bei 800 Pixeln. Ist also der Inhalt des iFrames höher als diese 800 Pixel werden automatisch vertikale Scrollbalken hinzugefügt. Dieser Scrollbalken braucht natürlich ebenfalls Platz (ungefähr 2o Pixel, je nach Browser). Dies wiederum kann dazu führen, dass die geplante Breite von 520 Pixel ebenfalls nicht ausreicht, und deshalb auch noch horizontale Scrollbalken eingeblendet werden.
Diese Scrollbalken sehen nicht schön aus, und wären eigentlich gar nicht nötig, würde sich der Inhalt des iFrames einfach beliebig nach unten erstrecken.
Die Lösung – ein wenig Code und die Scrollbalken verschwinden
Um Facebook dazu zu bringen, die Höhe des iFrames dem Inhalt anzupassen und damit die unschönen Scrollbalken zu verhindern gibt es eine relativ einfache Lösung, welche kleine Anpassungen an drei verschiedenen Stellen benötigt.
1. In der iFrame Anwendung
Als erstes muss der Anwendung mitgeteilt werden, dass sich die Grösse des iFrames automatisch anpassen soll. Diese Einstellung findet man unter dem Link http://www.facebook.com/developers/, indem man auf der rechten Seite auf die entsprechende Anwendung klickt und dann „Einstellungen bearbeiten“ auswählt. Unter „Facebook-Einbindung“ findet man unter der Rubrik „Canvas“ ymlp243.net die folgende Option, welche man auf „Grösse automatisch anpassen“ setzt.
2. In der CSS-Datei
Als zweites werden im CSS-File der erstellten Webseite die zwei Tags html und body mit overflow:hidden; definiert. Diese Anweisungen können natürlich auch direkt per Inline-Style im HTML-File selbst definiert werden.
html, body {
overflow:hidden;
} 3. In der HTML-Datei
Die letzte Anpassung muss in der HTML-Datei (oder wenn es sich um eine PHP-Datei handelt, in dieser) vorgenommen werden. Der body-Bereich der Datei wird dabei folgendermassen geändert.
<body>
<!-- Hier kommt der normale Inhalt des iFrame hinein -->
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
//Der folgende Code ändert die Grösse des iFrames alle 100ms
FB.Canvas.setAutoResize(100);
};
(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);
}());
</script>
</body>Mit diesen drei Anpassungen wird die Höhe des iFrames immer dem aktuellen Inhalt angepasst, was dazu führt, dass die lästigen Scrollbalken nicht mehr erscheinen.
Quelle: How-to: Removing facebook Application i-frame scrollabars von Clockwork coder
hallo,
erstmal: vielen Dank, dass ihr die Inhalte zu facebook apps usw. hier auf deutsch zur verfügung stellt.
meine frage: ich hab mir eine kleine seite mit kompoZer erstellt und auch als app in facebook integriert. leider gibt es einen senkrechten scrollbalken – ich hab versucht, das oben angebene umzusetzen – nur leider stell ich mich ein bißchen doof an…
und zwar: ich hab nur eine index.html und kein css-file.
wo füge ich denn dann html, body {overflow:hidden;} ein? und an welcher stelle genau in der html-datei füge ich das andere og. ein?
für eine antwort wäre ich sehr dankbar!
mfg
natalie
Hi natalie,
falls deine Frage noch aktuell ist, du fügst den Code im Bereich der HTML-Datei ein:
Grüße
Mike
Na dass mit dem Code hat irgendwie nicht geklappt, auch ziemlich seltsam…
Jedenfalls im Head-Bereich der Seite also noch vor dem Body.
Es gab schon öfters Probleme mit dem Kopieren des Codes. Scheinbar werden die Anführungs- und Schlusszeichen in solche umgewandelt, welche nicht mehr interpretiert werden können. Deshalb vielleicht einmal testen, ob es funktioniert, wenn du diese Zeichen löschst und von Hand nochmals reinschreibst… vielleicht liegts ja daran.
Guter Beitrag,
allerdings – für den unbedarften User – wo genau mss in der index.php das Schnipsel eingebaut werden
MfG GF
Eine html-, wie auch eine php-Datei verfügt über ein öffnendes body tag und ein schliessendes body tag . Der gesamte Codeschnipsel kommt gerade vor dem schliessenden body tag hin – also so ziemlich am schluss der Datei.
Freundliche Grüsse Christoph Walter
perfekt, Danke hat Supi funktioniert…
vielen Dank hat super funktioniert!
100% ….. Vielen Dank !
Funktioniert perfekt, danke!
Aus welchem Grund auch immer werden meine Seiten plötzlich nur noch zur Hälfte angezeigt, irgendwelche Ideen warum das jetzt auf einmal nicht mehr funktioniert?
bei einer neu erstellten Applikation lief es bis gestern noch ohne Probleme. Ohne das ich etwas verändert habe, stellt sich mir nun das gleiche Problem wie Christian – kann irgendwer in dieser Sache helfen?