Facebook-Apps im Reiter – 5 Tipps für das Planen einer Facebook-Anwendung

Like it?
Share it!

In unserem heutigen Whitepaper stellt Thomas Lange 5 Tipps zur Planung und Gestaltung von Facebook-Anwendungen in Tabs vor. Das Whitepaper ist sowohl als Download als auch auf Scribd verfügbar.

Whitepaper: Facebook-Apps im Reiter
PDF, 4.6 MB (Share & Embed via Scribd)

Seit Anfang September zählt Facebook über 11 Millionen Mitglieder in Deutschland. Nicht zuletzt dank der rasant wachsenden Nutzerzahlen haben auch hierzulande immer mehr Unternehmen das Bedürfnis, auf Facebook präsent zu sein.

Wenngleich inhaltliche Anpassungen einer Fanseite beispielsweise über Info-Boxen schnell und einfach bewerkstelligt werden können, sind die Möglichkeiten der gestalterischen Individualisierung eher spärlich. Abgesehen von dem Profilbild lässt sich das uniforme Layout der Fanseite nur über einen sogenannten „Custom Tab“ dem Corporate Design anpassen.
Der „Custom Tab“ kann aber viel mehr, als „nur“ schön aussehen. Als Reiter Applikation (Tabbed Application), wird er zu einem mächtigen Werkzeug. Egal ob individuelles Kontaktformular, Flash-Film oder Gewinnspiel, Reiter-Applikationen können ganz nach eigenen Wünschen gestaltet und wie der Pinnwand-Reiter im Hauptmenü der Fanseite platziert werden. Somit sind sie eine interessante Alternative zu den für das Facebookeigene „Application Directory“ entwickelten Applikationen, denn als „Tabbed Apps“ stehen sie immer in direkter Verbindung zur Fanseite des Unternehmens.

Applikation ist nicht gleich Applikation!
Leider herrscht in Bezug auf Applikationen bei Facebook ein ziemliches Durcheinander. Neben Applikationen, die außerhalb von Facebook zum Einsatz kommen, wie zum Beispiel „Facebook Connect“, kann man innerhalb von Facebook zwischen zwei Typen unterscheiden. Entweder liegt die Applikation innerhalb eines Reiters („Tabbed App“ ) oder sie wird für das sogenannte „Application Directory“ entwickelt.
Nicht alle Konzepte lassen sich innerhalb eines Reiters umsetzen. Dynamische Apps oder Applikatio-nen mit einem hohen Grad an Interaktion sollten, wenn möglich, für das „Application Directory“ kon-zipiert werden. Die Anwendung für das „Application Directory“ liegt außerhalb der Fanseite unter einer neuen URL (apps.facebook.com/[Applikationsname]). Eine Verlinkung der Applikation über einen Teaser, der innerhalb eines „Custom Tabs“ auf der Fanseite integriert wird, kann auf die ei-gentliche Anwendung verlinken. Diese Art der Applikation ist zwar die bisher am weitesten verbreitete Variante und unterliegt geringeren technischen Einschränkungen. Jedoch birgt sie den Nachteil, dass Benutzer durch die sich in einem anderen Fenster oder Tab öffnende Anwendung von der eigentlichen Fanseite weg geführt werden.

Ein Teaserbild im Reiter weist den Weg zur Applikation „AIDA Clubbies“, realisiert für AIDA Cruises.

Die Applikation „AIDA Flieger“ als Beispiel für eine Applikation außerhalb des Reiters.

Hier liegt der Vorteil der Reiter-Applikationen, die ein integraler Bestandteil der Fanseite sind. Was allerdings die Wenigsten wissen: Die technischen Möglichkeiten im Rahmen einer Reiter-Applikation unterliegen zahlreichen Beschränkungen. In der Praxis führt dies häufig dazu, dass bereits erarbeitete Konzepte nicht oder nur eingeschränkt realisierbar sind. Folgende Tipps sollen helfen, solche Probleme zu vermeiden:

