Facebook-Fanseiten: Einbinden von CSS in FBML-Reiter

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/

*

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.

*

Static FBML-Tutorial für individuelle Fanseiten-Reiter (pdf, 910kb)
von Annette Schwindt und Alexandra Steiner

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

35 Kommentare

  1. Gestern bin ich mit ein paar Geeks zusammen gesessen und haben auch über FBML diskutiert. Dabei hat mir eine Kollegin die Developer-Seite von Facebook gezeigt. Unter anderem findet man das zahlreiche Tipps und Tricks zur FBML-Gestaltung.

    Was ich auch gefunden habe ist Folgendes:

    „Embedding server-side
    FBML does not allow the usage of the link tag (now in beta!). It also removes all @ rules in the CSS.
    If your CSS rules are contained in the file style.css, then in PHP you could include the document with this code: (PHP)

    This improves the readability of your code, and also allows you to open the CSS file in your favorite editor. There are several other ways to achieve the same thing. “

    http://wiki.developers.facebook.com/index.php/Main_Page

    Ich habs noch nicht ausprobiert, werds aber gleich machen und dann bescheid geben, ob nicht diese Variante fast noch die Schönste ist. Hierbei werde ich auch noch in allen gängigen Browsern testen, obs die auch mitmachen.

    Stay tuned …

  2. Achherjeh!! Das klappt doch!!

    Also, ganz wichtig:

    <link rel=“stylesheet“ type=“text/css“ href=“styling.css“ media=“screen“ />

    Diesen Codeschnippsel OHNE <style> … <style/> dann funzts.

    Nenn mich Bulldoggi …

  3. Hallo, der Versuch, CSS einzubinden funktioniert bei mir leider nicht.
    Alles zwischen und wird als normaler Text angezeigt.
    Ich habe auch euer Bsp. von oben 1:1 versucht – dort das gleiche Problem.
    Woran könnte das liegen?

  4. Bitte die <!– –> zwischen dem style belassen. Sonst kanns passieren, dass der IE es nicht korrekt darstellt.

    Bsp für direkte Codeeingabe:

    <style>
    <!–
    h1 {color: black;}
    p {color:red;}
    –>
    </style>

    Bsp für Verlinkung eines externen Stylesheets.

    <link rel=”stylesheet” type=”text/css” href=”styling.css” media=”screen” />

    Alexandra

  5. Korrektur:

    AUsgeschrieben:
    Kleiner-ZeichenRufzeichen2 Bindestriche … 2 BindestricheGrößer-Zeichen.

    Das sieht man leider hier nicht. Aus irgendeinem Grund kann man keine HTML bzw. Programmiersymbole verwenden.

  6. Da Facebook ein externes CSS relativ rasch und hartnäckig cached, empfiehlt es sich, bei Tests die URL mit einer Variablen zu versehen und diese bei Neuerungen zu ändern.

    Z.B.: ….. /style.css?v=1

    Bei Änderungen die Variable auch ändern, und schon wird die URL als andere angesehen und die neue Datei verwendet 😉

    Reynhard

    P.S.: meine derzeitigen Facebook- Experiemente / Ergebnisse: http://www.facebook.com/Harpattack

  7. ich verwende kein float

    Zum Sommer 2010 melden wir uns mit weiteren News rund um Cinque, die deutsche Frauenfußball-Nationalmannschaft und die WM 2011!

    Hat es was damit zu tun, dass ich im Reiter „Notizen“ bin und in keinem eigenen?

  8. Hallo,
    kann es sein, dass die Möglichkeit, externe CSS in FBML-Reiter einzubinden, von Facebook unterbunden wurde?

  9. Hallo Mika,

    nein, Facebook hat diese Funktion nicht unterbunden. Leider benötigt FB länger um die CSS, die extern eingebunden wurde, anzuzeigen. Wenn man Veränderungen gleich sehen möchte, muss man die Stile direkt in die FBML reinschreiben.

    Ich hab bei meiner Fanseite die „Über“ mittels externer CSS erstellt. Wie du siehst, ist alles vorhanden. Wie gesagt, FB braucht länger um die externen CSSen anzuerkennen.

    LG Alexandra

    1. Hallo Alexandra,
      danke für deine Antwort.
      Das Cacheverhalten meine ich nicht, ich hatte eine FBML-Seite mit externem CSS gebaut und die hat bis vor Kurzem auch tadellos funktioniert und nun wird das CSS plötzlich ignoriert. Ich hab das CSS wie folgt eingebunden:

      Dieser Text ist rot
      Dieser Text ist blau.

      In einer lokalen html-Datei mit dem CSS auf dem entsprechenden Server funktioniert es problemlos, als FBML-Reiter im Facebook bleibt die Schrift schwarz.

      Wo liegt der Fehler? Könnte es am Server liegen, auf dem das CSS liegt? Gibts da seitens Facebook irgendwelche Restriktionen? (Hab hier aber auch schon zwei verschiedene getestet.)
      Danke und viele Grüße
      Mika

  10. Hab was ganz Komisches festgestellt: FB ignoriert immer die erste Style-Anweisung, die in einem -Block steht. Man sollte also eine Pseudo-Angabe als erstes verwenden, damit alle Angaben umgesetzt werden.

    Und zur Ergänzung: Es sollte doch der Vollständigkeit halber type=“text/css“ in dem Style-Tag stehen.

    Also z.B.

    1. Da der Code wieder rausgeflogen ist, hier nochmal ohne spitze Klammern (Ihr wisst ja, wo die hinkommen):

      style type=“text/css“
      !–-

      .clear { clear:both; } ###Platzhalter-Klasse, die von FB ignoriert wird

      …eigene Angaben

      -–
      /style

  11. Da scheint ja weiterhin ein Kuddelmuddel zu herrschen. Was ist denn der derzeitige Stand der Dinge, wenn man eine image map per CSS einbinden will – und das Ding auch in IE funktionieren soll? Externe CSS werden ja nicht mehr aufgerufen, normale HTML image maps funzen nicht…

    Im Moment sehe ich es nur in Firefox. Grmpf.

    Hier mein Code:
    http://blog.laid-bag.com/?page_id=279

    Würde mich über Feedback freuen – waere doch gelacht, wenn wir den Kampf gegen FB und IE nicht gewinnen.

    Gruß, Gila

    1. Hab auch gerade festgestellt, dass meine css-Angaben vom IE neuerdings komplett ignoriert werden (wer weiß, wie lange schon, oh Gott…).

      Jedenfalls hab ich jetzt jedem HTML-Tag die Angaben per style=““ reingeschoben. Sehr ätzend, aber es funktioniert.

  12. Sprich, wir hoffen, dass die wirklich „wichtigen“ Leute eh Firefox nutzen? 😮

    Zum einen überraschen mich Facebook’s irrationale Code-Änderungen immer wieder, zum anderen bin ich langsam wirklich entsetzt, wie sehr IE sich selbst demontiert.

    Alles Murks. Aber wer weiß, wenn es so neu ist, kommt ja jemand vielleicht noch mit der ultimativen Lösung.

  13. Über externe style sheets kann man die IE8 Probleme überbrücken.. Ich habe die sheets bei Google Sites hochgeladen und den HTML Teil in den Tab gesetzt. Funktioniert!

    520px..warum nur? Werbung oder?

  14. ich möchte gern ein FBML hinzu fügen. Ich habe auch geschafft, Notizen hinzu zu fügen, aber ohne Bilder.

    Wie mache ich das, dass ich Text und Bild, und evtl. externen Link dort posten kann.

    Viele Grüße

    Christiane

  15. HALLO

    Ich habe eine fan page
    und habe ein reiter ergestelt, ich weis aber nicht wie bearbeiten.
    z.B das links,fotos und soweitter zu sehen ist

    ich habe viele infos gelese
    ich weis es geht mit CSS. aber was ist das?

    wen ich HTML bearbeite, weis ich nicht mehr weitter!
    kannst du mir hfelen?

    grüsse aLee

Kommentare sind geschlossen.