Static FBML-Reiter und der Internet Explorer…

UPDATE März 2011: FBML-Reiter sind hinfällig. Das Einbinden individueller Inhalte, sollte jetzt über iframe-Tabs gelöst werden. Siehe http://dewww.schwindt-pr.com/2011/03/04/facebook-iframetabs/

Wenn Sie Ihre FBML-Reiter wie bisher im Static FBML-Tutorial von mir und Alexandra Steiner beschrieben mit <style type=“text/css“> eingebunden hatten, werden Sie feststellen, dass der Internet Explorer aufgehört hat, das richtig umzusetzen (Abhilfe gibt es weiter unten in diesem Blogpost):

So sollte es aussehen (Firefox, Opera, Safari, Chrome verstehen es auch richtig):

Das ist, was der ie damit macht:

Dank folgenden Kommentars von August Florian Golser zur Diskussion über dieses Phänomen auf der Fanseite von schwindt-pr konnte ich das Problem schnell beheben:

Wenn Sie Ihre Reiter also bisher mit <style type=“text/css“> layoutet hatten, tun Sie einfach Folgendes:

  1. Erstellen Sie eine .css-Datei mit dem Inhalt, der sich bislang zwischen <style type=“text/css“><!– und –> </style> befunden hat und laden Sie diese auf den Server Ihrer regulären Website hoch.
  2. Löschen Sie im Code in Ihrem Static FBML-Reiter die Stilbefehle von <style type=“text/css“><!– bis einschließlich  –> </style>
  3. Setzen Sie statt dessen <link rel=“stylesheet“ type=“text/css“ href=“http://www.URLihrercssdatei.css“> als erste Zeile in den Code Ihre individuellen Reiters und speichern Sie das Ganze in Facebook ab.

Jetzt sollte auch der Internet Explorer Ihre Inhalte richtig anzeigen.

Deshalb haben wir das Static FBML-Tutorial an die neuen Bedingungen angepasst!
HIER KOSTENLOS DOWNLOADEN

Wer seine Stilbefehle übrigens inline (also z.B. <p style=“…“>) angegeben hat, braucht nichts zu ändern. Ist auch ein gangbarer (wenn auch umständlicher) Weg, wenn man die CSS-Datei nicht mal eben auf einen externen Server auslagern kann. Inline versteht sogar der Internet Explorer… 😉

Annette Schwindt
hat sich inzwischen als "schwindt-pr" verabschiedet und bloggt jetzt unter annetteschwindt.de.

11 Kommentare

  1. Funktioniert bestens. Vielleicht sollte man noch erwähnen, daß die CSS-Datei dann Traffic auf dem eigenen Webspace erzeugt. Das wird aber erst bei großen Zugriffszahlen auf die Facebookseite relevant.

  2. Gute Zusammenstellung! Wie gesagt sollte man ev. noch erwähnen, dass der link-Tag gleich die erste Zeile in der FBML-Box sein sollte und man den kompletten Pfad zur CSS-Datei (inkl. „http://www“) verwenden muss.

    Bzgl. Traffic: Ist kein Problem, da Facebook die Datei einmal (!) herunterlädt und dann immer die Daten vom Facebook-Server verwendet.
    Das führt sogar zu dem „Problem“, dass eine Änderung der CSS-Datei zu keiner Veränderung der Inhalte führt, außer wenn man explizit darauf hinweist, dass es jetzt Veränderungen gibt. Beispielsweise durch Anhängen eines Parameters wie z.B.

    Beim nächsten Update „?v=1.02“ usw.

    Pixelige Grüße aus Tirol 😉

    1. Vielen lieben Dank für die Ergänzungen, die werde ich gleich nachreichen. Das mit den nachträglichen Änderungen ist mir auch schon aufgefallen. Da hilft aber auch: css-Datei neu benamsen.

  3. Danke für die tollen Tipps rund um FB Fanpages. Bis gestern war das noch relatives Neuland und heute habe ich bereits eine eigene Fanseite.

    Was mir allerdings aufgefallen ist, ist dass die Einbindung eines externen Stylesheets, wie von Ihnen beschrieben nicht funktioniert. Einzig die Verwendung von Inline CSS funktioniert bowserübergreifend. Das PDF Handbuch verwendet übrigens noch die Schreibweise das CSS in den Reiter zu schreiben (), die im IE auch nicht funltioniert.

    Und komischerweise funktionieren z.B. abgerundete Ecken weder in Safari noch in Chrome, sondern einzig im FF (natürlich ist das CSS korrekt geschrieben ;-))

  4. Hallo,

    also ich habs mit divs ganz gut hinbekommen.
    Noch ein Tipp, das ganze in % schreiben,
    weil Facebook auch in Prozenten geschrieben ist und
    bei einer kleineren Auflösung die ganze Facebookseite
    zerrissen wird.

    Schönen Gruß
    Jochen

Kommentare sind geschlossen.