1. Grundzutaten für eine Reiter-Anwendung
Für Reiter-Applikationen gelten grundlegend die gleichen Bestimmungen wie für Facebook-Anwendungen, die für das „Application Directory“ entwickelt werden: Alle in Reiter-Applikationen verwendeten Dateien müssen auf einem eigenen Webserver gehostet werden. Dazu gehören zum Beispiel Grafiken, Flash-Dateien, HTML- oder Script-Code. Darüber hinaus gehören zu einer vollwertigen Anwendung neben dem Applikations- und Reiternamen auch eine Symbol- und eine Icon-Grafik für die Anwendung. Hier gilt es die Vorgaben von Facebook zu beachten: Die Symbolgrafik ist auf 75×75 Pixel und die Icon-Grafik – also die Grafik, welche bei jedem Pinnwandpost der App-Nutzer zusätzlich erscheint – auf 16×16 Pixel begrenzt.

Symbolgrafik (1) und Icon-Grafik (2), welche im Pinnwandpost eines Nutzers erscheint.

Symbolgrafik (1) und Icon-Grafik (2), welche im Pinnwandpost eines Nutzers erscheint.

Zudem darf die sogenannte Canvas URL – die Adresse, welche direkt zur Applikationsseite führt – nur aus Kleinbuchstaben und Unterstrichen gebildet werden. Zahlen und andere Sonderzeichen sind nicht zulässig. Diese Dinge sollte bereits in der Konzeptphase bedacht und recht früh geklärt werden.

2. Auf die Länge kommt es an
Anfang September hat Facebook – wie schon lange angekündigt – die maximale Reiterbreite verändert. Ließen früher üppige 760 Pixel Platz für gestalterischen Freiraum, gilt es nun, das Seitenkonzept auf 520 Pixel unterzubringen. Hier empfiehlt sich allerdings ein Sicherheitsabstand von weiteren zwei Pixeln, um unschöne Scrollbalken zu vermeiden. Der Name der Applikation darf mit maximal 50 Zeichen ausgestattet werden. Der letztendliche Name des „Custom Tab“ muss hingegen mit schlanken 16 Zeichen auskommen.

3. Ohne Klick nichts los – Flashelemente müssen per Mausklick aktiviert werden
Bei der Planung von multimedialen Inhalten wie Flash-Animationen oder Flash-Videos für die Reiter-Applikation muss beachtet werden, dass diese nicht automatisch starten. Erst durch den Mausklick des Nutzers werden Flashinhalte initialisiert. Eine entsprechend gestaltete Grafik oder wahlweise ein Textlink zum Aktivieren von Flashinhalten schafft hier Abhilfe.

Unscheinbar aber extrem wichtig. Die Grafik oder der Text zum Aktivieren von Flashinhalten sollten eine Klickaufforderung enthalten.

Unscheinbar aber extrem wichtig. Die Grafik oder der Text zum Aktivieren von Flashinhalten sollten eine Klickaufforderung enthalten.

Der „YourArea"-Bereich von Lufthansa besteht aus Flash.

Der „YourArea"-Bereich von Lufthansa besteht aus Flash.

Wurde das Flash-Element erst einmal aktiviert, bietet sich viel Raum für sehr dynamische und anspruchsvolle Fanseiten-Inhalte. Auch Videos und Animationen sind kein Problem.

Vorsicht ist in diesem Zusammenhang auch bei Reiter-übergreifenden Inhalten geboten. Wechselt der Nutzer zwischenzeitlich den Reiter, wird der komplette Inhalt neu initialisiert. Auch vom Einsatz einer Flash-Navigation innerhalb eines Reiters in Kombination mit HTML-Inhalten ist abzuraten.

