20.10.10

Bei vielen Unternehmen die man auf Facebook findet, sieht man individuelle Reiter auf der Facebook-Seite des jeweiligen Unternehmens. Jobs, Aktionen und vieles mehr lässt sich integrieren. Am beliebtesten ist die sogenannte „Welcome-Page“.

fanpageGENERATOR erstellt Facebook Seiten

Diese wird dem Besucher als erstes angezeigt, wenn dieser die Facebook-Seite besucht. Anhand einer solchen „Welcome-Page“ will ich euch zeigen, wie sich solche Reiter und Seiten mit der Anwendung „Static-FBML“ umsetzen lassen. Natürlich wieder mit Screenshots.

Schritt 1: Static-FMBL hinzufügen

Zu Beginn müsst Ihr die Anwendung „Static FBML“ hinzufügen.
Beschreibung der Anwendung:

Erweitere die Funktionalität deiner Seite mit der Facebook-Anwendung für statisches FBML. Diese Anwendung fügt ein Feld zu deiner Seite hinzu, indem du mithilfe von HTML oder FBML (Facebook Markup Language) deine Seite besser individuell gestalten kannst.

Um die Anwendung hinzuzufügen geht ihr auf eure Facebook-Seite und geht links unter eurem Bild oder Logo auf „Seite bearbeiten“.

Facebook-Seite bearbeiten

Nun findet ihr am unteren Ende der Einstellungen den Punkt „weitere Anwendungen“. In der Regel taucht die FBML-Anwendung dort auch schon auf (siehe Screen). Dann müsst ihr diese nur noch anklicken und dann wieder auf der linken Seite auf „Zu meiner Seite hinzufügen“.

Facebook-Einstellung für weitere Anwendungen

Taucht bei euch die Anwendung nicht auf wie auf dem Screen zu sehen, könnt ihr folgenden Link benutzen: Static FBML-Anwendung

Nachdem Ihr nun auf „Zu meiner Seite hinzufügen“ geklickt habt, öffnet sich ein Pop-Up, bei dem ihr die gewünschte Seite auswählen könnt (solltet ihr mehrere haben). Nun einfach hinter der gewünschten Seite auf „Einer Seite hinzufügen“.

FBML-Anwendung einer Seite hinzufügen

Nun wurde die Anwendung hinzugefügt und ihr könnt nun mit Schritt 2 weitermachen.

Schritt 2: Reiter benennen und Inhalt einfügen.

Geht nun wieder wie am Anfang auf eure Seite und auf „Seite bearbeiten“.
Dort gibt es nun ein Extrapunkt für FBML, bei dem ihr auf „bearbeiten“ klickt.

FBML bearbeiten

Hier könnt ihr nun Name des Reiters und den Inhalt eingeben/einfügen. Da wir in diesem Beispiel eine Willkommens-Seite erschaffen, heißt der Reiter…??? Richtig -> Willkommen 😉

Nun zum Inhalt.
Ihr habt nun die Möglichkeit hier euren Text einzugeben, aber auch HTML-Code ist möglich. Und gerade der HTML-Code macht Sinn, da man sich hier eine schöne Willkommens-Seite gestalten kann.

FBML-Reiter - Name und Inhalt einfügen

Danach einfachdie Änderrungen speichern.

FBML-Änderrungen speichern
Info:

  • Man darf nur den Inhalt der normalerweise zwischen den Body-Tags steht einfügen
  • Die Breite des Inhaltsbereichs beträgt 520px
  • Keine externe CSS-Dateien, da der Head-Bereich von Facebook kommt.
  • Style-Angaben fügt ihr am Anfang ein (<style>….</style>)
  • Skript-Sprachen kann man keine benutzen
  • Alternative: FBML-Befehle

Schritt 3: Anordnung des Reiters und Startseite festlegen

So, nun haben wir die FBML-Anwendung hinzugefügt und Name und Inhalt des neuen Reiters für unsere Willkommens-Seite eingefügt. Nun legen wir noch die Position des neuen Reiters fest und richten diesen als den Reiter ein, der beim Besuch als erstes angezeigt wird.

Die Anordnung ist ganz einfach. Ihr müsst nur auf eure Facebook-Seite gehen, den Reiter anklicken (Maustaste gedrückt halten) und ihn dann per Drag & Drop hin und her schieben.

Allerdings kann man ihn nicht direkt als ersten Reiter anordnen. „Pinnwand“ und „Infos“ sind immer vorne dran.

Nun gehen wir wieder auf „Seite bearbeiten“ und anschließend in die Pinnwand-Einstellungen. Dort wählen wir nun die Willkommen-Seite als den Reiter, der den Besuchern standardmäßig angezeigt wird.

Facebook Pinnwand Einstellungen

Und fertig ist die Willkommens-Seite, die nun immer als erstes angezeigt wird, wenn die Facebook-Seite besucht wird.

Meine Facebook Willkommens-Seite

