Canvas-App, Tab-App, Social Plugins, Integration des API in die eigene Website: Facebook bietet viele Möglichkeiten ausserhalb des Streams. Für die meisten benötigt man eine eigene App, einige Social Plugins lassen sich allerdings auch ohne einen Developer-Account bei Facebook nutzen. Dieser Artikel soll einen groben Überblick bieten und die wichtigsten Einstellungen und Richtlinien erklären. Auf die Social Plugins werde ich in einem späteren Artikel näher eingehen, das würde den mir selbst auferlegten Rahmen für die Maximallänge eines Artikels sprengen.
Tab App
Die gängigste Variante einer App ist die Integration in eine Facebook Seite. Simple Welcome-Seiten, Impressen (ja, das ist leider wirklich Plural von Impressum), Webshops und vor allem Gewinnspiele sind in dieser Form zu finden.
Beispiel einer Tab App
Bei diesen Apps ist folgendes zu beachten:
- Die Breite ist auf maximal 520 Pixel beschränkt.
- Update: nach der Umstellung auf die Timeline für Pages ist die neue Maximalbreite einstellbar auf 810 Pixel
- Die Höhe ist dynamisch, wenn der Inhalt jedoch 800 Pixel übersteigt muss mit dem Facebook API der Bereich vergrössert werden. Das funktioniert entweder bei fixer/bekannter Höhe mit der Javascript-Funktion „setSize“ oder bei dynamischer Höhe mit der Funktion „setAutoGrow„. Wichtig: „setAutoGrow“ überprüft alle 100 Millisekunden ob sich der Inhalt verändert hat, der Wert ist einstellbar und sollte nicht zu niedrig angesetzt werden.
- Über den Request-Parameter „signed_request“ sind auch ohne User-Autorisierung folgende Daten verfügbar: Page-ID, Like-Status, Admin-Status, Land, Spracheinstellung (locale), Mindestalter des Users.
- Deep Linking ist nur über Umwege möglich und muss extra programmiert werden. Facebook reicht nur den Parameter „app_data“ an die Tab App weiter, dieser kann per $_REQUEST[‚app_data‘] abgefragt werden.
Canvas App
Diese Variante wird bei umfangreicheren Apps und vor allem bei Spielen eingesetzt. Eine Facebook Seite wird nicht benötigt, erreichbar ist jede Canvas-App in der Form „https://apps.facebook.com/[appname], wobei „[appname]“ über den „Namensraum der Anwendung“ eingestellt wird:
Canvas App Namensraum
Die Breite ist mit 760 Pixel festgelegt, kann jedoch auf „Flexibel“ umgestellt werden. Die Höhe kann entweder direkt in den Entwickler-Einstellungen fix eingestellt oder auf „Fluid“ gesetzt werden:
Canvas App Settings
Flexibel oder Fluid bezeichnet hier das selbe und wird wohl früher oder später vereinheitlich benannt werden. Damit wird die Breite oder Höhe des Canvas-iframes auf 100% gesetzt und der Inhalt kann beliebige Maße annehmen. Perfekt also um Apps für unterschiedliche Auflösungen zu erstellen.
Website-Integration
Falls jemand noch den Begriff „Facebook Connect“ verwendet: Das gibt es schon lange nicht mehr, bzw. wurde es vom „Open Graph protocol“ abgelöst. Unter diesen Begriff fallen vor allem die „Social Plugins„, aber auch mit dem Facebook API selbst implementierte Funktionen.
Social Plugins
Facebook bietet mit den Social Plugins fertige Codeteile die man sich mit einigen wenigen Einstellungen zusammen klicken kann, App muss für die meisten keine erstellt werden. Eine Anpassung des Designs ist nur bedingt möglich, zum Beispiel gibt es den Like-Button in einer separaten Ausführung für dunkle Hintergründe und 6 definierte Fonts stehen zur Auswahl. Per JavaScript-Event kann auf das Liken, Kommentieren oder Senden reagiert werden, je nachdem welches Social Plugin zum Einsatz kommt. Das ist zum Beispiel wichtig für die Integration in Google Analytics.
Facebook API
Wenn die Social Plugins nicht mehr ausreichen oder das Design der Plugins nicht zur Seite passt muss man selbst Hand anlegen. Das geht am Einfachsten mit den von Facebook zur Verfügung gestellten SDKs: https://developers.facebook.com/docs/sdks/
Vom Auslesen bestimmter Benutzerdaten über den vollständigen Zugriff (Lesen und Schreiben) auf Fotoalben bis zum Öffnen von Facebook-Dialogen bietet Facebook damit alles was das Programmiererherz begehrt.
Aktuelle Probleme des API zeigt Facebook über den Live Status an, zur Kontrolle der Open Graph Tags einer Seite dient der Debugger und der Graph API Explorer lädt zum Spielen ein :)