Static FBML / Cascading Style Sheets und der Microsoft Browser

Gastbeitrag von Martin Hairer

CSS ist heute das A und O um Static FBML Reiter hübsch zu gestalten. In etlichen Beispielen wie z. B. “Pimp my StaticFBML” wird das CSS als InsideCSS dargestellt.
Microsoft Internet Explorer 6/7 und auch die Version 8 unterstützen kein Inside CSS in StaticFBML. Was nun? Die Internet Explorer-User ignorieren? Nein, natürlich nicht, der FBML Reiter soll ja für alle nutzbar sein. Die Lösung lautet „External CSS“. Aber auch hier gilt es noch, das ein oder andere zu beachten.

Zwei Dinge sind notwendig:

Webspace für die CSS Datei.
Den Static FBML Reiter, in dem man das CSS verwenden möchte

Egal, ob du für das Hosting eine kostenpflichtige Webspace- oder eine Gratis-Variante wählst. Es kann problemlos auf Dienste wie Googlesites zurückgegriffen werden.

Schritt für Schritt

Erstelle die CSS Datei “style.css” und öffne sie in einem Editor.

Der Inhalte der CSS Datei kann wie folgt aussehen:

@charset "UTF-8";
 
#testID{
width: 406px;
height: 375px;
}
.testTAG {
width: 406px;
height: 375px;
}

Einfach dein aktuelles CSS rein kopieren.

Bereitstellung der CSS Datei am Webspace (z. B. FTP upload)

Einbindung in den StaticFBML Reiter:

E-Mail – <a href="http://www.facebook.com/mhairer" target="_new">Facebook</a> – <a href="https://www.xing.com/profile/Martin_Hairer" target="_new">XING</a> – <a href="http://www.unplugged-network.at" target="_new">http://www.unplugged-network.at</a>

Über den Autor:

Gastautor: Dieser Beitrag wurde von einem Gastautor erstellt (siehe Verweis im Beitrag). Wir sind laufend auf der Suche nach neuen Gastautoren die ihre Expertise in einem Themengebiet bei uns diskutieren und veröffentlichen wollen. Wenn du auch Lust hast bei uns im Blog einen Beitrag zu veröffentlichen kannst du dich einfach bei uns melden. Mehr...

Christopher Pohl (via facebook) says:
September 20th, 2010 at 13:24

@facebookmarketing: Keine andere Antwort habe ich erwartet aber ich verstehe immer nicht, wie man eine Webseite unfertig launcht. Das ist ja wie, als wenn ich nen Auto auf den Markt bringe, wo die Sitze fehlen. Dann lieber noch ein paar Wochen warten…

yos says:
September 20th, 2010 at 14:22

danke für den tip. wusste garnicht, dass es im IE nicht geht. aber euer trick funktioniert auch nicht richtig. wenn ich nur eine externe css verwende, dann funktioniert es auf keinem browser. wenn ich inline und extern benutze dann geht es, dann wird mir aber die inline css als text auf der seite ausgegeben. sehr komische geschichte.

Robert Böhme (via facebook) says:
September 20th, 2010 at 14:37

… und ich dachte schon mein Laptop spinnt

Martin says:
September 30th, 2010 at 15:03

Punkt 4 (Einbindung in den StaticFMBL Reiter) ist wohl als Scherz gedacht. Hier gibt’s kompetente Info:
http://www.facebook.com/note.php?note_id=453819270843

Frank says:
November 14th, 2010 at 18:55

Hallo,
vielen Dank für den TIP, habe nun das css extern angebunden, natürlich nicht wie in Tip4 gezeigt, sondern ordentlich, wie Martin auch schon aufgezeigt hat.
Dass funzt einfach Prima, bin begeistert

facebookmarketing.de | So geht’s: Funktionierender Like Button in Static-FBML Tabs says:
Januar 5th, 2011 at 13:19

[...] haben wir die Kommentarbox mit allem drum und dran. Mit ein wenig CSS entfernen wir nun alle Elemente die wir hiervon nicht wollen. Im StyleSheet sind dazu die folgenden [...]