Tutorial: Facebook-Fanpage mit Static FBML – Update

Nils social media 22 Comments

Facebook hat in den letzten Monaten gerade für Unternehmen eine enorme Bedeutung erreicht. Durch die Möglichkeit, einfache Markenpräsenzen mittels Fanpages auf Facebook einzurichten, kommen Firmen wie Adidas, Axe oder Coca Cola direkt mit ihrer Zielgruppe in Kontakt und erfahren einen nie dagewesenen Erfahrungsaustausch mit den Nutzern, ihren Konsumenten. So ist es nicht verwunderlich, dass immer mehr Unternehmen eine eigene Fanseite einrichten möchten. Für einige reicht die einfache Präsenz, andere möchten gerne indiviueller auftreten. Facebook stellt dafür eine Reihe von APIs (z.B. die Open Graph API) und Programmiersprachen (u.a. FBML, FBJS) bereit, die es ermöglichen beispielsweise mittels Facebook-Applications eigenständige Programme bereitzustellen.

UPDATE: Ich habe eine neue Version des Codes bereitgestellt, der einige Probleme löst. Siehe ganz unten.
direkt zum Code springen

Eine leichte Methode, sein Facebook-Profil mit individuellen Informationen anzureichern, ist die Applikation Static FBML. Im Web gibt es nicht nur direkt bei Facebook eine Vielzahl von Tutorials, How-Tos oder Anleitungen, die beschreiben, wie man Static FBML zur Erstellung einer Fanpage einsetzen kann. Oft wird dabei aber entweder nur darauf eingegangen, wie man Static FBML zu seiner eigenen Fanpage hinzufügt oder wie man einfachste Formatierungen vornimmt. Eine vollständige Beschreibung für die Erstellung einer Fanseite ist mir bisher noch nicht untergekommen. Von daher möchte ich in diesem Post anhand der Fanseite von teltarif.de, die ich mit Static FBML erstellt habe, aufzeigen, wie man so etwas macht.

Erstellung einer Static-FBML Fanpage

Schritt 1: Hinzufügen von CSS-Style für das Layout

In diesem Tutorial soll Static FBML für einen neuen Reiter auf der Fanpage eingesetzt werden. Dies ist in meinen Augen die umfangreichste Möglichkeit, individuelle Informationen hinzuzufügen. Neben Reitern gäbe es sonst noch FBML-Felder, welche einzeln am linken Rand der Startseite der Fanpage oder zu mehreren im Reiter “Boxen” angeordnet werden können. Hat man aber einmal verstanden, wie die reine Programmierung eines Reiters funktioniert, ist die Erstellung eines FBML-Feldes ein leichtes, weshalb ich nicht näher darauf eingehe.

Ein gutes Beispiel, welches mir als Vorlage diente, ist die Fanpage von Jamie Oliver, welcher mehrere Elemente in Spalten und untereinander einsetzt. Für die Erstellung des Reiters habe ich mir daher ein ähnliches CSS-Design überlegt, welches aus einem Header und drei darunter befindlichen DIV-Spalten besteht. Allgemein ist es für die Erstellung hilfreich, wenn man zumindest Grundverständnis von html und CSS hat, den darauf basiert letztlich zu großen Teilen der Code. In einem Text-Editor nach Wahl (ich nutze TextWrangler auf dem Mac) gibt man die Style-Information ein. Da es in Facebook nicht ohne Schwierigkeiten möglich ist, CSS extern auszulagern, muss man die Styles direkt an erster Stelle im Code anbringen.

Facebook-Fanpage CSS Style by Nils Merker

Wie man sieht, habe ich als Seitenbreite 750 Pixel gewählt, das ist auch das Maximum, was Facebook im Reiter erlaubt. In der Höhe dagegen gibt es keine Beschränkung.
Damit die einzelnen DIV-Container, welche gleich für die Anordnung der Spalten genutzt werden, schöner aussehen, habe ich einen H3-Style so gestaltet, dass er wie eine Facebook Box-Überschrift aussieht. Diese Formatierung kommt nachher mehrfach zum Einsatz. Zusätzlich brauchen wir natürlich noch Styles für den Text und einige weitere Formatierungen. Den vollständigen Code gibt es am Ende des Tutorials.

