FBML Tutorial
In unserem neuen Whitepaper beschreibt Annette Schwindt (schwindt-pr) den genauen Ablauf zum Erstellen eines neuen Tab auf der eigenen Facebook Page.
Download:
“Tutorial – Eigene Tabs mit FBML auf Facebook Fan Pages Gestalten”
PDF, 7.2 MB (Share & Embed via Scribd.com)
Der Inhalt des Whitepapers in Form eines Blogposts:
Im Zuge der anstehenden Änderungen für Facebook-Fanseiten wird der Bedarf an individuell gestalteten Reitern stark an Bedeutung zunehmen. Über die Anwendung “Static FBML” 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. Gehen Sie dabei wie folgt vor:
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:
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 Tab erschienen sein.
4. Inhalte per HTML einfügen
Befüllen können Sie diesen Tab jetzt über “Bearbeiten” (innerhalb der FBML-Anwendung auf “Seite bearbeiten”), indem Sie das Formularfeld “FBML” befüllen. Möglicherweise steht darin bereits folgender Code zu lesen:
Dies soll sie daran erinnern, dass Sie hier nur HTML-Befehle ab der div-Ebene abwärts (!) verwenden können. Erlaubt ist allerdings – wie der Name schon sagt – nur statisches HTML; Skript wird nicht zugelassen.
WICHTIG:
- Tabs 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 (z.B. bei gefloateten Bereichen) wichtig!
- Facebook ist derzeit ein wenig instabil und das FBML-Formularfeld leider sehr eng und unübersichtlich. Am besten bereiten Sie also Ihren HTML-Code erst mal offline über einen Text- oder HTML-Editor vor und fügen ihn dann nachher einfach ein und klicken dann auf “Änderungen speichern” am Ende des FBML-Formulars. (Achten Sie nur wieder darauf, dass Sie nur Code ab div-Ebene einfügen! Alle übergeordneten Ebenen sind bereits für Facebook an sich belegt!)
- Wenn Sie den einzelnen Elementen wie Überschriften, Text etc. keine weiteren style-Definitionen mitgeben, verwendet Facebook das Facebook-CSS. Wenn Ihnen dieses Layout aber nicht gefällt, können Sie es über eigene style-Befehle auch überschreiben.
So ist z.B. dieser selbst gestaltete Reiter auf der Fanseite von schwindt-pr entstanden:
5. 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.
6. Weitere FBML-Reiter hinzufügen
Am Ende des FBML-Bearbeitungsformulars (s. Schritt 3) 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.
Dieses Beitrag wurde von Annette Schwindt (schwindt-pr) erstellt.
Die Fachfrau für Onlinekommunikation hat eine “Einführung in die Grundlagen von Facebook” verfasst und ist u.a. als Facebook-Beraterin tätig. In ihrem Blog “In Sache Kommunikation” gibt sie außerdem hilfreiche Tipps für Facebook-Nutzer.
[...] Januar 2010 von Annette Schwindt Heute ist ein Gast-Tutorial von mir zum Thema FBML-Tabs für Facebook-Fanseiten auf facebookmarketing.de erschienen, in dem ich [...]
Um den Code zu testen, hilft auch http://developers.facebook.com/tools.php?fbml.
[...] die eigene Fanpage. Vom Anlegen einer eigenen Seite, über Tipps zum richtigen Profilbild bis hin zu selbstgestalteten Tabs haben wir euchvieles [...]
[...] können die ganze Fanseite auch mit diesem verwalten. Mit dem privaten Account ist es auch möglich Anwendungen zu nutzen und Tabs selbst zu gestalten. Wenn andere Ansprechpartner etwas an der Fanseite bearbeiten wollen, können Sie ohne Probleme [...]
[...] wurde ich nach Veröffentlichen des eBooks auch mehrfach interviewt und zu zwei Gastbeiträgen eingeladen. Zu guter letzt hat mein Netzwerkpartner und Berater in Sachen Medientrends Leander [...]
[...] Support for Applications: Einer der größten Nachteil einer Facebook Gruppe: es können keine Applikationen in Tabs untergebracht werden. Wie genau ihre eigene Tabs auf Fan Pages anlegt könnt ihr hier nachlesen. [...]
Wie macht man mit FBML ein Kontaktformular?
[...] könnt die ganze Fanpage auch mit diesem verwalten. Mit dem privaten Account ist es auch möglich Applikationen zu nutzen und Tabs selbst zu gestalten. Wenn andere Ansprechpartner, Agenturpartner oder Abteilungen etwas an der Fanpage ändern wollen, [...]
[...] Februar 2010 von Annette Schwindt (Dieser Artikel erschien kürzlich auch als Gastbeitrag auf facebookmarketing.de, allerdings mit anderen [...]
Gibt es mittlerweile die Möglichkeit den Info-Reiter loszuwerden?
Nein, dies ist nach wie vor nicht möglich.
[...] welche Sprachen Nutzer aus unterschiedlichen Ländern sehen können. Die Livestreambox kann auch in selbst gestalteten Tabs eingebunden werden. Weitere Informationen findet ihr im Developer Wiki. AKPC_IDS += "3197,";Ähnliche Themen auf [...]
[...] Hinzufügen des Image Tags in der Static FBML Box auf der Fanpage Pinnwand und den einzelnen Custom Tabs. Wie ihr selbst Tabs mit FBML anlegt haben wir hier beschrieben [...]