4. Entwickler aufgepasst – Starke Einschränkungen bei externem Code in Reiter-Applikationen
Die Programmierung einer Reiter-App ist weiteren Restriktionen unterworfen, die vor allem von Entwicklern beachtet werden müssen. Externe Dateien von üblichen Programmier- und Formatierungssprachen wie CSS oder JavaScript werden vom Facebook-Server aggressiv zwischengespeichert und nicht mehr aktualisiert, falls sich deren Inhalt ändert. Nur ein Umbenennen oder ein Anhängen einer Versionsnummer kann dieses Problem umgehen. Facebook belegt zudem diese Sprachen mit starken Restriktionen und benennt diese Dialekte FBJS (Facebook JavaScript) oder FBML (Facebook Markup Language).
Auch Verlinkungen, die eine Unterseite der Reiter-Applikation aufrufen sollen (Deeplinks) sind, genau so wie Parameterübergaben, nicht möglich. So kann beispielsweise die Sprache nicht über einen GET-Parameter eines externen Links an eine Reiter-App innerhalb der Fanseite übergeben werden. Dieses Problem wird deutlich, wenn man von seiner eigenen Homepage auf eine bestimmte Sprachversion der Fanseite verlinken oder die Besucher im Rahmen einer Newsletter- oder Bannerkampagne auf diesem Wege direkt zu ihrer Sprachversion leiten möchte. Ebenso sollte beachtet werden, dass der direkte Zugriff auf die Eigenschaften der Fanseite nicht möglich ist. Auch auf die Details von Nutzerprofilen kann über die Scriptsprache PHP innerhalb eines Reiters erst dann zugegriffen werden, wenn der Nutzer der Applikation den Zugriff gestattet hat.
Eine Navigation innerhalb des Reiters kann somit nur über die als Ajax bekannte Technologie erfolgen. Dafür bietet Facebook innerhalb der FBML mit MOCK Ajax eine einfach zu benutzende Möglichkeit an. Allerdings wird unter MOCK Ajax sofort nach Betreten der Anwendung innerhalb des Reiters die Autorisierung verlangt. Dieser Umstand führt häufig zum schnellen Abbruch durch die Besucher der Fanseite. Die sofortige Autorisierungsaufforderung unter MOCK Ajax steht so gut wie nie im Zusammenhang mit einer Aktion, bei der die Besucher nachvollziehen können, warum die Facebook-App auf ihre Profildaten zugreifen möchte. Nur mittels FBJS kann dieser Zulassungsprozess soweit hinausgezögert werden, bis tatsächlich Daten vom Nutzer für die Anwendung benötigt werden.

Nicht unmöglich, aber mit vielen Hindernissen verbunden: Das Rügenwalder- Gewinnspiel „Wurstwahnsinn“ als Reiter-Applikation realisiert für die elbkind GmbH Hamburg.

5. Gewinnen will gelernt sein

Besonders für Gewinnspiele bieten sich Reiter-Apps an. Die „Facebook-Gewinnspiel-Policy“ ist dabei genauestens zu beachten. Sie schreibt sehr genau vor, wie Gewinnspiele innerhalb von Facebook ablaufen müssen. So dürfen Gewinnspiele nur über Applikationen durchgeführt werden und sind 7 Tage vor der eigentlichen Veröffentlichung bei Facebook zur Kontrolle einzureichen. Bei der Prüfung wird besonders auf die Teilnahmebedingungen gesteigerter Wert gelegt. Ist die Facebook-Applikation bereits einsatzbereit und sind die Teilnahmebedingungen in ihrer finalen Form bereits integriert, kann das den Freigabeprozess enorm beschleunigen.
Wichtig: Die Durchführung von Gewinnspielen über die Fanseiten-Pinnwand ist nach den Richtlinien genauso untersagt, wie die Benachrichtigung der Gewinner über Kommentare oder private Nachrichten. Nutzerdaten müssen somit über ein eigenes Formular abgefragt und auf einem eigenen Server gespeichert werden.