Im weiteren Verlauf des Codes nutzt man dann die schon angesprochenen DIVs mit den passenden Styles für den Aufbau des Layout-Gerüstes, welches anschließend mit Inhalt gefüllt werden soll.

Facebook-Fanpage DIV Spalten by Nils Merker

Schritt 2: spezielle FBML-TAGs

Wenn das Grundgerüst steht, möchte man eventuell einige Funktionen einbinden, die uns Facebook mit FBML mitliefert. Eine komplette Übersicht gibt es im Developer-Bereich auf Facebook. Ich habe mich auf drei Funktionen beschränkt. Eine, die bestimmten Inhalt nur Fans anzeigt, eine die bestimmten Inhalt zufällig anzeigt sowie eine, die eine Weiterempfehlung der Seite an Freunde ermöglicht. Zusätzlich habe ich noch ein simples Reiter-Menü eingebaut.

Inhalt nur Fans anzeigen – <fb:visible-to-connection>

Mit diesem Befehl wird jeglicher Inhalt, der darin umschlossen ist, nur angemeldeten Fans angezeigt. Warum Facebook nicht eine Funktion anbietet, die das Umgekehrte erreicht, nämlich Nicht-Fans beispielsweise eine Aufforderung zum Fan-werden anzuzeigen, ist unverständlich. Durch einen kleinen Hack lässt sich dieses aber umgehen. Folgendes Beispiel zeigt, wie es gemacht wird. Wichtig ist dabei der angegebene Margin. Dieser löst nämlich das Problem, dass die Fläche, die der Content einnimmt, der nicht angezeigt wird dennoch angezeigt wird. Ein negativer Margin verschiebt dabei also den anzuzeigenden Content über den anderen, nicht sichtbaren. Damit es später im Design gut aussieht, muss die Zahl entsprechend angepasst werden. Ebenso gilt es zu beachten, dass man als Admin der Fanpage immer beide Felder sieht. Man braucht also am besten noch zwei weitere Accounts bei Facebook, einen als Fan und einen als Nicht-Fan.

FBML-Code für die Trennung zwischen Fan und Nicht-Fan

Inhalt zufällig rotieren lassen – <fb:random>

Mit dem Befehl fb:random lassen sich beispielsweise diverse Teaser einblenden, die dann nach einer vorgegebenen Wahrscheinlichkeit ausgewählt werden. Ich denke, der Code erklärt sich von selbst.

fbml random option

Seite weiterempfehlen – <fb:multi-friend-selector>

Diesen Selektor gibt es in mehreren Ausführungen, ich habe mich für die condensed-Variante entschieden, weil diese schmal genug ist, um in die rechte Spalte zu passen. Facebook kündigt derzeit an, Änderungen an dieser Funktion vornehmen zu wollen. Lassen wir uns überraschen, was dabei herauskommt. Hier der derzeit eingesetzte Code.

Facebook-Fanpage Freunde einladen by Nils Merker

Reiter-Menü

Ein Reiter-Menü bietet sich an, wenn man viele Informationen auf geringem Platz unterbringen möchte. Der Code dazu ist relativ simpel. Wenn man möchte kann man über CSS-Klassen den Reitern noch ein anderes Aussehen verschaffen.

Reiter-Navigation für Static FBML

Schritt 3: zur Seite hinzufügen

