Facebook Fan Pages: Was bringen die neuen IFrame Tabs in der Praxis?

Facebook Fan Pages: Was bringen die neuen IFrame Tabs in der Praxis?


Bildnachweis: PNetzer & KONG / photocase.com

Bildnachweis: PNetzer & KONG / photocase.com

Facebook lässt mit den IFrame Tabs für Fan Pages viele Marketing-Herzen höher schlagen. Was bisher häufig (zwangsweise) über Canvas Apps umgesetzt wurde, ist nun direkt innerhalb der Unternehmensseite möglich. Was genau das für künftige Kampagnen auf Facebook bedeutet soll dieser Artikel genauer beleuchten. Zunächst wollen wir mit einer umfangreichen Vor-/Nachteile-Übersicht die Unterschiede zwischen FBML und IFrame Apps aufzeigen.

Vorteile der Facebook iFrame Tabs:

  • HTML, Javascript, CSS können nun uneingeschränkt in Tabs genutzt werden, inkl. externen JS Bibliotheken für umfangreichere Vorhaben. Bisher war nur ein Teil dieser Technologien nutzbar (z.B. FBJS), Browseroptimierung war häufig problematisch bis unmöglich.
  • URL Parameter konnten bisher nicht an einen Tab durchgereicht werden, was nun funktioniert (Parameter app_data in signed_request). Hierdurch ergeben sich zahlreiche neue Anwendungsbeispiele für Tabs (siehe unten).
  • Tracking ist nun wie bei anderen Websites möglich (Google Analytics, Piwik, etracker, Webtrekk, eigenes Tracking, …) durch JS Code oder Server-Logfiles. FBML Tab Tracking war quasi nicht möglich. Die IP-Adresse und Browserinformationen sind nun also auch verwertbar.
  • Bei FBML Apps konnte in Fan Page Tabs kein Autoplay genutzt werden, was nun funktioniert (YouTube Videos, Flash Animationen, …).
  • Nutzung aller Social Plugins wie in Canvas Apps (der Like-Button z.B. funktionierte bisher nicht eigenständig in FBML Apps, sondern nur in Kombination mit der Comment Box)
  • Cookies können nun beim Benutzer hinterlassen werden (z.B. könnte eine manuelle Sprachauswahl so dauerhaft gespeichert werden)
  • Ladezeiten und Verlässlichkeit der Tabs dürften profitieren (bisher sind FBML Tabs häufiger beim Laden stehengeblieben, was von Kunden und Benutzern bemängelt wurde, außerdem war der Ladeprozess generell eher langsam)
  • Konsistente Entwicklung von Facebook Anwendungen, egal ob Fan Page Tabs, Facebook Canvas Apps oder Facebook Connect Implementierungen → sinkende Kosten für Facebook Entwicklung
  • Facebook nimmt kein Caching mehr vor, sodass z.B. Bilder keinen Cache Breaker mehr beim Update benötigen. Dies hat in der Vergangenheit häufig zu Verzögerungen in der Entwicklung und im Testing geführt. Außerdem werden Bilder so nicht mehr nach Facebook “Maßstäben” komprimiert, was teilweise zu erheblichen Qualitätseinbußen führte.
  • Teilweise weniger Facebook spezifisches Know-How notwendig (ohne Graph API und Social Plugin Integration)

