UPDATE März 2011: FBML-Reiter sind hinfällig. Das Einbinden individueller Inhalte, sollte jetzt über iframe-Tabs gelöst werden. Siehe http://deblog.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
[...] UPDATE: Lesen Sie auch diesen Beitrag über das Einbinden von CSS in FBML-Reiter [...]
[...] Nachdem hier schon gezeigt wurde, wie man einen FBML-Reiter auf Facebook-Fanseiten anlegt und wie man eine eigene CSS dafür einbindet, möchte ich nun am Beispiel meiner Fanseite darauf eingehen, wie man den Inhalt eines solchen [...]
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 …
Bin gespannt auf das Ergebnis!
Hi Annette, der Codeschnippsel ist ned drinn, hat WP den rausgelöscht?
Ich hab keinen Codeschnipsel gesehen, auch nicht in der Benachrichtigungsmail…
Ok, der PHP-Schnipsel bewirkt keine Veränderung …
Schade….
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 …
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?
Habe die Beispiele aktualisiert. Versuchen Sie’s nochmal damit.
Hallo, leider keine Änderung.
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
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.
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
Hallo,
der CSS Code wird bei mir zwischen den Bildern angezeigt (CSS steht im Quelltext am Ende).
Hier zu sehen: http://de.tinypic.com/r/mry6pg/5
Formatiereungen werden nicht übernommen.
Woran kann das liegen?
Gruß
Marcus
vielleicht am float von einem der Bilder?
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?
Ja sicher. Es geht hier um FBML-Reiter, nicht um Notizen-Reiter!
Hallo,
kann es sein, dass die Möglichkeit, externe CSS in FBML-Reiter einzubinden, von Facebook unterbunden wurde?
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
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
Mika hat sich per Mail direkt an mich gewandt und hoffe, dass das Problem nun gelöst ist.
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.
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
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
Stelle auch gerade fest, dass der ie die Umstellung auf 520px Breite nicht kapiert…
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.
Erst seit heute, siehe http://www.facebook.com/photo.php?pid=6233974&id=103781978295
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.
Ü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?
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
Indem Sie HTML verwenden, ausführliches tutorial hier: http://www.schwindt-pr.com/fbmltutorial.pdf
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
Ohne HTML-Kenntnisse kommen Sie da nicht weiter. Und ich bin aus gesundheitlichen Gründen derzeit nicht in der Lage, das für sie umzusetzen. Wenden Sie sich bitte an einen aus folgender Liste: http://deblog.schwindt-pr.com/2010/02/04/deutschsprachige-facebook-beratung-und-umsetzung/