Mit diesen einfachen Mitteln lässt sich also ein Design schaffen, welches die eigene Fanpage deutlich aufwertet. Nun muss es noch zur Seite hinzugefügt und als Reiter aktiviert werden. Dazu editiert man seine Fanpage und fügt in der Applikation Static FBML ein neues FBML-Feld hinzu. In dieses kopiert man den Code hinein und gibt dem Feld einen Namen, der nachher dann den Reiter kennzeichnet. Anschließend kann man in den Anwendungseinstellungen angeben, dass man dieses Feld als eigenen Reiter nutzen möchte. Sinnvoll ist es abschließend noch, dass man den Reiter in dessen Einstellungen als Start-Reiter bei Seitenaufruf konfiguriert.

UPDATE:

Ich habe nach den vielen Kommentaren den FMBL-Code überarbeitet. Insbesondere habe ich die Seitenbreite angepasst, so dass sie den derzeitigen Bestimmungen von Facebook gerecht wird (520 Pixel ist hier das Maß der Dinge). Weiterhin habe ich das bemängelte Problem mit dem fehlenden TAG bereinigt, hier fehlte in der Tat nur ein schließendes “style”-TAG bei der CSS-Deklaration. Viel Spaß mit dem neuen Code!

Hier noch der vollständige Code für eine fertige Seite, welchen Ihr gerne für Eure Zwecke verwenden dürft:
Facebook Fanpage FBML-Code neue Version

Das fertige Ergebnis lässt sich unter anderem auf der Facebook Fanpage von teltarif.de anschauen.

UPDATE 2: Drüben bei mashable gibt es seit gestern auch eine sehr ausführliche Anleitung für das Erstellen von Facebook-Fanpages mit CSS und FBML.

UPDATE 3: Nachdem Facebook zum 11. März 2011 die FBML-Tabs nicht mehr offiziell unterstützt, sollte sich jeder überlegen, auf die neuen iframe-Tabs zu wechseln. Ein Tutorial, wie man iframe-Tabs für Facebook-Fanpages erstellt, gibt es nun hier im Blog.

