Die selbständige Webdesignerin Alexandra Steiner aus Wien ist einer der Netzwerkpartner von schwindt-pr. Kürzlich zeigte mir Alexandra folgenden Weg zur Einbindung eines eigenen CSS in einen FBML-Reiter auf Facebook. Ich bat sie daraufhin, diesen in einem Gastbeitrag kurz zu erläutern:
Nichts ist schlimmer, als ein unüberschaubarer Quelltext. Gerne hätte ich eine einfachere Variante genutzt, doch leider lassen sich in FBML-Reitern weder iframes noch externe Stylesheets über JavaScript einbinden. Die im folgenden erläuterte Vorgehenseweise scheint also die einzige Möglichkeit zu sein, statische Seiten mittels CSS und HTML darzustellen.
Mit dieser Möglichkeit bleibt der CSS-Teil schlank und unübersichtliche CSS-Deklaration für jedes einzelne Element sind nicht nötig. Somit bleibt der Quelltext übersichtlich und aufgeräumt.
Um den Quelltext innerhalb des FBML-divs zu entschlacken sollte man Folgendes tun:
<style>
<!–
Element {Eigenschaft:Wert; …}
–>
</style>
Danach folgt der übliche HTML-Part.
Innerhalb von <style> … </style> kann man nun problemlos Klassen, ids und Elemente deklarieren. Im HTML-Part werden wie gehabt die Klassen oder ids aufgerufen.
Hier ein kleines Beispiel:
<div>
<h1>FBML als praktische Werbeplattform</h1>
<p>Fbml ist die neue und unkomplizierte Art sein Unternehmen noch effizienter zu präsentieren.</p>
<p><a href=“#“>Werden Sie Fan!</a></p>
</div>
<style>
<!–
div {background:url(http://www.deinewebseite.at/images/bla.gif) top center #fff;}
h1 {color: green; font-size: 25px;}
p {color: red; font-size: 14px;}
a {color: black; text-decoraiton: underline;}
–>
</style>
Der Einfachheit halber sollte man den gesamten CSS-Teil am Ende des HTML-Teil stellen. Das hat den Vorteil, dass man sich keinen Wolf scrollen muss, um die Inhalte zu bearbeiten. Erfahrungsgemäß arbeitet man öfter an den Inhalten als an der CSS.
Empfehlenswert ist es, sowohl den HTML-Part als auch den CSS-Part extern vorzubereiten, also nicht direkt in die FBML-Box reinzuschreiben. Es ist einfach gemütlicher, beide Teile in einem HTML-Editor zu erstellen. Somit vermeidet man Fehlerquellen und muss nicht unnötig rumdoktern. Zumal das FBML-Formularfeld nicht sehr nutzerfreundlich gestaltet wurde.
Erwähnt sei auch, dass komplexe CSS-Strukturen nicht umsetzbar sind. Daher sollte man auf verschachtelte divs verzichten. Hier empfehle ich ausnahmsweise Tabellenkonstrukte – in der konventionellen Webseitengestaltung würde ich diese Technik nicht anwenden. Da ja Facebook an sich schon keinen Wert auf Validität und Barrierefreiheit legt, kann man auch alle beiden Augen zudrücken. Hier geht es wirklich nur um das optische Darstellen und nicht unmittelbar um Barrierefreiheit, Validität oder gar Benutzerfreundlichkeit… Facebook hat viele Möglichkeiten unterbunden, um zu tiefes Eingreifen in den Code zu verhindern. Ob das gut oder schlecht ist, sei mal dahingestellt.
Die ersten Fans haben dies auch schon 
Vor Kurzem hatte ich hier im Blog eine 
