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/
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 FBML-Reiters durch ein weiterführendes Menü ergänzen kann:
Einer der FBML-Reiter auf der Fanseite von schwindt-pr
Dieser FBML-Reiter besteht aus folgenden Elementen:
- Kopfgrafik (blauer Kasten)
- Tabelle mit einer Zeile und fünf Spalten für das Menü
- rechts floatende div für den grauen Kasten
- eine div für den restlichen Inhalt
Hier soll nur die Tabellenkonstruktion für das Menü erklärt werden. Der Quelltext hierfür lautet:
<table class=”menutable“>
<tr>
<td class=”menufront“>Home</td>
<td class=”menucell“><a href=”http://www.schwindt-pr.com/facebook_beratung.html”>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.fbbuch.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.
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 (analog zum Design von schwindt-pr.com). Die restlichen Menüpunkte wurden überdie 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. In meinem Fall führen sie zu verschiedenen Unterseiten meiner Agenturwebsite bzw. zum Blog über mein Facebook-Buch bei O’Reilly.
Aber Sie können natürlich auch auf Reiter innerhalb der Fanseite verweisen. So habe ich es auf meinem anderen FBML-Reiter gemacht: Der Menüpunkt “Facebook-Buch” verweist hier auf oben gezeigten Reiter.
Haben Sie Fragen dazu oder möchten Sie, dass ich einen solchen Reiter für Ihre Fanseite umsetze? Dann hinterlassen sie mir doch einen Kommentar oder schicken Sie mir eine Mail an fragen@facebook-beratung.de
Static FBML-Tutorial für individuelle Fanseiten-Reiter (pdf, 910kb)
[...] Außerdem haben wir den bereits bestehenden FBML-Reiter um ein Menü erweitert, das zu verschiedenen Unterseiten von Holgers regulärer Website [...]
[...] UPDATE: Lesen Sie auch die Blogposts über das Einbinden von CSS in FBML-Reiter und das Einbauen eines Menüs in einen FBML-Reiter. [...]
Wie kann ich FBML-Reiter nur für Fans sichtbar machen?
Sinn der Sache ist, dass ich einen Reiter erstellen will, auf welchem exklusive Angebote “nur für Fans” veröffentlicht werden sollen.
Fanseiten sind öffentich, daher alles, was auf den Fanseiten ist, auch.
Gibt es dafür eine andere Möglichkeit?
Ich möchte:
Besucher der Seite animieren, sich als Fan anzumelden. Zum Beispiel dadurch, das jeder neue Fan einen Gutschein erhält oder ein Angebot zu einem exklusiven Sonderpreis.
Der Gedanke war, dass dieses Angebot bzw. der Gutscheincode unter einem FBML-Reiter steht, der nur für Fans sichtbar ist.
Oder kann man so etwas doch auf einem anderen Weg lösen?
Über die Fanseite kann man nur für alle sichtbar handeln. Da gibt es keine Fan-Bereiche. Wie das rechlitch aussieht ist noch eine andere Frage: ob so ein Gutschein fürs Fanwerden nicht schon unter die Gewinnspielrichtlinien fällt, die ja jegliche Facebook-Aktion (wie z.B. Fan-werden) – außer über Apps, die auf anderen Servern laufen – untersagen (es sei denn sie sind von Facebook dezidiert genehmigt worden)? Ich kann ihnen das nicht beantworten. Versuchen Sie’s mal bei facebookbiz.de oder facebookmarketing.de
Natürlich können Dinge via FBML Facebook Fans der Seite vorbehalten werden.
Nun muss ich doch nochmal das o.g. Anliegen aufgreifen:
Auf dieser Facebook-Seite ist so etwas realisiert. Erst nachdem man Fan geworden ist, wird die Seite mit dem Gutscheincode angezeigt:
http://www.facebook.com/Porzellanhandel24.de
Wie wird das gemacht?
Da müssten Sie die Seitenbetreiber fragen. Oder die Kollegen von facebookbiz.de
Also, nochmal ein versuch ohne HTML.
Die Lösung heißt “FBML-Tags” und findet sich im Entwickler-Wiki. Für die Zuordung zu einzelnen Profilen ist diese Gruppe zuständig:
Visibility on Profile
* fb:visible-to-owner
* fb:visible-to-friends
* fb:visible-to-app-users
* fb:visible-to-connection
* fb:restricted-to
* fb:18-plus
* fb:21-plus
Ich habe den Tag “fb:visible-to-connection” folgendermaßen benutzt:
Spitze-Klammer-auf fb:visible-to-connection Spitze-Klammer-zu
Inhalte nur für Fans
Spitze-Klammer-auf /fb:visible-to-connection Spitze-Klammer-zu
Vielen Dank für den Hinweis!
[...] April 2010 von Annette Schwindt Dank des Hinweises eines meiner Blogleser wurde ich heute auf die Möglichkeit aufmerksam gemacht, bestimmte Inhalte in FBML-Reitern nur für [...]
Hallo Annette! Vielen Dank für die hilfreichen Tips! Weisst du wie man einen MySpace Music Player in einem Facebook Reiter einbettet? Ich stiess beim Versuch auf das Problem, dass Facebook keine iframes unterstützt…
Ich denke mal, Facebook wird was dagegen haben, dass man da was von Myspace integriert.
Facebook hat eine eigene Musicplayer-Anwendung (zumindest für Offizielle Seiten).
FBML bietet zum erstellen von Tabs auch schon einen eigenen Tag:
Die Referenz dazu:
http://developers.facebook.com/docs/reference/fbml/tabs
Nur als kleiner Hinweis
…
Hallo Frau Schwindt,
wenn ich per CSS ein Menü erstelle und dann rechts darunter eine Box erstellen möchte, erscheint die Box zwar, aber das Menü wird gleichzeitig langgezogen und gestaucht.
So habe ich das umgesetzt:
.sidebar { float: right;
width: 195px; height:40px; margin-top: 100px; background-color: #f8f199;
}
.menutable {margin-top: 10px; width:520px; height:40px;}
Woran liegt das? haben Sie einen Tipp?
Geht es um http://www.facebook.com/gewandhaus?v=app_4949752878 ? Sie haben das sidebar-Element in eine Tabellenzelle gesetzt. Das gehört da nicht hin.
[...] Sie diesem Reiter ein Menü, von dem aus auf weitere Infos verwiesen wird (die man z.B. auf Ihrer regulären Website/Ihrem [...]
Hallo Frau Schwindt,
mit Interesse habe ich den Artikel gelesen. Nun bin ich auf diese Seite bei Facebook gestossen: http://www.facebook.com/snipe.net?v=app_7146470109#!/bmwkarriere?v=app_138525529497264
Augenscheinlich wird dort ja innerhalb des Tabs navigiert. Wie erstellt man denn so etwas? Ich nehme an, das dort mit divs gearbeitet wird, die je nach ausgewähltem Tab angezeigt bzw. nicht angezeigt werden. Aber wie?
Dafür gibt es eigene (kostenpflichtige) Lösungen von speziellen Entwicklern.
Das geht relativ einfach, in diesem Fall über eine eingebettete Facebook-App. Im Endeffect dann auch wieder über DIVs (FBML) und den FBML-onclick-Functions clicktoshow() bzw. clicktohide(). Siehe dazu das Beispiel eines Tab-Buttons aus ihrer beispiel Seite:
————————————
a href=”#” clicktoshow=”nav3″ clicktohide=”nav1,nav2,nav4″ class=”large awesome” onclick=”FBML.clickToHide("app7146470109_nav1");FBML.clickToHide("app7146470109_nav2");FBML.clickToHide("app7146470109_nav4");FBML.clickToShow("app7146470109_nav3");return false;”>
————————————
Vielen Dank für diesen Hinweis.
Hallo,
ich würde für die Fanseite, die ich betreue, gerne so etwas bauen wie Katy Perry auf ihrer Fanpage unter dem Buy-Album-Reiter, also einen Button, der auf ein Menü verlinkt:
http://www.facebook.com/katyperry#!/katyperry?v=app_7146470109
Ich bekomm aber beim besten Willen keine swf-Datei auf meine Fanpage… habe alle Tipps unter Developers ausprobiert… Gibt es eine Lösung?
Beste Grüße
Marion
Geht es nur um den Pop-Up oder um das Gestalten generell?
Hallo,
ich habe einen Flash-Button und ein menue in ähnlichem Stil wie bei Katy Perry gebastelt, bekomme aber, wenn ich beides per FBML einzubauen versuchen, nur starre Bilder angezeigt, die Flash-Funktion geht verloren.
Es muss ja eine Möglichkeit geben, wie man sieht, aber ich bekomme sie beim besten Willen nicht heraus.
Beste grüße
Marion
…. und für einen Tipp, wie man das mit dem Pop-up hinbekommt, wär ich auch dankbar!
http://facebookmarketing.de/tutorials/pimp-my-staticfbml-10-trick-und-tips-fur-static-fbml
Hallo!
Verstehe ich das richtig, dass man Texte, Bilder etc. nur in Untermenüs einfügen kann mit Hilfe einer App oder per href Verweis? Kann man nicht irgendwo im Code den gewünschten Inhalt einfach “reinschreiben”? Habe nämlich 3 FBML-Reiter, die ich zu einem zusammenfügen möchte, sprich einen Reiter mit 3 Untermenü-Punkten. Die 3 vorhandenen Reiter sind mit FBML gestaltet, also habe ich gehofft, diese Codes einfach übernehmen zu können, quasi copy & paste. Ist sowas möglich? Wenn ja, wo müsste ich den Code einfügen und mit welchem Befehl? Content=? Wäre für ein bisschen Hilfe sehr dankbar!
Viele Grüße
Jessica
FBML-Reiter sind jetzt ohnehin hinfällig. Bauen Sie lieber gleich einen iframe-Tab. Siehe http://deblog.schwindt-pr.com/2011/03/04/facebook-iframetabs/