Zusammenfassung: Was nehmen wir mit?
1. Reiter-Applikationen sind eine interessante Alternative zu den für das Facebookeigene „Application Directory“ entwickelten Applikationen. Klarer Vorteil: „Tabbed Apps“ stehen immer in direkter Verbindung zur Fanseite des Unternehmens.

2. Flash-Inhalte können innerhalb eines Reiters nur durch den Zwischenschritt „Nutzerklick“ gestartet werden. Der dazu notwendige Text oder die Grafik sollten möglichst „animierend“ formuliert bzw. gestaltet sein. Einzig und allein von diesem Klick hängt ab, ob der Besucher die unter Umständen sehr aufwendig produzierte Anwendung zu Gesicht bekommt.

3. Man sollte den Entwicklungsaufwand einer Reiter-Applikation nicht unterschätzen. Vor allem im Zusammenhang mit Gewinnspielen auf Facebook sollte ausreichend Zeit bis zur Veröffentlichung eingeplant werden.

4. Vorsicht: Nicht alle Konzepte lassen sich innerhalb eines Reiters umsetzen. Dynamische Apps oder Applikationen mit einem hohen Grad an Interaktion sollten, wenn möglich, für das „Application Directory“ konzipiert werden. Eine Verlinkung der Applikation über einen Teaser, der als „Tabbed Application“ auf der Fanseite integriert wird, kann auf die eigentliche Anwendung verlinken.

5. Alles ist steten Veränderungen unterworfen. Facebook ist ein weiterhin aufstrebendes Unternehmen mit ständigen Innovationen. Sachverhalte, die heute noch aktuell sind, können morgen schon wieder umgestaltet werden. Noch vor wenigen Wochen war beispielsweise nicht daran zu denken, dass externer Code innerhalb einer Reiter-Applikation gennutzt werden kann.

Über den Autor:
Thomas Lange ist Inhaber der Flash und TYPO3-Agentur PLUSPOL interactive. Vom einfachen Produktberater-Quiz, über diverse Gewinnspiele, bis hin zur Adaption von „Farmville“, einem der erfolgreichsten Facebook-Spiele, setzte das Unternehmen in den letzten zwölf Monaten über 20 Facebook-Anwendungen erfolgreich um. Damit bedient die Agentur neben ihren Kernkompetenzen auch das Social-Media-Segment. PLUSPOL steht sowohl Agenturen als auch Endkunden, nicht nur bei der technischen Umsetzung, sondern auch in Konzeption und Beratung zur Seite.


6 Kommentare

  1. Jonas

    Hallo,
    wie ich sehen kann beschäftigt ihr euch intensiv mit facebook apps deshalb meine frage hier als kommentar. Durch die bald in kraft tretende änderung das apps nicht mehr auf der user-page angezeigt werden fällt ein ganz enscheidendes virales werkzeug weg. habt ihr schon alternativen entdeckt? wird facebook hieran nocheinmal etwas ändern?

    Antworten
  2. franz

    Hi,
    Wie ist das denn genau, ich hatte nicht das Gefühl man kann sich beim erstellen einer App aussuchen ob diese nun für den Reiter oder auch nicht erstellt werden soll. Wo ist also der Unterschied, ausser das der Teil der eigentlichen App nicht in HTML sondern in FBML gecodet werden muss?

    THX

    Antworten
  3. Iri

    Hallo ich habe mal kurz eine Frage. Wie frei ist man denn, wenn man eine App via Application Directory erstellt? Ist alles möglich was auch sonst auf einer Internetseite möglich wäre?

    Antworten
  4. wenn ich die Beispiel AIDA und Rügenwalde Wurst bei FB angucke, dann sehe ich keine Tabs oben (auch nicht, wenn ich Fan geworden bin). Die Seiten werden links in der Spalte verlinkt.
    Ist das nur bei mir so, oder hat FB das inzwischen wieder alles geändert?
    Oder bin ich auf falschen Seiten gelandet?

    Antworten

Diskutiere mit uns!