Ich hoffe euch hat die Anleitung gefallen und vor Allem: Sie hat euch geholfen 😉
Über eure Meinung freue ich mich wie immer.

UPDATE 21.10.10

Leider wird die Einstellung des Reiters, der standardmäßig angezeigt werden soll, nicht übernommen. Nur wenn man abgemeldet ist funktioniert es. Ich hab diesen Fehler bei Facebook eingereicht und hoffe das ich eine Antwort bekomme. Über die Suchfunktion konnte ich leider noch nichts finden!

Antwort von Facebook:

Hallo,

Danke, dass Du Dir die Zeit genommen hast, um diesen Fehlerbericht einzusenden und dadurch zur Verbesserung unserer Seite beizutragen. Wir können zwar derzeit nicht auf jeden Fehlerbericht antworten, werden Dich aber eventuell um weitere Einzelheiten zu diesem Problem bitten, wenn wir es bearbeiten. Wir bedauern eventuell entstandene Unannehmlichkeiten.

Danke, Das Facebook-Team

fanpageGENERATOR erstellt Facebook Seiten

Über den Autor Ralf Bohnert

Servus. Hat dir der Artikel gefallen? Freue mich über Kommentare oder wenn ihr die Artikel mit anderen teilt! Und denkt an den Feed ;-)

21 Kommentare für “Static FBML: Individuelle Reiter mit HTML-Inhalt in Facebook integrieren – Beispiel anhand einer Willkommens-Seite”

  1. Ich hab schon vor vielen Wochen so eine Seite erstellt, bin nur noch nicht dazu gekommen, es zu bloggen. Ich hab die Buttons noch nicht so hingekriegt wie ich es mir vorstelle.
    facebook.com/chaosweib -> Blog

  2. Die angelegte Blog-Seite hat oben Navigationsbuttons, wie im echten Blog halt. Die wollte ich so haben wie im Original. 😉

  3. Hm…wüsste ich jetzt leider auch nicht ob und wenn wie es geht, sorry.
    Ich glaube aber eher das es nicht geht, denn die werden von Facebook selbst vorgegeben und ich kann mir nicht vorstellen, dass man die einfach ändern kann!

  4. Nein, Du verstehst mich nicht *gg* Ich hab doch so eine Seite angelegt wie Du.
    facebook.com/chaosweib -> Klick auf den Reiter „Blog“

    Über dem Banner, des Chaos-Blog hab ich eigenhändig Buttons kreiiert. (Home, About, Kontakt, Plugins, Blogroll) Und die wollte ich noch schöner haben. Verstehst Du? 😉

  5. Angela Schmitt

    Ich habe nach der Anleitung eine Fanseite erstellt, so weit hat auch alles geklappt. Nur mit dem Static FBML habe ich Probleme. Normalgeschriebenes kann man sehen, aber so bald irgendein Code dazu kommt bleibt die Seite weiß. Muss man denn noch irgendwo etwas einstellen?

    Ich hab schon so viel probiert aber jetzt bin ich mit meinem Latein wirklich am Ende. Selbst vorgefertigte Codes die nur noch kopiert werden müssen, funktionieren bei über 200 Leuten … nur bei mir nicht, das kann doch nicht sein.
    Bei mir zeigt es aucch nicht „Reiter und Feld“ an, sondern nur Reiter.

    An was kann das denn noch liegen?? Bin für jeden Hinweis dankbar.

  6. Sehr gelungene Anleitung, insbesondere durch die Screenshots! Lässt sich alles gut verstehen und umsetzen. Vielen Dank für die Arbeit, die da drin‘ steckt.

    Grüße aus Hamburg,
    Ralf

  7. Angela Schmitt

    Ich konnte das Problem lösen.
    Im Code habe ich alle Schriftzeichen neu geschrieben und das ‚ mit “ ausgetauscht.

    Das hat funktioniert!!

    Kleiner Tipp für alle die auch so ein Problem haben 🙂

  8. @Bohn: Sehr gut geschriebener Artikel!

    @Angela Schmitt: War mir sehr hilfreich dein Tipp. Hatte genau das gleiche Problem. Vielen Dank.

    Grüße

  9. Hallo,

    ich bin gerade auf diesen interessanten Artikel aufmerksam geworden und dachte euch könnte der folgende Hinweis interessieren:

    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! Dadurch kann man sowohl Video und Songs als auch Texte und Bilder problemlos in seinem Tab einbauen und seine Fans im eigenen Design ansprechen.

    Hoffe euch hilft der Link. Viele Grüße, Julian

  10. Ich krieg das Einfügen von Grafiken bei der Willkommensseite einfach nicht hin. Ich wollte gerne eine ganz andere Schrift, also mit anderer Farbe und anderer Schriftgröße und auch ein zwei Bilder, doch ichweiß nicht, wie das gehen soll ..

Trackbacks/Pingbacks

  1.  Impressum in Facebook

Schreibe einen Kommentar

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