Wir haben natürlich nicht für alles eine Lösung. Aber an Problemen, über welche wir selber schon gestolpert sind, müssen sich andere ja nicht auch noch die Zähne ausbeissen.

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.

Grösse des iFrames automatisch anpassen

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.

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.

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

Pin It on Pinterest

Share This