Tutorial: Eigene Tabs Mit FBML auf Facebook Fan Pages gestalten (Gastbeitrag)

Tutorial: Eigene Tabs Mit FBML auf Facebook Fan Pages gestalten (Gastbeitrag)


Update: Die hier beschriebenen Static FBML Tabs werden von Facebook nicht mehr unterstützt. Bitte lest diesen Beitrag für aktuelle Methoden zur Erstellung eines Tabs: Static FBML ist weg: Wie erstelle ich nun Tabs für meine Fan Page?

FBML Tutorial

FBML Tutorial

In unserem neuen Whitepaper beschreibt Annette Schwindt (schwindt-pr) den genauen Ablauf zum Erstellen eines neuen Tab auf der eigenen Facebook Page.

DocumentDownload:
“Tutorial – Eigene Tabs mit FBML auf Facebook Fan Pages Gestalten“

PDF, 7.2 MB (Share & Embed via Scribd.com)

hline

Der Inhalt des Whitepapers in Form eines Blogposts:

Im Zuge der anstehenden Änderungen für Facebook-Fanseiten wird der Bedarf an individuell gestalteten Reitern stark an Bedeutung zunehmen. Über die Anwendung „Static FBML“ können Sie individuell gestaltete und auch individuell benannte Reiter zu Ihrer Fanseite hinzufügen. Innerhalb dieser Reiter können Sie mit normalen HTML-Befehlen ihrer Kreativität freien Lauf lassen. Gehen Sie dabei wie folgt vor:

1. FBML-Anwendung zur Seite hinzufügen

staticfbml_logo Gehen Sie zur Anwendung „Static FBML“ und klicken Sie auf „Zu meiner Seite hinzufügen“.

Wenn Sie mehrere Fanseiten betreuen, müssen Sie hier ggf. noch diejenige, die Sie bearbeiten wollen, auswählen. Sehen Sie den Link „Zu meiner Seite hinzufügen“ nicht, haben Sie vermutlich ein Unternehmenskonto ohne Profil angelegt und können keine Anwendungen benutzen.

2. FBML-Anwendung einstellen

Gehen Sie zu Ihrer Fanseite und klicken Sie dort auf „Seite bearbeiten“ (unter dem Profilbild). Scrollen sie runter bis zur Anwendung FBML.

fbmlKlicken Sie zunächst auf „Anwendungseinstellungen“. Es erscheint ein Fenster wie dieses:

fbml_appsettings

Möglicherweise hat Facebook die Anwendung bereits automatisch als Feld (auf dem „Felder“-Reiter) hinzugefügt. Dann klicken Sie hinter „Feld: Hinzugefügt“ auf „entfernen“ (denn der „Felder“-Reiter soll demnächst abgeschafft werden).
Über „hinzufügen“ hinter „Reiter: Verfügbar“ erstellen Sie einen eigenen Reiter und klicken auf „OK“.

3. FBML-Reiter benennen

Wählen Sie jetzt innerhalb des FBML-Abschnitts die Option „Bearbeiten“ und geben Sie dem neuen Tab einen (möglichst kurzen) Namen, indem Sie das Formularfeld „Titel des Feldes“ ausfüllen. Sobald Sie dies über „Änderungen speichern“ am Ende des FBML-Formulars gespeichert haben, wird die Anwendung in der Liste unter „Seite bearbeiten“ mit diesem Namen angezeigt (hier im Beispiel lautet der Name „schwindt-pr“):

fbml_mitname

Auf der Fanseite sollte jetzt auch ein gleichnamiger Tab erschienen sein.

4. Inhalte per HTML einfügen

Befüllen können Sie diesen Tab jetzt über „Bearbeiten“ (innerhalb der FBML-Anwendung auf „Seite bearbeiten“), indem Sie das Formularfeld „FBML“ befüllen. Möglicherweise steht darin bereits folgender Code zu lesen:

test_fbml

Dies soll sie daran erinnern, dass Sie hier nur HTML-Befehle ab der div-Ebene abwärts (!) verwenden können. Erlaubt ist allerdings – wie der Name schon sagt – nur statisches HTML; Skript wird nicht zugelassen.

