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.