Comments 22

  1. marcus

    Danke für Deine schöne Ausführung! Hat mir sehr geholfen. Kleiner Hinweis: Beim CSS fehlt am Ende: . ;)

  2. Pingback: » Galerie: E-Mail, Social Networks und zurück | optivo E-Mail-Marketing-Blog

  3. Manuel

    Hey ich habe da eine Frage

    Ich habe einen laaangen Text und zum Schluss kommt das else nur wenn ich jetzt nicht Fan bin kommt der Text voll weit unten erste ich hätte gern das der raufgerückt wird wie schaffe ich das?

    glg

  4. Post
    Author
    Nils

    Hallo Manuel!

    Dieses Problem löst Du durch den negativen margin. Bei mir steht da z.B. “margin-top: -20px;” (siehe oben). Je nachdem, wieviel Platz der Content außerhalb des else einnimmt, desto größer muss die negative Zahl sein. Ich hab auch ein bissl probieren müssen, bis es klappte. Problem dabei natürlich: je nach Bildschirmauflösung oder Schriftgröße des Browsers verschiebt sich dieser Wert. Ist also nur eine Notlösung. Am besten geht es wohl, wenn mindestens einer der Texte ein Bild ist mit fester Größe.

    Ich plane übrigens ein Update meines Codes, weil Facebook ja die Seitenbreite umstellt am 23.08. Mal schauen, wann ich dazu komme.

  5. Michael

    P.S.: und im vollständigen code ist auch die navigation von rightcol falsch (“clicktoshow” und “clicktohide” fehlen).
    Sonst danke für deine Erklärungen, die haben mir sehr geholfen.

  6. Sarahfee

    Danke für das Tutorial zu diesem Thema, hab bis jetzt auch noch kein anderes zu diesem Thema finden können. Leider musste ich feststellen das man keine 750px Breite mehr zur verfügung hat sondern Facebook die maximale Breite auf 520px runter gedreht hat.

    1. Post
      Author
      Nils

      Hi Sarah,

      danke. Ja das ist mir bewusst, aktuell arbeiten wir auch daran, das bei uns anzupassen. Da wir aber nicht nur die Breite, sondern auch noch einige andere Dinge ändern wollen, bin ich noch nicht dazu gekommen, ein Update hier einzustellen. Wird noch gemacht.

      Ansonsten: im Code die Breite von “pagewidth” einfach anpassen, da sollte schon reichen.

  7. Claudia

    Danke für das ausführliche Tutorial. Ich habe ein Hintergrundbild mit CSS eingefügt, dass er leider ignoriert. Das Bild liegt auf einem externen Server und ist mit kompletter URL angegeben. Funktioniert auch, wenn ich die Seite als “normale” HTML-Seite auf den Server lade aber bei Facebook zeigt es mir das Hintergrundbild einfach nicht an. Hat jemand eine Lösung?

    1. Post
      Author
  8. Dirk

    Hi Nils
    tja, leider wird bei mir ebenfalls nur der gesamte Code angezeigt (habe einfach alles rüberkopiert). Welcher Tag fehlt denn, ich habe nur schlechte HTML Kenntnisse und konnte (natürlich) nichts finden…

    Ist es sinnvoll, eine Page in z.B. Dreamweaver zu gestalten und dann den kompletten Code zu kopieren? Kann man dann Bilder verwenden?

  9. Angela Schmitt

    Hallo Nils,

    bis jetzt konnte mit niemand eine Antwort geben …

    Habe meine Facebookseite in Deutschland erstellt. Jetzt will ich von Spanien aus eine Fan-Seite erstellen. Aber ich kann keinen html-code nutzen.

    Die Seite zeigt nur normal geschriebenes an. So bald ein Code dazu kommt, bleibt die Seite weiß. Was mache ich denn falsch?

    Oder liegt es wirklich am Ausland??

    Grüße
    Angela

  10. alex

    Hi, danke erst mal für das CSS, ist echt super! Hab’
    allerdings ein Problem mit dem “Inhalt nur für Fans anzeigen”. Ich
    habe jeweils ein anderes Bild für den Zustand “Gefällt mir” und
    “Gefällt mir nicht”. Mir wird allerdings nur das Bild angezeigt für
    “Gefällt mir nicht”. Ich habe das margin so eingestellt, dass die
    Bilder übereinander liegen. Wenn der User nun gefällt mir klickt
    soll das Bild “Gefällt mir nicht” verschwinden und durch das Bild
    “Gefällt mir” ersetzt werden. Wer mag mir helfen? ;)

  11. lars

    Danke, Danke, Danke … da such ich mir nen Wolf zum Thema “Menü innerhalb einer Fanpage und nach ner Stunde finde ich endlich mal eine schnelle Lösung” …. Danke :)

  12. Julian Buning

    Hallo, ein sehr interessanter Artikel!

    Für alle, die gerne eine individualisierte Facebook Fan Page haben wollen, aber bei der komplizierten FBML-Programmierung hägen bleiben, habe ich einen guten Vorschlag:

    Mit unserem Tool auf mashlab.com kann man jetzt kostenlos individuelle Tabs erstellen, ohne dabei irgendwelche FBML-Kenntnisse zu haben. Alles ganz einfach per Drag&Drop!
    Ihr könnt sowohl Videos und Songs als auch Texte und Bilder einbauen und alles problemlos in eurem Design gestalten.

    Viele Grüße
    Julian

    (edit by Nils: bitte keine kommerziellen Links. Danke!)

  13. Pingback: Facebook Fanpage: iframe Tab Tutorial inklusive Code-Beispiel - himynameisnils

  14. Uwe Krowiorz

    Eine Frage zu dem Link im Seitenmenü: Standardmäßig wird dort ein graues Symbol vor dem Textlink eingeblendet. Auf deiner und wenigen anderen Seiten sieht man eine individuell angepasste Grafik. Wie bekommt man das hin?

    1. Post
      Author
      Nils

      Um solch ein Icon in der Navigation zu bekommen, musst du einfach bei den Einstellungen deiner iframe-App ein Icon und Logo einstellen (im Reiter “about”).

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *