Werbung

Tipps und Tricks

Die Facebook Markup Language: Tutorials für eigene Facebook-Layouts

Cristina Vidal

Cristina Vidal

  • Aktualisiert:

Wie bereits in einem anderen Blogbeitrag erwähnt, gibt es Möglichkeiten, eigene Fan-Seiten auf Facebook optisch umzugestalten. Als erstes stellt man aber fest, dass es auf Facebook nicht allzu viele Gestaltungsoptionen gibt. Man kann den vorgegebenem Rahmen längst nicht so sprengen wie beispielsweise bei MySpace-Seiten mit den änderbaren Bildschirmhintergründen und Schriften. Aber zumindest lässt sich in die Standardversion etwas Design einhauchen.

Ein einfacher Weg lässt sich mit Hilfe der Anwendung Static FBML-Application realisieren. Diese Anwendung stammt von Facebook selbst und erlaubt dem Nutzer, selbst gestaltete HTML- oder FBML (Facebook Markup Language)-Boxen und Tabs auf der Fanseite in Facebook anzulegen.

Als erstes holt man sich die Static FBML-Anwendung auf die Seite. Dazu loggt man sich ein und sucht nach Static FBML. Man klickt auf den Reiter Zu meiner Seite hinzufügen und wählt die eigene Seite aus. Damit fügt man die Anwendung der eigene Seite hinzu. Die FBML-Anwendung erscheint als Box in der Liste der eigenen Facebook-Anwendungen.

Wählt man noch die Option, Feld und Reiter hinzuzufügen, erscheint in den Reitern der Seite das entsprechende Tab.

FBML-Reiter gestalten
Will man den neuen Reiter als Willkommen-Seite nutzen, gestaltet man den neuen Reiter entsprechend um. Man bearbeitet nun mit einem Bildbearbeitungsprogramm eine Grafik mit 520 Pixel Breite, denn die maximale Breite der neuen Facebook-Seite beträgt 520 Pixel. Die Höhe spielt keine Rolle. Als nächstes erstellt man einen Ordner namens FB auf dem Server und lädt die Grafik in diesen Ordner.

Nun loggt man sich in die Fanseite ein und klickt auf Seite bearbeiten. In der Liste mit den Anwendungen klickt man bei der Anwendung FBML auf bearbeiten. Damit kommt man in das Fenster für den FBML-Reiter der Fanpage.

Nun ändert man den Titel und trägt in die FBML-Box den folgenden Code ein, mit der man die eben hochgeladene Grafik aufruft.
<img src =”http://eigenedomain.com/FB/bildname.jpg”>

Alternativ kann man das Bild verlinken, indem man einen normalem HTML-Link ergänzt, beispielsweise 
<a href=”http://eigenedomain.com”> src =
”http://eigenedomain.com/FB/bildname.jpg”></a>

Damit hat man den Reiter mit einem neuen Titel umfunktioniert und mit einem neuen Hintergrundbild ausgestattet.

Als Eingangsseite definieren
Damit Nutzer nun auch wirklich auf diesem Reiter als erste Seite landen, klickt man auf die Pinnwand-Einstellungen. Dorthin gelangt man über den Link Seite bearbeiten, falls man zwischendurch den Bereich verlassen hat.

Damit hat man die Eingangsseite zwar definiert und ein Hintergrundbild geladen, ist aber noch meilenweit von einem wirklich ansprechendem Eingangsbereich entfernt.

Weiterführende Tutorials und Hilfen
Ab diesem Moment kommt es auf die Detailarbeit mit dem FBML-Code an. Dabei benutzt man kein konventionelles HTML wie beispielsweise bei Dreamweaver, sondern vornehmlich CSS-Code. CSS gibt dem Browser Anweisungen, wie eine Box auf einer HTML-Seite auszusehen hat.

Wer Zeit und Lust hat, kann probeweise diesem Tutorial folgen:

How to create a facebook FBML Template
How to create a facebook FBML Template Teil 2

Als erstes zeigt die Anleitung im Blog WebDesign-Tutorials, wie man ein effektvolle Vorlage mit Photoshop gestaltet. Im zweiten Teil gibt es den CSS-Code für die FBML-Box auf der Facebook-Seite.

Webseiten
Das Portal Facebook Developers bietet als offizielle Informationszentrale von Facebook selbst viele Ressourcen für alle, die Facebooks Angebote intensiv nutzen wollen. Hier findet man Handbücher, Forendiskussionen, Wikis und Beispiele für die besten Methoden der Integration eigener Seiten in Facebook sowohl für Anfänger als auch für fortgeschrittene Entwickler.

Hyperarts bietet ebenfalls eine Reihe an erstklassigen Tutorials für Fanseiten in Facebook in der Rubrik Static FBML und in dem FBML Archivdes Hyperarts Blogs. Auch hier finden Anfänger und Profis gute Tipps und Tricks für die Facebook-Entwicklung. Das Blog bietet ebenfalls interessantes Lehrmaterial in Form von Video-Tutorials. Snipe.Net und das IT-Blog Webdigi enthalten ebenfalls viele interessante Tipps und Tricks rund um die Facebook-Gestaltung.

All Facebook bietet als inoffizielles Facebook-Blog Neuigkeiten, Artikel, Tipps und Statistiken rund um Facebook. Ein Hit des Blogs ist die umfangreiche Anleitung How to Develop a Facebook Page That Attracts Millions of Fans. Wer keine Ahnung über die professionellen Nutzungsmöglichkeiten von Facebook, braucht sich das nur einmal durchzulesen, um als Privatanwender das Zittern zu bekommen.

Was das Facebook-Design betrifft, bieten die Portale Facebook Showcase, Custom Facebook Page, und Facebook Designs schöne Beispiele von Fanpage-Gestaltung.

Wer des Englischen mächtig ist, kann sich hier durchaus brauchbare Tipps und Anleitungen holen. Wer nicht, sollte einen Abendkurs besuchen oder in der Schule besser aufpassen 🙂

Cristina Vidal

Cristina Vidal

Das Neueste von Cristina Vidal

Editorialrichtlinien