WICHTIG:

  • Tabs werden in der Weite auf 520 Pixel begrenzt werden! Achten Sie also darauf, dass Sie diese Weite nicht überschreiten! Dies ist v.a. beim Einbinden von Grafiken oder Definieren von Weiten (z.B. bei gefloateten Bereichen) wichtig!
  • Facebook ist derzeit ein wenig instabil und das FBML-Formularfeld leider sehr eng und unübersichtlich. Am besten bereiten Sie also Ihren HTML-Code erst mal offline über einen Text- oder HTML-Editor vor und fügen ihn dann nachher einfach ein und klicken dann auf „Änderungen speichern“ am Ende des FBML-Formulars. (Achten Sie nur wieder darauf, dass Sie nur Code ab div-Ebene einfügen! Alle übergeordneten Ebenen sind bereits für Facebook an sich belegt!)
  • Wenn Sie den einzelnen Elementen wie Überschriften, Text etc. keine weiteren style-Definitionen mitgeben, verwendet Facebook das Facebook-CSS. Wenn Ihnen dieses Layout aber nicht gefällt, können Sie es über eigene style-Befehle auch überschreiben.

So ist z.B. dieser selbst gestaltete Reiter auf der Fanseite von schwindt-pr entstanden:

spr_fanseite

5. FBML-Reiter verschieben

Zurück auf der Pinnwandansicht Ihrer Fanseite können Sie den neuen Reiter jetzt noch per Drag&Drop verschieben. Nur der Pinnwand-Reiter und der Info-Reiter (solange er noch vorhanden ist) sind am Anfang der Reiter-Liste fixiert. Alle anderen Reiter lassen sich in der Reihenfolge tauschen.

6. Weitere FBML-Reiter hinzufügen

Am Ende des FBML-Bearbeitungsformulars (s. Schritt 3) finden Sie den Link “ Weiteres FBML-Feld hinzufügen“. Wenn Sie den anklicken, erscheint wieder ein neues noch unbenanntes FBML-Feld auf dem „Felder“-Reiter, das Sie dann wie ab Schritt 2 beschrieben bearbeiten können.

hline

schwindt

Dieses Beitrag wurde von Annette Schwindt (schwindt-pr) erstellt.
Die Fachfrau für Onlinekommunikation hat eine „Einführung in die Grundlagen von Facebook“ verfasst und ist u.a. als Facebook-Beraterin tätig. In ihrem Blog „In Sache Kommunikation“ gibt sie außerdem hilfreiche Tipps für Facebook-Nutzer.

hline

Update: Die hier beschriebenen Static FBML Tabs werden von Facebook nicht mehr unterstützt. Bitte lest diesen Beitrag für aktuelle Methoden zur Erstellung eines Tabs: Static FBML ist weg: Wie erstelle ich nun Tabs für meine Fan Page?

Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on LinkedInBuffer this pageEmail this to someone

Es gibt 79 Kommentare

