kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI â€¦

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

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

22 Kommentare

  1. Elmar

    Verfasst am 23. November 2010 um 13:56 Uhr.

    Toller Fortsetzung des Beitrags von der PC2010. Sehr schön detailliert beschrieben und für jeden nachvollziehbar. Finde ich klasse.

    Grüße
    Elmar

    • Jonas Hellwig

      Verfasst am 23. November 2010 um 14:37 Uhr.

      @Elmar: Freut mich sehr, dass es dir gefällt! Wie gesagt werde ich nicht alles aufbereiten sondern mich in erster Linie auf Facebook konzentrieren. Wenn du also einen bestimmten Punkt noch im Detail wissen möchtest melde dich, dann versuche ich das Thema hier nochmal aufzugreifen.

  2. Advitum Webdesign

    Verfasst am 24. November 2010 um 13:33 Uhr.

    Oh, da sind ja die Infos, die mir im ersten Teil gefehlt haben :D
    Ich hatte nicht mitbekommen, dass es ein Mehrteiler wird. Kommt vielleicht noch ein Teil 3?
    Jedenfalls fand ich den Artikel sehr gut!

    • Jonas Hellwig

      Verfasst am 24. November 2010 um 13:52 Uhr.

      Es kommt noch ein Teil 3. bzw. ergänzende Informationen rund um das Thema. Auch kleinere Tipps und Tricks.

  3. John

    Verfasst am 24. November 2010 um 17:04 Uhr.

    Well-designed website!

  4. Tom

    Verfasst am 6. Dezember 2010 um 22:53 Uhr.

    Ein wirklich toller Beitrag!
    Mich würde interessieren, wir du den „Teilen“-Button in die Fanpage eingebunden hast.

    Ich habe auch einen bereits funktionierenden Button, jedoch läuft dieser über die „sharer.php“ und nicht über „/ajax/share_dialog.php“
    Das ist für mich ein großer Nachteil, weil die „Teilen“-Funktion immer als gesamtes Fenster erscheint statt im Ajax-Dialog.

    Aber wenn ich über „/ajax/share-diaog.php“ einbinde, erhalte ich gar keine Funktion.

    Gruß
    Tom

    • Jonas Hellwig

      Verfasst am 7. Dezember 2010 um 7:33 Uhr.

      @Tom: Eigentlich wollte ich den Artikel zu diesem Thema erst etwas später veröffentlichen. Aber da das Thema offenbar aktuelle und gewünscht ist hab ich das mal vorgezogen.

  5. Nana

    Verfasst am 22. Dezember 2010 um 23:04 Uhr.

    ….Seite bearbeiten → Genehmigungen verwalten“ und stellt unten den „Standard-Tab“ ein…
    Hallo, toller Artikel. Bin bis hier gekommen. Bei mir erscheint aber kein „Standart-Tab“.
    Wo kann ich ihn sonst noch festlegen???
    Viele Grüsse Nana

    • Jonas Hellwig

      Verfasst am 23. Dezember 2010 um 7:34 Uhr.

      @Nana: Hm. auf Anhieb wüsste ich nicht warum das bei dir nicht erscheint. Ich habe mal davon gehört, dass diese Option zukünftig nur für “große” Fanpages verfügbar sein soll. Aber das wurde dann soweit ich informiert bin wieder zurück genommen. Link zum Artikel.

      Facebook plant ja ein massives Update der gesamten Fan-Page Struktur. Vielleicht hat es was damit zu tun. Ich habe alle meine Fan-Pages geprüft. Bei mir ist der Punkt überall wie beschrieben erreichbar.

  6. Nana

    Verfasst am 23. Dezember 2010 um 22:17 Uhr.

    Danke für die schnelle Antwort. Habe es über einen anderen Administrador versucht, aber da erscheint der „Standard-Tab“ auch nicht. Na ja muss ich halt abwarten…
    Nana

  7. Pascal

    Verfasst am 28. Dezember 2010 um 22:04 Uhr.

    Habe ebenfalls das Problem das „Standard-Tab“ nicht angezeigt wird. Merkwürdig …

  8. Chris

    Verfasst am 24. Januar 2011 um 23:29 Uhr.

    Geile Internetseite!!! Da will man ja garnicht mehr weg

  9. Charky

    Verfasst am 9. März 2011 um 19:12 Uhr.

    Hallo!

    Auch bei mir ist kein Standard Tab zu finden. Gibt es da mittlerweile einen anderen Weg?

  10. Sonja

    Verfasst am 19. März 2011 um 15:53 Uhr.

    bei mir ist auch kein standard tab zu finden – ich verstehe einfach nicht warum. kann es daran liegen, dass die seite über einen privaten account angelegt wurde?

  11. Bärbel Loy

    Verfasst am 2. April 2011 um 12:10 Uhr.

    Sehr informativer Artikel. Gut und sehr ausführlich beschrieben.
    Macht süchtig nach mehr.

  12. pedro pinar

    Verfasst am 30. März 2012 um 2:56 Uhr.

    ist das alles noch aktuell bei der neuen cronik?
    Merci Pedro

  13. Trebbin

    Verfasst am 10. April 2012 um 12:00 Uhr.

    hast du auch schon eine Möglichkeit mit der Timeline eine individuelle Startseite zu erstellen?

    • Jonas Hellwig

      Verfasst am 10. April 2012 um 12:42 Uhr.

      @Trebbin: Die Startseite ist ja nach wie vor ein individueller iframe-Tab. Es fehlt nur seit Einführung der Timeline die Möglichkeit einen Tab als Startseite einzurichten. Die Chronik kommt immer zuerst. Daher machen Startseiten seit Einführung der Chronik keinen Sinn mehr. Ich kenne bisher auch keine Möglichkeit das zu umgehen.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.