Nachteile der Facebook iFrame Tabs (zu FBML Custom oder Static FBML Apps):

  • Static FBML Tabs werden aktuell auch nicht eingeloggten Facebook Benutzern angezeigt, IFrame Tabs hingegen noch nicht. Hier wird es aber sicher noch Updates geben, da neue FBML Tabs ja ab März abgeschafft werden und Landing Pages auch für Nicht-Facebook-User wichtig sind.
  • Als Entwickler muss man sich nun wieder um die korrekte Höhe des IFrames kümmern, indem man die Facebook Funktionen FB.Canvas.setAutoResize(); und/oder FB.Canvas.setSize({ width: x, height: y }); nutzt, ansonsten ist die Standard Höhe für einen IFrame Tab 800px.
  • Hat der Endbenutzer die Option “sicheres Durchstöbern (https)” in seinen Facebook Kontoeinstellungen aktiv, werden nur Tabs/Apps geladen, welche auch eine SSL Verbindung anbieten (Konfiguration über Developer App). Bei Static FBML war auf Kundenseite kein SSL Zertifikat für HTTPS Verbindungen erforderlich.
  • HTML/JS/CSS Code kann nun aus dem Quelltext des IFrames kopiert/geklaut werden, was bisher in FBML Apps nicht ohne Weiteres möglich war, da hier der FBML Code erst von Facebook interpretiert und über AJAX nachgeladen wurde.
  • Static FBML App war bisher sehr einfach und ohne Hosting einer eigenen Seite möglich
  • Static FBML App war sehr einfach hinzuzufügen, ohne als Facebook Entwickler registriert und aktiviert zu sein
  • FBML war für viele eine kleinere Hürde als “richtige” Websites in IFrames zu entwickeln
  • Der Traffic wird nun direkt auf den eigenen Servern generiert, sodass evtl. mehr Ressourcen benötigt werden bzw. mehr Kosten entstehen.
  • CSS Styles werden nicht mehr von Facebook übernommen, sodass nun Mehraufwand betrieben werden muss um konsistent mit dem Facebook Layout zu bleiben.
  • Mögliche Datenschutz-Diskussionen (Canvas Apps funktionieren schon länger so!)?

Wie die Auflistung zeigt, gibt es viele sehr positive Entwicklungen. Demgegenüber stehen aber auch einige Nachteile, welche größtenteils jedoch wenig Relevanz haben sollten. Insgesamt ist das Update also ein großer Schritt für erfolgreiche Marketingaktivitäten auf Facebook. Für kleine Seitenbetreiber oder Webdesigner, welche mit Static FBML gearbeitet haben, wird das Facebook-Leben nun wohl etwas umständlicher.

Wichtig: Natürlich wird weiterhin die Genehmigung des Benutzers benötigt, bevor man auf Benutzerdaten (UserID, Basisdaten oder erweiterte Daten) zugreifen kann. Lediglich die Sprache des Benutzer, das Herkunftsland und der aktuelle Fanstatus werden direkt übermittelt, ebenso die Information, ob der Benutzer Admin der Fan Page ist.

Quelle: Facebook.com

Quelle: Facebook.com

Mögliche (neue) Anwendungsszenarien:

1. Ad Tracking über URL Parameter

Mit der neuen Möglichkeit einen Parameter an den Tab zu übergeben könnte man so die Quelle, also z.B. eine Facebook Werbeanzeige, angeben, sodass man nun End-to-end Monitoring betreiben kann. Der Parameter “app_data” ist sicherlich nicht branchenüblich in der Webanalyse, aber über kleine Umwege kann man so dennoch erfolgreiches Ad Monitoring betreiben. Auch externe Seiten oder Banner-Werbeanzeigen können so den “Absender” hinterlassen.

2. Detailseiten über URL Parameter

Mit dem gleichen Parameter kann alternativ auch die Zielseite genauer definiert werden, also ein bestimmter Inhalt im Tab geladen werden. Dies könnte man natürlich auch abhängig von der Quelle machen (siehe oben) um z.B. verschiedene Landing Pages für unterschiedliche Anzeigen im Tab unterzubringen. Außerdem können z.B. Shops direkt auf einen bestimmten Artikel linken oder Facebook Gewinnspiele und Contests direkt im Tab auf einen Teilnehmer linken. Es gibt hier zwar die Beschränkung auf den Parameter “app_data”, dennoch lassen sich mit geringem Mehraufwand gezielt Inhalte ansprechen.

3. Vereinfachtes Fangating kann Conversions in Kampagnen steigern