Deinen hinzufügen
  1. 15
    Philipp Pfeng

    Hallo,

    ich habe mittlerweile FBML-Reiter hinzugefügt. Leider ist es mir nicht möglich einen Dritten erstellen. Ist Anzahl auf zwei por Seite beschränkt?

    Gruß
    Philipp

  2. 18
    Vektor

    Hi danke für die gute Seite habt mir schon sehr weiter geholfen bei meinem Ausflug ins Social Web,
    nun zu meiner FRage:

    Gibt es eine Möglichkeit php-Code auf der neuen FBML-Seite auszuführen (z.B. mit einem externen Datenbankserver) wie etwa eine Gallerie oder ein Kontaktforumlar?

    Grüße

  3. 19
    Mario

    Bin grad auf diesen Artikel gestossen und möchte noch eine Anmerkung hinzufügen. Es ist durchaus möglich Javascript zu verwenden, allerdings (wie schon geschrieben) nicht als externes Script, sondern direkt als Inline-Skript. Dazu einfach mal nach FBJS im Wiki auf Facebook nachschauen.
    Es stehen einem zwar nicht der komplette Satz an Javascript Techniken zur Verfügung, dennoch sind die Möglichkeiten sehr vielfältig. Man hat Methoden für DOM-Manipulationen, ein robustes Animations-Package, Event-Handling, Dialogboxen sowie AJAX.
    Damit lassen sich interaktive und dynamische Inhalte, wie reichhaltige Benutzeroberflächen, Formulare etc., entwickeln.

  4. 20
    Marc

    Hallo,
    wir haben eine Anwendung geschrieben, die auf einer Canvas-Page dargestellt wird. Ist es möglich, diese in der Tab-Area zu integrieren?
    Oder kann ich in der Tab-Area nur einen neuen Tab anlegen in dem dann auf die App (Canvas-Page) verlinkt wird?

    Danke für die Hilfe.

    LG Marc

  5. 26
    Frank

    jepp, was Christian schreibt würde mich auch interessieren.

    Finde es ne Frechheit, dass man das nicht einfach löschen kann. Zumal meine Page nicht neu ist und dieser Quatsch bisher nie dastand.

    ciao

  6. 28
    Kerry

    Vielen Dank zunächst einmal für die umfangreichen Ausführungen über FBML. Allerdings stimmen einige Scripts nicht (mehr?). Bekomme, was ich auch mache, keinen eigenen Hintergrund, weder als Farbcode, noch als Background-Link. Ihr Code für ein eigenes Menü erscheint grade mal als Links. Habe diesen Testweise genauso von Ihnen übernommen. Wie kommt es, dass auf Ihrem Screenshot Reiter angezeigt werden? Das Script mit der 2. „Spalte“ (Sidebar) wird als reiner Text angezeigt. Kann also auch nicht stimmen.

    Diese FBML-Geschichte an sich könnte einfache Gemüter fast zur Verzweiflung bringen, denn man kann schon viel Zeit damit vertrödeln. Script schreiben, laden, probieren, funktioniert nicht. Und auf ein Neues… (Endlosschleife)

    Gruß
    Kerry

  7. 35
    Basti

    ich meine keine Iframes, sondern die ganz normalen Frames, wie bei einer Homepage…
    ich möchte einfach die von mir erstellte Seite horizontal teilen
    lg

  8. 38
    Tobias Kugler

    Hi
    Wirklich tolle Seite hier!!!
    Leider kann ich diese Anwendung unter „Anwendungen die dir auch gefallen könnten“ zwar finden…. leider komme ich nicht zu dem button zur seite hinzufügen!
    Hat mir jemand nen Tipp?
    Danke schon mal im Voraus!!

  9. 41
    Janina

    Hallo!
    Ich erstelle gerade eine Fanpage für mein Unternehmen. Hatte bereits Notizen-Inhalte angelegt, aber heute morgen war dieser Reiter auf einmal „verschwunden“. Er erscheint auch nicht mehr unter Seite bearbeiten in den Anwendungen. Ich habe mich bereits mit meinem persönlichen Profil als Admin hinzugefügt und gerade einen neuen Reiter für Notizen erstellt. Frage: gibt es eine Möglichkeit, den voreingestellten Reiter für Notizen wieder zu bekommen? Ich danke schon mal für die Hilfe!

  10. 42
    Anonymous

    […] Facebook Schnittstelle hi schaue mal hier facebookmarketing.de | Tutorial: Eigene Tabs Mit FBML auf Facebook Fan Pages gestalten (Gastbeitrag) und hier Gratis Onlineshop auf Facebook erstellen | Social Media Marketing, SEO Blues & Rock […]

  11. 43
    Sascha

    Hallo,

    ich habe folgendes Problem: Ich versuche, auf meiner StaticFBML-Seite ein Flash einzubinden, welches eine Foto-Gallerie darstellt. Diese greift auf eine XML-Datei zu und bezieht sich von dort die Pfade zu Bildern auf meinem Web-Server. Die SWF-Datei bekomme ich per fb:swf zwar eingebunden, aber es werden keine Bilder angezeigt, es funktioniert also wohl das auslesen der XML-Datei nicht. Irgendjemand eine Idee, ob es möglich ist und wenn ja wie?

  12. 45
    Kim

    @Sascha:
    Ich habe dasselbe Problem. Mit ein wenig aufwändigem Hin- und Hergegoogle konnte ich in Erfahrung bringen, dass man eine crossdomain.xml erstellen muss und die Bildpfade in der XML-Datei, sowie der XML-Pfad in der Flash-Datei, müssen absolut sein.

  13. 48
    Michael

    Naja, leider funktioniert nun FBML seit einigen Tagen nicht mehr, keine Ahnung wann und ob es überhaupt wieder laufen wird? Sinnvolle simple Alternativen?

  14. 50
    patrick

    ich habe mittlerweile div. tutorials durchgelesen und finde, nach erstellung eines Static-FBML-tab`s, auf meiner fanpage keine möglichkeit (eigentlich ja unter „bearbeitung“ der fanpage-pinnwand) diese als landingpage (für nicht-fans)fest zu legen… woran könnte es liegen?

    vielen dank für die hilfe im vorraus!
    mfg, patrick

  15. 51
    Lars

    Die Frage von Patrick interessiert mich auch. Wie kann ich den neuen Reiter als Startseite einstellen, wenn man kein Fan der Seite ist?
    Übersehe ich da irgendwo eine Option?

  16. 53
    TZ

    Hallo!

    Ich versuche verzweifelt, die Gefällt-Mir-Box auf meine Homepage einzubinden. Klappt auch, wenn ich mit dem gleichen Brwoser in einem anderen Browser-Fenster bei Facebook eingeloggt bin. Klappt aber nicht, wenn ich ausgeloggt bin bei Facebook. Dann kommt eine Fehlermeldung auf meiner Homepage:
    “The page you are trying to access is restricted or unavailable”
    Ich will aber ereichen, dass diese Box auch dann für User zu sehen ist, wenn diese nicht bei Facebook eingeloggt sind. Wie lässt sich das lösen? Danke und Grüße
    T.Z.

  17. 55
    Julian

    Hallo zusammen,

    FBML ist zwar super, aber auch ziemlich kompliziert.

    Mit unserem Tool auf http://mashlab.com kann man jetzt kostenlos individuelle Tabs erstellen, ohne dabei irgendwelche FBML-Kenntnisse zu haben. Alles ganz einfach per Drag&Drop!

    Liebe Grüße
    Julian

  18. 57
    Alf2

    Hi,

    ich habe auf einer Fanpage mit FBML und AJAX gespielt – ging schon ganz gut. Leider fehlt der Zugriff in JS auf viele Infos des eingeloggten Users, so dass eine Applikation schön wäre…

    Frage: soweit ich die Sache verstanden habe, ist nach freigabe einer App diese für _alle_ zu haben? Ist aber nicht mein Ziel. Ich will die App eigentlich „unsichtbar“ in einem Fan-Page-Tab unterbringen. Kann man es unterbinden, dass andere meine App einbinden können?

    Gruss Alf2

  19. 58
    Angela

    Hallo,
    ich habe vor wenigen Tagen meine Unternehmensseite online gestellt und mit einem FBML Feld versehen. Die Welcome/Landing Page hat zunächst funktioniert. Jetzt habe ich festgestellt, dass ich die Seite nicht als Startseite angezeigt wird und auch jegliche Veränderungen in der Pinnwandfunktion (Bilder, Info etc.) nicht aktualisiert werden. Startseite bleibt somit die Infoseite.

    Ist das zurzeit wieder ein generelles Problem?
    Über einen Rat würde ich mich sehr freuen!

    Lieben Gruß,
    Angela

  20. 60
    Angela

    Wie gesagt, es hat funktioniert. Allerdings gibt es bei Facebook ab und an einige Unstimmigkeiten.
    Momentan funktioniert ja auch die Einladungsfunktion bei den Unternehmensseiten nicht…(da kann ich noch so viel lesen…)

  21. 62
    Ali

    2 Fragen:
    1. Wie kann ich den Reiter „Info“ anpassen. Auf einigen Fanseiten sehe ich, dass die eine Grafik dort haben.
    2. Einige Seiten haben neben dem Namen der Fanseite noch einen Button „Zur Anwendung“. Damit verlinken sie auf ihre Webseite. Wie krieg ich den?

    Googeln war erfolglos. Danke

  22. 63
    Christian Breitung

    Mir platzt bald die Birne ! FBML ist der größte Scheissdreck. Total umständlich. Ganz toll, was da jetzt geändert wird im Bezug auf FBML und im sogenannten „sozialen Netzwerk bekommt KEINER was mit, per persönlicher Nachricht, dass sich solche Dinge ändern, die man da gerade versucht zu implementieren.
    Versteht mich mal…..ich versuche ein Flashtemplate einzubauen über FBML und dann geht es nicht editieren und ich suche nach dem Fehler über 7 Stunden und dann lese ich mehr und mehr, dass Sie dass verstümmeln wollen mit FBML und ich kann nur ein neue FBML Page anlegen und die anderen bleiben temporär bestehen und lassen sich nicht ändern…. Ganz großes Kino !!!!

  23. 69
    Maik B.

    Hallo zusammen,
    ich habe eben gesehen das manche FanSites den Namen des Reiters oben (neben dem gefällt mir Button) ausgeblendet haben, obwohl der Reiter selbst natürlich einen Namen hat. siehe: http://www.facebook.com/ABSOLUT (Reiter Wild Tea).
    Wie kann ich denn den Reiternamen ausblenden? Hat jemand Erfahrungen damit? Danke schonmal im Voraus

  24. 72
    Thomas

    Ich wär ebenso wie andrée daran interessiert. Habe zwar schon Facebook danach durchsucht, bin aber nicht fündig geworden.

  25. 74
    Sven

    Hallo,

    ich möchte diese Static FBML zu meinen Anwendungen hinzufügen, sehe aber keinen Link auf der angegebenen Seite.

    Ihr schreibt: „Sehen Sie den Link “Zu meiner Seite hinzufügen” nicht, haben Sie vermutlich ein Unternehmenskonto ohne Profil angelegt und können keine Anwendungen benutzen.“

    Was kann ich denn tun, damit das funktioniert? Oder anders: Wie kann ich nachträglich ein Profil anlegen,…obwohl ich ja eigentlich eins habe???

    Helft mir bitte!

  26. 75
    Marie

    @sven:

    wenn du eine seite eingerichtet hast, kannst du DORT auch ein profil einrichten, du gibst dir als administrator dann quasi ein gesicht. ABER: das ist garnicht das problem!! die gleiche frage habe ich mir vor kurzem nämlich auch gestellt: WO ist „zu meiner seite hinzufügen“?? > habe heute erfahren dass es FBML nicht mehr so einfach geben soll! stattdessen musst du andere anwendungen benutzen!! (iframe? istatic? > probiers mal aus, hab ich selbst noch vor…)

    LG

  27. 76
    Daniel

    Die genannten Services sind leider alle entweder kostenpflichtet oder fragen einfach zu viele Daten der Nutzer ab. Für eine einfache Startseite finde ich das übertrieben.

    Gibt es keine einfache Art, um FBML Seiten zu erstellen?

  28. 78
    Esther

    Hallo! Kann man den vorinstallierten Reiter „Video“ entfernen? wenn ich auf Reiter verwalten und dann entfernen gehe, werden mir nur meine selbst gebauten Reiter angezeigt und weder der „Foto“ noch der „Videoreiter“- ich würde letzterem gerne durch einen Youtube-Reiter austauschen. MfG

    • 79
      Philipp Roth

      Das geht derzeit nicht. Du kannst die Tabs nur so anordnen das dass YT weiter vorne ist. Allerdings wird das YT nicht auf dem Smartphone sichtbar sein d.h. für einen großen Teil der Nutzer. Sichtbarkeit für die YT Videos bekommst du eher im Newsfeed als in einem Tab.

+ Hinterlasse einen Kommentar