Beruflich Dokumente
Kultur Dokumente
Ü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 Schritt-
Anleitung:
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:
1
http://www.facebook.com/apps/application.php?id=4949752878
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.
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.
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 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
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.
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).
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.
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.
12. Beispiele
Auf den folgenden Seiten finden Sie einige Beispiele für FBML-Reiter...
3
http://wiki.developers.facebook.com/index.php/FBML
Ausschnitt aus dem FBML-Reiter "Holger" auf der Fanseite von Holger Nikelis
http://www.facebook.com/nikelis?v=app_4949752878
Wenn auch Sie individuell gestaltete Reiter für Ihre Facebook-Fanseite benötigen,
nehmen Sie Kontakt mit uns auf:
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