Page 1

Static FBML-Tutorial

Individuelle Reiter zu Facebook-Fanseiten hinzufügen und gestalten mit Static FBML Über die Anwendung Static FBML1 können Sie individuell gestaltete und auch individuell benannte Reiter zu Ihrer Fanseite hinzufügen. Innerhalb dieser Reiter können Sie mit normalen HTML-Befehlen ihrer Kreativität freien Lauf lassen. Hier eine Schritt für SchrittAnleitung:

1. FBML-Anwendung zur Seite hinzufügen Gehen Sie zur Anwendung "Static FBML" und klicken Sie auf "Zu meiner Seite hinzufügen". Wenn Sie mehrere Fanseiten betreuen, müssen Sie hier ggf. noch diejenige, die Sie bearbeiten wollen, auswählen. Sehen Sie den Link "Zu meiner Seite hinzufügen" nicht, haben Sie vermutlich ein Unternehmenskonto ohne Profil angelegt und können keine Anwendungen benutzen.

2. FBML-Anwendung einstellen Gehen Sie zu Ihrer Fanseite und klicken Sie dort auf "Seite bearbeiten" (unter dem Profilbild). Scrollen sie runter bis zur Anwendung FBML:

Klicken Sie zunächst auf "Anwendungseinstellungen". Es erscheint ein Fenster wie dieses:

1

http://www.facebook.com/apps/application.php?id=4949752878

Annette Schwindt, schwindt-pr.com und Alexandra Steiner, alexandra-steiner.at

S.1


Static FBML-Tutorial

Möglicherweise hat Facebook die Anwendung bereits automatisch als Feld (auf dem "Felder"-Reiter) hinzugefügt. Dann klicken Sie hinter "Feld: hinzugefügt" auf "entfernen" (denn der "Felder"-Reiter soll demnächst abgeschafft werden). Über "hinzufügen" hinter "Reiter: Verfügbar" erstellen Sie einen eigenen Reiter und klicken auf "OK".

3. FBML-Reiter benennen Wählen Sie jetzt innerhalb des FBML-Abschnitts die Option "Bearbeiten" und geben Sie dem neuen Tab einen (möglichst kurzen) Namen, indem Sie das Formularfeld "Titel des Feldes" ausfüllen. Sobald Sie dies über "Änderungen speichern" am Ende des FBML-Formulars gespeichert haben, wird die Anwendung in der Liste unter "Seite bearbeiten" mit diesem Namen angezeigt (hier im Beispiel lautet der Name "schwindt-pr"):

Auf der Fanseite sollte jetzt auch ein gleichnamiger Reiter erschienen sein.

4. Inhalte per HTML einfügen Befüllen können Sie diesen Reiter jetzt über "Bearbeiten" (innerhalb der FBMLAnwendung auf "Seite bearbeiten"), indem Sie das Formularfeld "FBML" mit HTMLCode füllen. Dabei dürfen Sie nur HTML-Befehle ab der div-Ebene abwärts (!) verwenden. Alle übergeordneten Ebenen sind bereits für Facebook an sich belegt! Erlaubt ist – wie der Name schon sagt – nur statisches HTML, Skript wird nicht zugelassen. WICHTIG: •

Reiter werden in der Weite auf 520 Pixel begrenzt werden! Achten Sie also darauf, dass Sie diese Weite nicht überschreiten! Dies ist v.a. beim Einbinden von Grafiken oder Definieren von Weiten (s.Punkt 8) wichtig!

Bestimmte Befehle wie zB. position:fixed werden von Facebook nicht akzeptiert.

Annette Schwindt, schwindt-pr.com und Alexandra Steiner, alexandra-steiner.at

S.2


Static FBML-Tutorial

Das FBML-Formularfeld leider sehr eng und unübersichtlich. Am besten bereiten Sie also Ihren HTML-Code erst mal offline über einen Text- oder HTMLEditor vor, fügen ihn dann nachher ein und klicken zum Schluss auf "Änderungen speichern" am Ende des FBML-Formulars.

