Facebook-Power Teil 2: Tabs, Apps, FBML, Design

facebook-logo

Dieser Beitrag ist der zweite Teil meiner Artikel-Serie zur PhotoCon 2010 in der ich erkläre wie Ihr eine individualisierte Facebook-Fanpage erstellt.

Im vorausgegangenen Artikel habe ich beschrieben was Ihr hinsichtlich des Profils beachten müsst und wie alles richtig angelegt wird. Nun geht es darum die Fan-Page mit Anwendungen zu individualisieren, das Design anzupassen und eine Vanity-URL festzulegen.

Modernes Webdesign

Neue Workflows, Techniken und Designideen – inkl. Rapid Prototyping, Responsive Design und Sass.

In unserem Shop kaufen
Signierte DVD, keine Versandkosten

Bei Amazon bestellen
Standard-Version

Willkommens-Seite

Im letzten Beitrag haben wir die Basis-Settings der Fan-Page besprochen. Was wir nun benötigen ist eine individuelle Start-Seite für unsere Fan-Page.

Die Willkommens-Seite hat den Sinn den Besucher Willkommen zu heißen und Ihm kurz und knapp zu erklären was für Informationen er hier findet. Darüber hinaus sollte ein Hinweis auf den „Gefällt mir“-Button eingebunden werden, denn diesen soll der Besucher ja betätigen damit Ihr mehr Fans bekommt. Um Ihm das alles etwas schmackhafter zu machen ist es sinnvoll einen Anreiz zu bieten. Das könnte zum Beispiel ein exklusives Gewinnspiel sein.

Wenn Ihr keine echten Anreiz bieten könnt, so "verkauft" dem Fan eine Standard-Funktion. Frei nach dem Motto "Klickt auf gefällt mir und bekommt ab sofort alle unsere Statusmitteilungen direkt auf die Pinnwand übertragen."

facebook-gefaellt-mir-info

FBML-Anwendung installieren

Achtung! Facebook erlaubt keine neuen FBML-Anwendungen mehr. Das bedeutet, dass Ihr nur dann mit FBML arbeiten könnt wenn bereits vorher die Anwendung installiert war. Der Ersatz für FBML nennt sich iFrame-Tab. Alles was Ihr dazu wissen müsst habe ich hier zusammengefasst: Facebook-Fanpage mit iFrame-Tabs erweitern

Um individuelle Tabs in unsere Navigation einbinden zu können müssen wir zunächst eine zusätzliche Anwendung (Facebook-App) installieren. In diesem Fall gehen wir in die Suche und suchen nach „static FBML“. FBML bedeutet Facebook Markup Language und erlaubt es uns gleich innerhalb eines neuen Facebook-Tabs HTML-Code und FBML zu schreiben.

static-fbml-facebook-app

Nachdem Ihr die Anwendung gefunden habt und Euch auf der Anwendungs-Seite befindet klickt Ihr links auf „Zu meiner Seite hinzufügen“. Im Nachfolgenden Screen wählt Ihr die Fan-Page auf welcher static FBML installiert werden soll.

static-fbml-facebook-app

Ihr wechselt wieder zu Eurer Fan-Page (am schnellsten über die Suche) und geht erneut auf „Seite bearbeiten → Anwendungen“. Hier findet Ihr nun die soeben installierte App unter dem Namen „FBML 1“. Klickt auf „Zur Anwendung“ um den neuen Tab mit Inhalten zu befüllen.

static-fbml-facebook-app

Hier könnt Ihr nun einen Titel für den neuen Navigations-Tab festlegen und Inhalte hinzufügen. Um die Inhalte zu strukturieren und auszuzeichnen müsst Ihr HTML-Code schreiben worauf ich an dieser Stelle nicht im Detail eingehen werde.

Wenn Ihr Grafiken verwenden wollt so müsst Ihr diese auf einen eignen Webspace hochladen und absolut verlinken. Das kann sowohl mit HTML als auch mit (Inline-)CSS geschehen.

Auf diese Weise lassen sich sehr individuelle Willkommens-Tabs gestalten.

static-fbml-facebook-app

Es gibt übrigens unzählige Anwendungen wie Flickr, Twitter und Co. über die Ihr auch externe Dienste in Eure Fan-Page integrieren könnt. Bedenkt jedoch immer: Informationen nach Facebook rein: Kein Problem! Daten aus Facebook raus: Sehr schwierig bis unmöglich!

Standard-Tab festlegen

Ihr habt nun Euere Fanpage schon sehr weit individualisiert. Allerdings wird bei Besuchern immer noch die Pinnwand als erstes geladen. Um das zu ändern begebt Ihr Euch über „Seite bearbeiten →  Genehmigungen verwalten“ und stellt unten den „Standard-Tab“ ein.

Diese Einstellung ist für Euch übrigens nicht sichtbar. Admins sehen als Startseite immer entweder „Los geht’s“ oder die Pinnwand. Also nicht wundern.

facebook-home-tab-festlegen


Facebook-Design

Mir als Designer ist es natürlich besonders wichtig, dass das Layout der Willkommens-Seite möglichst schön ist. Aus diesem Grund habe ich mir selbst eine Photoshop-Vorlage für Fan-Pages erstellt die ich Euch hier auch gerne zur Verfügung stelle. Die Vorlage enthält alle Elemente und Hilfslinien, so dass Ihr hier optimal mit der Gestaltung loslegen könnt. Eine exportiere Photoshop-Farbfelder-Palette unterstützt Euch ebenfalls beim Design.
Wenn Euch etwas fehlt oder Ihr Verbesserungsvorschläge habt, dann schreibt mir und ich ergänze die Datei gerne.

Achtet darauf, dass Ihr auch das Benutzerbild als Gestaltungselement einsetzen könnt. So lassen sich auch innerhalb von Facebook einigermaßen ansehnliche Layouts realisieren.

Facebook Fan-Page Photoshop Template

Vanity-URL

Sobald Eure Fan-Page 25 Personen gefällt könnt Ihr eine so genannte Vanity URL beantragen. Das bedeutet, dass Ihr in der Adresszeile des Browsers keine schrecklichen IDs angezeigt bekommt sondern einen schönen Namen der sich auch in der E-Mail Signatur gut macht und leichter zu merken ist.

facebook-vanity-url

Sobald Ihr 25 Fans habt geht  Ihr auf  http://www.facebook.com/username/ und könnt dort für Eure Fan-Page einen Namen festlegen. Das funktioniert auch für Euer Benutzerprofil.

Ihr müsst Euch hierfür mit einem Handy legitimieren.