Da nun neben dem Like-Button auch normale Javascript Bibliotheken wie jQuery eingesetzt werden können, könnten künftige Fangating Lösungen attraktiver gestaltet werden. Der Like-Button muss durch den Benutzer also nicht mehr oben (beim Fan Page Titel) geklickt werden, worauf man in der Regel mit einem Pfeil zeigte – er kann nun direkt im Tab liegen. Über Javascript kann der Click-Event genutzt werden, um z.B. die Seite dann komplett neu zu laden (wie bisher) oder aber den aktuellen Content dynamisch auszublenden und den neuen “Fan Content” einzublenden. Vorteil: Geringere Ladezeit, attraktiver für den Benutzer und der Hinweis auf den Like-Button (bitte “gefällt mir” klicken) ist ebenfalls einfacher, auch wenn es natürlich aktuell etabliert ist, diesen oben zu suchen.

Da bei Kampagnen nun nach dieser Vorschaltseite auch direkt der Content erscheinen kann – ohne Umwege über einen weiteren Klick zur Kampagne und ohne Verwirrung für den Benutzer (warum ändert sich die URL und wo ist die Fan Page hin?) – dürften die Conversions in Kampagnen steigen. Zudem muss man nicht mehr, wie häufig gesehen, die Fan Page innerhalb der Canvas App nachbauen um den Benutzern ein heimisches Gefühl zu vermitteln. Der Benutzer ist weiterhin auf der Fan Page.

4. Multimedia (Audio, Video, …)

 

Beispielhafte Integration eines Youtube-Videos in unserer Demo

Videos und Flash Inhalte oder auch Sounds können mit den IFrame Tabs nun einfach beim Laden des Tabs abgespielt werden.

Allerdings sollte man hierbei beachten das die aktualisierten Facebook Platform Policies ein automatisches Abspielen/Starten von Multimediainhalten nicht zulassen. Hier heißt es im Abschnitt “Features and Functionality” => “Special provisions for apps on Pages”: Apps on Pages must not host media that plays automatically without a user’s interaction. D.h. Audio und Video darf nicht sofort beim Laden der Seite gestartet werden, ein Countdown oder andere Animationen jedoch dürfen wohl sofort gestartet werden.

Demo und häufige Fragen:

Viele der hier vorgestellten Ansätze findet man im IFrame Demo Tab, wo die Neuerungen live begutachtet werden können.

Warum wird der Tab nicht korrekt dargestellt und ist stattdessen weiß?

Dies wird in der Regel an der Kontoeinstellung “sicheres Durchstöbern (https)” liegen. Entweder man schaltet diese Konfiguration als Benutzer kurzzeitig oder dauerhaft wieder aus, oder man definiert als Tab Betreiber auch die HTTPS URL. Hier sollte dann auch ein Domain- oder besser Organization SSL-Zertifikat installiert sein. IFrame Tabs werden außerdem nur in den neuen Fan Pages unterstützt, sodass eine vorherige manuelle Migration notwendig ist, bis die Fan Pages im März dann automatisch durch Facebook aktualisiert werden. Ansonsten werden IFrame Tabs aktuell auch nicht angezeigt, wenn der User nicht in Facebook eingeloggt ist.

Warum werden die Facebook Social Plugins in meinem Tab nicht gerendert?

Sollte es zu Fehlern beim Rendern der Facebook Social Plugins kommen liegt dies in der Regel daran, dass man als Fan Page angemeldet ist und nicht als normaler Benutzer. Den Wechsel kann man auf der Fan Page rechts oben vornehmen oder aber über “Konto” → “Zurück zu Profilname” wechseln. Sollten die Plugins nur im Internet Explorer nicht korrekt angezeigt werden, muss vermutlich noch xmlns:fb=”http://www.facebook.com/2008/fbml” in den HTML Tag <html …> aufgenommen werden.

Fazit:

Facebook hat mit den umfangreichen Fan Page Änderungen und dem Comeback der IFrames in Tabs einen großen Schritt nach vorne gemacht, was vor allem professionelle Fan Page Betreiber freut. Man darf gespannt sein, wie sehr nun eine Verlagerung von Canvas Applications Richtung Tabs stattfindet und wo die Canvas Apps für Fan Page Betreiber ihre Position behalten dürfen, evtl. gerade in den Kampagnen wo auffallendes Branding eher nicht gewünscht ist oder aber 520px Breite nicht ausreichend sind. Was glaubt ihr?

