In den letzten Tagen haben wir unsere Facebook Seite überarbeitet und dabei viele, auf der Facebook-eigenen Seiten­be­schrei­bungs­sprache FBML gestützte Elemente eingefügt.

FBML hat sich in Verbindung mit CSS als mächtiges und flexibel zu hand­haben­des Werkzeug dar­ge­stellt. Einige dieser FBML-Ele­mente möchte ich hier in einer lockeren Reihe vor­stel­len. Eine Referenz der Facebook Markup Language (FBML) finden Sie bei Facebook Developers. Wir setzen die Reihe fort mit …

Eigenes Reitermenü für umfangreiche Inhalte

Hier geht es nicht darum einen zusätzlichen FBML-Reiter zu kreieren, sondern auf einem Tab ein eigenes Menü unterzubringen. Das kann dann z. B. so aussehen:

Das Menü ist mit “clicktoshow/clicktohide” realisiert. Hier werden mehrere Divs definiert, von denen jeweils nur eines sichtbar gemacht wird (clicktoshow), während die anderen versteckt werden (clicktohide). Wie das in der Realität aussieht, kann man hier unter Schaufenster ‘erklicken’. So ein Facebook-tab mit eigenem Reitermenü ist beispielsweise für Produkt- oder Leistungskataloge innerhalb des Facebook-Marketings hervorragend geeignet. Der Quellcode sieht so aus:

Die Gestaltung der Reiter erfolgt mit CSS, die Div ‘nav1′ bis ‘nav5′ enhalten die Inhalte und können beliebig formatiert werden. Wie Sie sehen: Es steckt nicht viel dahinter. Deshalb haben wir diese Technik auch gleich beim nächsten Feature eingesetzt:

Eine eigene Galerie einbinden

Facebook bietet standardmäßig nur die Profilbildgalerie als Möglichkeit eine Foto- oder Grafik-Galerie an. Wir haben jedenfalls keine vernünftige Alternative gefunden und uns deshalb entschlossen, diese mit FBML zu realisieren.
Bei der Realisierung des Reitermenüs haben Sie die grundlegende Technik ja bereits kennen gelernt. Auch bei der Galerie wurde der FBML-Tag “clicktoshow/clicktohide” verwendet. Die Anordnung der Div ist völlig Ihnen über­las­sen. Wichtig ist, ein ‘Menü’ aus Divs mit den Vorschaubildern zu im­ple­men­tieren und die Divs für die FullSize-Bilder, die natürlich alle die gleiche Größe und Position haben sollten.

Auf unserer Faceboookseite können Sie die Umsetzung unter ‘Schaufenster/ Galerie’ finden. Hier wurde das ‘Frame-Div’ mit einer Hintergrundgrafik hinterlegt und die vier ‘Full-Size-Div’ oben an­ge­ord­net. Die Leiste mit den Vor­schau­bil­dern ist da­runter gelegt. Klickt man auf eines der Vorschaubilder, wird es in voller Größe angezeigt.

Die Reihe wird fortgesetzt mit ‘Einbinden einer Alert(Meldungs)-Box’ und ‘Einbinden eines Pop-Up-Dialoges mit E-Mail-Formular zur Kontaktaufnahme’.