Die neue alternative sind iFrames. Mit diesen iFrames ist wesentlich mehr möglich als mit einer alten FBML Seite aber es ist auch etwas schwerer eine solche Seite anzulegen. Ich denke in Zukunft werde ich einen Workshop zu den neuen iFrame Methoden posten, aber das muss noch etwas warten.

Webspace für die FBML Seite, warum?

Seit diesem Jahr (2010) hat der Internet Explorer Probleme damit, direkt im FBML eingebettetes CSS Code dazustellen, darum muss dieser über eine externe CSS Datei eingepflegt werden. Solltet ihr auch Bilder auf eurer Facebookseite verwenden wollen, so braucht ihr auch für diese einen Webspace, wo ihr diese ablegen könnt.

Static FBML einrichten

Jetzt endlich der erste Schritt in Richtung eigene FBML Seite! Jetzt kommt eine Klickanleitung die nicht wirklich schön aussieht, deshalb entschuldige ich mich schon mal im voraus dafür:

Eurer Fanpage könnt hier über die Anwendung „Static FBML“ einen FBML Reiter hinzufügen.

In der Anwendung angekommen klickt ihr links auf „Zu meiner Seite hinzufügen„.

In der aufpopenden ‚Lightbox‘ seht ihr nun eure Fanpage(s) und klickt hinter der entsprechenden Seite „Einer Seite hinzufügen„, anschließend noch „Schließen“ und das wars schon.

Wenn ihr jetzt auf eure Facebookseite geht solltet ihr einen Reiter namens „FBML 1“ vor finden.

Endlich, die erste Seite einfügen!

Um die ersten Inhalte auf den neuen Reiter zu platzieren, müsst ihr auf eurer Facebookseite über „Seite bearbeiten“

und anschließend auf den Menüpunkt „Anwendungen“ gehen.

Nun klickt ihr auf das „Zur Anwendung“ bei der FBML Anwendung.

Die nun geöffnete Anwendung sieht auf den ersten Blick extrem dürftig aus, ihr habt nur 2 Eingabefelder:

1. Titel des Feldes

2. FBML

Das erste Feld (Titel des Feldes) ist für den namen des „Tabs“ auf der Fanpage verantwortlich, in dem 2. Feld muss der Quellcode eingegeben werden.

Meine Empfehlung: Nutzt einen HTML Editor (ich z.B. nutze Aptana Studio) für die Entwicklung der FBML Seite da die Breite des FBML Feldes auf der Facebookseite sehr gering ist und natürlich gibt es auch kein Highlighting etc.

Der erste Seiteninhalt (Content)

<link rel="stylesheet" type="text/css" href="formate.css"> 
<div id="Wrapper"> 
<p>Willkommen auf unserer Facebook Fanpage</p> 
</div>

Das ist der erste Quellcode den Ihr in eure Fanpage einfügt. Natürlich müsst ihr „Wrapper“ noch in der Style.css definieren:

#Wrapper{
width:520px;
font-family:Verdana, Arial, Sans,Times,sans-serif;
font-size:12px;
}

Wenn ihr HTML/CSS beherrscht könnt ihr natürlich den HTML und CSS Code weiter ausbauen bis zur eigenen Seite. Im nächsten Beitrag werde ich euch einige spezielle Facebook FBML Tricks zeigen, wie z.B. ein Reiter-Menü, Inhalte anzeigen nur für Fans usw.

Immer mehr Firmen entdecken Social Media für sich und legen sich Facebookseiten an. Dank der Anwendung „Static FBML“ hat man die Möglichkeit seine Fanseite zu individualisieren und sich somit von der Masse abzuheben.

Was ist Static FBML?

FBML steht für „Facebook Markup Language“ und ist für die Strukturierung und Darstellung auf der Facebook Seite verantwortlich, ähnelt  von der Struktur her HTML. Die Anwendung „Static FBML“ ermöglicht es uns, ein Reiter in unserer Facebookseite anzulegen und diesen mittels FBML, HTML und CSS zu füllen.

Was benötigt man für seine eigene Landingpage auf Facebook?

Also Hauptvoraussetzung ist natürlich eine eigene Facebook Fanpage, Kenntnisse in HTML sowie CSS. Habt ihr noch keine Facebook Fanpage könnt ihr diese hier einfach anlegen, CSS und HTML ist nicht ganz so schnell erlernt, aber dank SelfHTML und Css4You auch mit ein wenig Eigeninitiative erlernbar!

Was kommt als nächstes?

Im nächsten Eintrag werde ich erklären wie ihr Static FBML installiert und wie  eure erste eigene Landingpage entsteht (Grundaufbau). In weiteren Blogeinträgen werde ich mich noch mit Problematiken mit Static FBML beschäftigen und noch etwas tiefer in die Materie vorstoßen.

Artikel:
1. Workshop: Erste Schritte mit Static FBML