Viele Seitenbetreiber sehnen es seit langer Zeit herbei: die Integration von „echten“ Webseiten in den eigenen Facebook Auftritt. Bisher war allein die Anzeige von FBML innerhalb eines Tabs auf der eigenen Seite möglich. Seit gestern, dem 10.2.2011, lassen sich jedoch auch iFrames innerhalb eines Tabs anzeigen. Mit all seinen Vor- und Nachteilen. Die Vorteile liegen […]
Viele Seitenbetreiber sehnen es seit langer Zeit herbei: die Integration von „echten“ Webseiten in den eigenen Facebook Auftritt. Bisher war allein die Anzeige von FBML innerhalb eines Tabs auf der eigenen Seite möglich. Seit gestern, dem 10.2.2011, lassen sich jedoch auch iFrames innerhalb eines Tabs anzeigen. Mit all seinen Vor- und Nachteilen.
Die Vorteile liegen auf der Hand: es lässt sich „gewöhnliches“ HTML inkl. JavaScript (jQuery, prototype, Ajax, etc.) verwenden. Der proprietäre und krude Facebook FBML-Dialekt gehört damit der Vergangenheit an. Allerdings gibt es auch ein paar Nachteile: der erste liegt darin, dass die breite innerhalb eines Tabs auf 520 Pixel beschränkt ist. Der Rand drumherum wird von Facebook, seinen Leisten und Bannern, verwendet. Er zweite Nachteil ist der, dass Social-Widgets wie Like- und Share-Buttons etwas aufwändiger als in FBML nachzubauen sind.
Die Einrichtung einer iFrame Tab-App unterscheidet sich nur wenig von der Einrichtung einer gewöhnlichen Tab-App. Allein der „Page Tab Type“ muss in den „Facebook Integration Settings“ einer Tab-App auf iFrame gesetzt werden. Der Aufenthalt der Tab-App Seite wird wie bisher über die Kombination von Canvas URL und Tab URL bestimmt:
Einrichten einer Tab App
Das war es dann auch schon an nötigen Umstellungen auf Seiten der App-Administration.
Nach den oben aufgeführten Umstellungen wird die in der Tab URL angegebene Seite nicht mehr als FBML Seite angezeigt. FBML Code wird vielmehr ignoriert. Man erhält jedoch ganz neue Freiheiten.
Ein sehr praktisches Feature ist die Bestimmung, ob der Besucher bereits Fan der Seite ist oder nicht. Das dazu bisher zum Einsatz gelangende FBML Tag <fb:visible-to-connection> hatte seine Tücken: erstens war der Quellcode der für einen Fan nicht anzuzeigenden Daten stets auslesbar, zweitens war die Anzeige spezieller Informationen für Nicht-Fans via <fb:visible-to-connection> ein relativ komplexes Unterfangen.
Das ist mit den neuen Tab-iFrames und ein wenig serverseitigem Programmcode Geschichte. Anders als eine Canvas App, die ja im Grunde „ausserhalb“ von Facebook läuft, und daher aufwändige Anmeldeprozeduren benötigt, die über ein kompliziertes Facebook-API abgewickelt werden, ist eine iFrame Tab-App sofort einsatzbereit. Dazu sendet Facebook der Tab-App den signed_request Parameter, der auf dem Server ausgewertet werden kann, und so beispielsweise die Unterscheidung zwischen Fans und Nicht-Fans erlaubt.
Der signed_request enthält dazu ein base64_url kodiertes (kein „einfaches“ base64!) JSON Objekt mit folgendem Aufbau:
Code Snipped “signed_request”
Download Code-Snippet:_signed_request (.txt)
Innerhalb des Page-Unterobjektes finden sich die beiden Felder liked und admin, die Auskunft darüber geben, ob der Besucher die Fanpage bereits geliked hat und ob der Besucher ein Administrator der Seite ist. Angenehm in diesem Zusammenhang: der liked Zustand ist nicht an den admin Zustand gekoppelt, was das Testen der eigenen Anwendung erleichtet. (Das ist anders als bei <fb:visible-to-connection> wo der Admin immer Fan- und Nicht-Fan Inhalte gleichzeitig sieht).
Diese beiden Felder lassen sich bequem auf Seiten des Server auswerten. Das folgende PHP-Snippet zeigt, wie der signed_request Parameter zunächst von base64_url in ein „lesbares“ Format gewandelt wird, und wie im Anschluss die Daten aus dem lesbaren String in ein JSON-Objekt gewandelt werden, um letzlich ausgewertet zu werden:
Code-Snippet: Auswertung des signed_request in einer Tab App
Download Code-Snippet: Auswertung signet_request in einer Tab App (.txt)
Das einzige, was man zum Ausführen dieses Scripts noch benötigt, ist das App-Secret der Tab-App (s. Abbildung 1). Prinzipiell lässt sich der signed_request Parameter auch ohne das App-Secret auswerten – das Problem dabei ist jedoch, dass man nicht mehr sicher sein kann, dass die Anfrage an die Tab-App wirklich über Facebook kam. Es ist daher dringend anzuraten, den signed_request immer mit Hilfe des App-Secrets zu verifizieren!
Nach Ausführen dieses Scripts steht in den Variablen $page_liked und $page_admin ob der Besucher des Tabs auch Fan der Seite ist, oder ob er sogar Admin der Seite ist.
Neben der Kenntnis, ob ein Besucher Fan ist oder nicht, ist auch die Sprache, die ein Besucher versteht von grosser Wichtigkeit. Das gilt nicht nur für unsere Nachbarn in der Schweiz, in der ja vier Sprachen (Deutsch, Französisch, Italienisch und Rätoromanisch) gesprochen werden, sondern auch für viele international agierende Konzerne.
Über den signed_request lassen sich dazu zwei Parameter aus dem user-Subobjekt auslesen:
Code-Snippet: Auslesen von Land und Sprache
Download Code-Snippet: Auslesen Land und Sprache (.txt)
country gibt dazu den ISO-Code des Herkunftslandes an, locale nennt die Sprache (inkl. Dialekt) , in der der Benutzer kommunizieren will. Einer zuvorkommenden Anpassung des Tabs an die Bedürfnisse des Besuchers steht damit nichts mehr im Wege.
iFrame Tab-Apps bieten deutlich mehr Freiheiten, als die bisherigen Tab-Apps. So lässt sich beispielsweise JavaScript in vollem Umfang nutzen. Folgendes Script zeigt beispielswiese die Nutzung von jQuery, m einen einfachen Dialog anzuzeigen (die css und js Verzeichnisse müssen von http://jquery.com/ und http://jqueryui.com/ heruntergeladen bzw. dort erzeugt werden. ):
Code Snippet 2: JavaScript Integration
Download Code Snippet 2: Javascript Integration (.TXT)
Abbildung 2: JavaScript/jQuery in einer IFrame Tab-App
Tabs lassen sich nun auch als Container für Canvas Apps nutzen. Wie gehabt muss der Besucher die Canvas App jedoch zunächst Zulassen und dabei den Tab zunächst verlassen. Anschliessend ist dann aber auch innerhalb der Tab App der Zugriff auf die User-ID und andere zugelassene Daten möglich ist. Dazu lässt der Anwender die Canvas App sowie deren Extended Permissions wie gehabt zu, und die Canvas App leitet dann auf den Tab der Fanseite um. Indikator hierfür ist das Vorhandensein des $data[‘page’] Subobjektes aus dem signed_request. Ist dieser Parameter nicht vorhanden, dann wurde die Seite ausserhalb des Tab angefordert, und der Server kann via JavaScript (window.location=tabadresse) einen Redirect anfordern (der Redirect via. header() funktioniert leider nicht so gut, weil hier die Session-Cookies innerhalb des iFrames nicht von allen Browsern „mitgenommen“ werden).
Der neue Tab-iFrame macht uns Entwicklern das Leben leichter. Endlich sind alle Funktionen einer Canvas App auch innerhalb eines Tabs verfügbar. Zwar stehen dazu nur 520 statt 760 Pixel für die Darstellungsbreite zur Verfügung, aber die bessere Integration der App in den eigenen Facebook-Auftritt macht dieses Mako vielfach wett.
Bruno Jennrich
Bruno Jennrich ist seit 1988 selbständiger Software Entwickler und Buchautor.
Aus dem industriellen Java Umfeld kommend entwickelt er seit 2007 vor allem Web und Facebook Anwendungen.
Autor: Bruno Jennrich | 3 Posts
Aus dem industriellen Java-Umfeld kommend entwickelt er seit 2007 Web- und Facebook-Anwendungen. Seit 2010 hat sich sein Entwicklungsschwerpunkt jedoch auf die Entwicklung mobiler Systeme auf Basis von iOS und Android verlagert.