Dieser Beitrag vertieft das Thema “IFrame Tabs” in Facebook Fan Pages für Unternehmen und zeigt neue mögliche Ansätze auf, um erfolgreiche Kampagnen bei Facebook durchzuführen. Mike Lieser ist CTO der 247GRAD GmbH Co-Founder und CTO bei Hike Social Apps und Spezialist für die technische Umsetzung von Facebook Apps.

Bildnachweis: PNetzer & KONG / photocase.com

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

Es gibt 32 Kommentare

Deinen hinzufügen
  1. 1
    Ian

    Vielen Dank für den Gastbeitrag!
    “Für kleine Seitenbetreiber oder Webdesigner, welche mit Static FBML gearbeitet haben, wird das Facebook-Leben nun wohl etwas umständlicher.”
    Leider ja! Deshalb frage ich ganz unverschämt, ob ihr auch eine Dokumentation veröffentlichen könntet, wie genau die iFrames gestaltet werden müssen, um bspw. eine YouTube-Playlist einzubauen oder eine Newsbox wie diese http://www.schoenen-dunk.de/cont_news.htm.

    Vielen Dank im Voraus!

  2. 4
    Mike Lieser

    @Toby: Ich schätze schon das es noch eine Änderung geben wird, ansonsten würde hier ja Funktionalität auf der Strecke bleiben, welche heute vorhanden war und auch wichtig ist. Ich vermute im März, wenn neue FBML Apps nicht mehr zugelassen werden, wird dies auch möglich werden. Die offene Frage ist nur was mit den Übergabedaten in signed_request passiert, was sich dann auch auf die Tab Logik auswirkt. Für Gäste können ja keine Sprachinformationen übermittelt werden.

  3. 7
    Mark Kühler

    Stimmt, die Images passen perfekt rein. Das einzige Problem ist, das ich von “Links” ein abstand habe und deswegen passte es nicht in den 520px bereich rein. Komisch..
    @Mike: Danke für die Info!

  4. 8
    Mark Kühler

    Hi nochmal,

    nun habe ich noch eine Frage bzw. Problem. Mein Tab ist nun höher als 800px – wie genau bzw. wo kann ich das ändern / anpassen, damit der scrollbalken verschwindet?

  5. 10
    flo bergmann

    Ehrlichgesagt habe ich mir mehr Erleichterung erhofft… Es ist jetzt genau das Gegenteil eingetreten und alles noch etwas umständlicher geworden. Oder anders: Distanzierter von facebook. Das Caching war super, man konnte die Last prima an facebook abgeben und andersrum waren die Ladezeiten für die Nutzer dadurch auch in Stoßzeiten recht gut. Gerade für komplexe Applikationen – die dadurch ja eigentlich profitieren sollten – sehe ich die Vorteile noch nicht so ganz. Ob die Karte jetzt in Flash oder in JavaScript umgesetzt wird ist natürlich eine gravierende Änderung allerdings: Wenn man es einmal zum Laufen gebracht hat, funktioniert es auch mit Flash wunderbar (auch wenn ich es zwischenzeitlich am liebsten mindestens 50 mal an die Wand geworfen hätte :/).

    Ich bin gespannt was für Vorteile uns die Änderungen nun tatsächlich in der Praxis bringen. Derzeitige, sehr komplexe Applikationen konnten wir aber ohne Probleme auch vorher umsetzten.

  6. 11
    flo bergmann

    Btw: Tracking nicht möglich muss ich auch widersprechen: Wir haben sogar Eventtracking und ähnliches via Google Analytics oder sonstiger Tools zuverlässig implementieren können. Alles eine Frage des Willens zum hacken ;)

  7. 12
    Walter

    Interessant finde ich, das jetzt Cookies beim User gesetzt werden können.
    Ich arbeite viel damit, weil ich es wichtig finde, um zu sehen, wer auch z.B. schon mal auf meiner Seite war.

  8. 15
    mcliquid

    520px sind im Vergleich zu den 700px damals wenig, aber meiner Meinung nach ausreichend für die meisten Anwendungen. Ich habe schon verdammt schöne Fanpage-Anwendungen gesehen.

  9. 20
    Mario

    Hallo liebes Facebookmarketing Team

    Mir ist aufgefallen, das die iFrames nicht beim erstenmal laden. Beim zweitenmal schon. Wenn ich dann den Browser-Cache leere, funktionierts wieder nicht. Any Ideas ? p.s. Super Job den Ihr da macht.

    LG Mario

  10. 21
    SR

    @Ian
    ich habe die Anmutung Nachempfunden. Ein Blick in die CSS von facebbok zeigt, welche Farben, Schriftgrößen etc genutzt wurden. Das Handling kann nachempfunden werden. Ich entschied mich gegen ein extrem abweichendes Layout, da es dann nicht mehr in die gesamte Optik passt. Stattdessen lieber eine fb-cd-Anpassung.

  11. 23
    Chris

    Wie sieht es eigentlich mit SEO aus? Bisher wurden ja von Google bereits einige Inhalte von Facebook gecrawlt und teils auch hoch gerankt. Durch die IFrames wird das nun schwieriger. Oder ist hierzu auch schon ein Lösung bekannt?

  12. 24
    Facebook Fanpage: iframe Tab Tutorial inklusive Code-Beispiel - himynameisnils

    […] Am 11. Februar 2011 hat Facebook den Fanpages ein neues Layout verpasst und gleichzeitig die Möglichkeit geschaffen, die manuellen Reiter für Fanseiten nun auch per iframe einzubinden. Mehr noch: Facebook wird die bisherige Möglichkeit, diese Fanpage Tabs per Static FMBL zu erstellen, ab Mitte März abschalten (zumindest für das Neuanlegen der Tabs, bestehende FMBL-Reiter bleiben natürlich erhalten). Dennoch sollte jeder Betreiber einer Fanpage prüfen, ob nicht ein Wechsel von Static FBML zu iframe angebracht ist. Welche Vor- und Nachteile das bringt, hat facebookmarketing.de ausführlich dargelegt. […]

  13. 25
    Roland

    1.) Darf eigentlich in den iFrames Fremdwerbung eingebunden werden, z.B. von OMS oder Eigenvermarktungen? Ist dafür eine Erlaubnis in den AGB zu finden?

    2.) Darf zumindest aus Facebook-Sicht ein IVW-Zählpixel in den iFrame eingebaut werden?

    Konnte zu beiden Punkten nichts im Netz finden. Aber zumindest Werbung in einer App sollte laut einem Golem-Bericht von 2007 erlaubt sein.

    Danke!

  14. 26
    Maria

    Oben unter Punkt 3 steht, man kann Fangating auch via Javasript machen. Weiß jemand irgendeine Seite auf der es dazu mehr Informationen gibt? Ich finde immer nur Anleitungen für Fangating mit PHP. Bräuchte dringen einen Hinweis, denn ich verzweifel langsam. Danke im Voraus!

  15. 27
    Beka

    Die Frage mit der Fremdwerbung, würde mich auch interessieren, da wir gern einen paar unserer Spiele als iFrame auf unserer Fanpage mit einbinden möchten. In unserem iFrame, welches wir auch auf unternehmensfremden Websites einbinden, sind die Spiele mit Werbung versehen und ein solches iFrame würden wir nun gern einbinden.

    Ist so etwas erlaubt?
    Danke für diese Information und all den anderen nützlichen Tipps und Tricks.

  16. 29
    Andi

    in den ad guidelines von facebook steht bei absatz 2.5 folgendes: “Zielseiten dürfen kein sogenanntes „Mousetrapping“ betreiben…” – eine grosse frage ist: darf ich per ajax auf einer tab app seiten nachladen? zb bei einem gewinnspiel mit mehrern fragen für den user, sodass ich nicht über den app_data parameter die ganze seite neu laden muss?

  17. 31
    Hendrik

    Hallo. Super klasse eure Erklärung und Zusammenfassung. Danke dafür.
    Jedoch habe ich eine Frage: Was passiert denn mit den PopUps beim iFrame? Die einfache FBML-Implementierung über fb:dialog scheint ja irgendwie nicht mehr möglich zu sein?!

    Sonnige Grüße
    HendriK

+ Hinterlasse einen Kommentar