Facebook, iFrames, HTML5 und der liebe IE

Bei dem aktuellen Projekt, welches eine Implementierung einer Facebook App war, gab es allerhand Hürden zu nehmen. Zum einen finde ich die Dokumentation der Facebook API stellenweise immer noch dürftig, zum Anderen ändert Sie sich auch relativ häufig, was manch Hilfestellungen, die man per Google findet, schon wieder veraltet sind, selbst, wenn sie aus dem Jahr 2010 stammen.

Nachdem ich mich auf diversen Seiten eingelesen habe konnte ich schließlich die kleine Bewerbungsseite für unseren Kunden als App auf Facebook erstellen. Seitdem Tabs auf Facebook-Fanseiten und Apps prinzipiell als iFrame realisiert werden und dort eigentlich zumindest Serverseitig nahezu alles möglich ist, was auch auf einer eigenen Seite umgesetzt werden kann, faktisch läuft es ja in einer eigenen Umgebung, ist es um einiges einfacher geworden. Vor ca. 2 Jahren, bei meinem ersten Versuch, mich mit dem Thema auseinander zu setzen, fand ich mehr Probleme und vor allem Einschränkungen vor.

Jedenfalls kam ich auf die Idee, als Grundgerüst für die View auf HTML5 zu setzen, dank Boilerplate ist das ja kein großes Problem mehr, wenn es um die Crossbrowser-Kompatibilität geht. Na ja, nach kurzer Zeit sah das ganze ja auch gut aus, dachte ich. In den bevorzugten Browsern (Chrome und Firefox) sah das ganze wie gewünscht aus, aber der Internet Explorer in Versionen kleiner als 9 spielte nicht mit. Haben der IE7 und der IE8 eigentlich mit nativen HTML5 Seiten danke Boilerplate keine Probleme (siehe www.nissan-in-berlin.de), stellte sich bei der Facebook-App heraus, dass hier die HTML5 Elemente im verwendeten iFrame nicht mehr interpretiert wurden. Der IE9 zeigte dieses Verhalten nicht. Letzten Endes musste ich alle section, article, aside (und viele mehr) Elemente wieder entfernen und durch Divs mit aussagekräftigen IDs versehen.

NISSAN Fame by Frame APP

eine von mehreren Bewerbungsseiten der Fame by Frame Aktiob

Merke: Bei Facebook Applikations lieber noch auf XHTML1.0 oder HTML4.01 setzen.