5. Eigene Stilvorlage (CSS) verwenden Wenn Sie den einzelnen Elementen wie Überschriften, Text etc. keine weiteren styleDefinitionen mitgeben, verwendet Facebook sein eigenes CSS. Wenn Ihnen dieses Layout aber nicht gefällt, können Sie es über eigene Befehle auch überschreiben. Listen Sie Ihre CSS-Befehle wie folgt vor oder hinter der Haupt-div Ihres FBMLReiters auf: <style> <!-Element {Eigenschaft:Wert;} ... --> </style> Innerhalb von <style> ... </style> kann man nun problemlos ids, Klassen und andere Elemente deklarieren. Im HTML-Part werden diese dann wie im normalen Quellcode auch aufgerufen. Beispiel: <div> <h1>Überschrift</h1> <p>Mit FBML können sie Ihr Unternehmen noch effizienter präsentieren!</p> </div> <style> <!-div {background:url(http://www.ihreurl.com/hintergrund.gif) top center #fff;} h1 {color: green; font-size: 25px;} p {color: red; font-size: 14px;} a {color: black; text-decoration: underline;} --> </style> Das Ergebnis würde dann wie folgt aussehen:

Annette Schwindt, schwindt-pr.com und Alexandra Steiner, alexandra-steiner.at

S.3


Static FBML-Tutorial

6. Eigenes Menü einbauen Um die Vernetzung mit Ihrer regulären Website oder auch unter den einzelnen FBMLReitern (wenn Sie mehrere haben, s. Punkt 9) zu befördern, können Sie Ihren FBMLReitern auch ein eigenes Menü hinzufügen. Dafür können sie eine einzeilige Tabelle nutzen. Das folgende Beispiel zeigt den Quellcode des Menüs, das ich auf meinem eigenen Reiter FB-Buch2 verwende:

<table class="menutable"> <tr> <td class="menufront"> Home </td> <td class="menucell"> <a href="http://www.facebook-beratung.de">Facebook-Beratung</a> </td> <td class="menucell"> <a href="http://delicious.com/annetteschwindt/facebook+sprblog">Blogposts über Facebook</a> </td> <td class="menucell"> <a href="http://www.facebook-buch.de/">Buchblog</a> </td> <td class="menucell"> <a href="http://www.facebook-buch.de/kontakt/">Kontakt</a> </td> </tr> </table> Da Facebook die maximale Breite der Fanseiten-Reiter auf 520px begrenzen wird, habe ich in der CSS zu diesem Reiter die Weite der Tabelle über die Klasse menutable genauso definiert. Dadurch passt sich die Weite der Zellen je nach Anzahl und Inhalt der Zellen immer auf diese Weite an. Haben Sie weniger Menüpunkte, die Sie nicht über die gesamte Breite verteilen wollen, definieren sie die Weite entsprechend kleiner.

2

http://www.facebook.com/schwindtpr?v=app_7146470109

Annette Schwindt, schwindt-pr.com und Alexandra Steiner, alexandra-steiner.at

S.4


Static FBML-Tutorial

Um den "aktiven" Menüpunkt optisch abzuheben, habe ich für diesen eine eigene Klasse menufront angelegt, die mit weißem Hintergrund und einem grauen Rand definiert wurde. Die restlichen Menüpunkte wurden über die Klasse menucell als grau hinterlegt definiert. Wie Sie am Quelltext oben sehen, brauchen Sie die einzelnen Menüpunkte dann nur noch mit der gewünschten Webpage zuverlinken.

7. Zweite Spalte einfügen Um innerhalb des FBML-Reiters eine zweite Spalte einzufügen, können Sie eine eigene gefloatete div einfügen. So habe ich es z.B. mit dem unteren gelben Bereich bei diesem Reiter gemacht: Die betreffende div namens sidebar hat dabei folgende Stilvorlage (als id):

sidebar { float: right; width: 195px; padding-bottom: 20px; padding-left: 20px; margin-left: 30px; background-color: #f8f199; }

Wichtig ist, dass man dem umfließenden Bereich (=hier der Text mit dem weißen Hintergrund) keine bestimmte Weite vorgibt, damit er sich flexibel anpassen kann (je nach Browser kommt es sonst zu Darstellungsproblemen).

8. Nur für Fans Bestimmte Inhalte in FBML-Reitern können sie auch nur für Fans sichtbar machen. Alles, was man zu tun braucht, ist den betreffenden Bereich mit folgendem Tag zu versehen: <fb:visible-to-connection>INHALT NUR FÜR FANS</fb:visible-to-connection>

Annette Schwindt, schwindt-pr.com und Alexandra Steiner, alexandra-steiner.at

S.5


Static FBML-Tutorial

Die so definierten Inhalte werden erst dann sichtbar, wenn jemand Fan der betreffenden Seite ist. Nichtfans kann man im öffentlichen Text auf die Tatsache hinweisen, dass weitere Inhalte nur für Fans sichtbar werden und Sie zum Fanwerden auffordern. Weitere interessante Tags finden sich im FBML Developer Wiki3.

9. FBML-Reiter verschieben Zurück auf der Pinnwandansicht Ihrer Fanseite können Sie den neuen Reiter jetzt noch per Drag&Drop verschieben. Nur der Pinnwand-Reiter und der Info-Reiter (solange er noch vorhanden ist) sind am Anfang der Reiter-Liste fixiert. Alle anderen Reiter lassen sich in der Reihenfolge tauschen.

10. Weitere FBML-Reiter hinzufügen Am Ende des FBML-Bearbeitungsformulars (s. Punkt 4) finden Sie den Link "Weiteres FBML-Feld hinzufügen". Wenn Sie den anklicken, erscheint wieder ein neues noch unbenanntes FBML-Feld auf dem "Felder"-Reiter, das Sie dann wie ab Schritt 2 beschrieben bearbeiten können.

11. Beispiele Auf den folgenden Seiten finden Sie einige Beispiele für FBML-Reiter...

3

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

Annette Schwindt, schwindt-pr.com und Alexandra Steiner, alexandra-steiner.at

S.6


Static FBML-Tutorial

FBML-Reiter zum Facebook-Buch auf der Fanseite von schwindt-pr http://www.facebook.com/schwindtpr?v=app_7146470109

Annette Schwindt, schwindt-pr.com und Alexandra Steiner, alexandra-steiner.at

S.7


Static FBML-Tutorial

FBML-Reiter "Ă&#x153;ber" auf der Fanseite von Christian Straube http://www.facebook.com/straubegitarre?v=app_4949752878

Annette Schwindt, schwindt-pr.com und Alexandra Steiner, alexandra-steiner.at

S.8


Static FBML-Tutorial

FBML-Reiter "Fjodor" auf der Fanseite von P책l H. Christiansen http://www.facebook.com/pages/Pal-HChristiansen/104262589614777?v=app_4949752878

Annette Schwindt, schwindt-pr.com und Alexandra Steiner, alexandra-steiner.at

S.9


Static FBML-Tutorial

Ausschnitt aus dem FBML-Reiter "Holger" auf der Fanseite von Holger Nikelis http://www.facebook.com/nikelis?v=app_4949752878

Annette Schwindt, schwindt-pr.com und Alexandra Steiner, alexandra-steiner.at

S.10


Static FBML-Tutorial

Einen besonders aufwendig gestalteten FBML-Reiter hat meine Ăśsterreichische Kooperationspartnerin Alexandra Steiner auf ihrer Fanseite realisiert:

FBML-Reiter "Ă&#x153;ber" der Webdesignerin Alexandra Steiner http://www.facebook.com/barrierefreies.webdesign?v=app_4949752878

Annette Schwindt, schwindt-pr.com und Alexandra Steiner, alexandra-steiner.at

S.11


Static FBML-Tutorial

Haben wir Ihr Interesse geweckt? Wenn auch Sie individuell gestaltete Reiter für Ihre Facebook-Fanseite benötigen, nehmen Sie Kontakt mit uns auf:

Annette Schwindt, schwindt-pr Bonn, Deutschland Autorin von "Das Facebook-Buch" (erscheint Ende Mai 2010 bei O'Reilly Verlag) http://www.facebook-beratung.de fragen@facebook-beratung.de oder werden Sie Fan auf Facebook: http://www.facebook.com/schwindtpr

Alexandra Steiner Wien, Österreich Selbständige Webdesignerin http://www.alexandra-steiner.at info@alexandra-steiner.at oder werden Sie Fan auf Facebook: http://www.facebook.com/barrierefreies.webdesign

Dieses Tutorial kann kostenlos heruntergeladen werden unter: http://www.schwindt-pr.com/fbmltutorial.pdf (910kb) Kurzlink: http://tinyurl.com/yz6y643

Bitte verweisen Sie immer auf den Originaldownload!

Annette Schwindt, schwindt-pr.com und Alexandra Steiner, alexandra-steiner.at

S.12

Test  

safsdfssdfsdf