Facebook-Fanseiten: Menü in FBML-Reiter einbauen

UPDATE März 2011: FBML-Reiter sind hinfällig. Das Einbinden individueller Inhalte, sollte jetzt über iframe-Tabs gelöst werden. Siehe http://dewww.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 Seite ü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)

Annette Schwindt
hat sich inzwischen als "schwindt-pr" verabschiedet und bloggt jetzt unter annetteschwindt.de.

29 Kommentare

  1. 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.

  2. 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?

    1. Ü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

  3. 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

  4. 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…

    1. 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).

  5. 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?

      1. 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;“>
        ————————————

  6. 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

      1. 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

  7. 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

Kommentare sind geschlossen.