Facebook API

Facebook-Anwendungen in Webseiten integrieren

Facebook-Features gibt es auch außerhalb von facebook.de. Mit ein wenig Aufwand binden Sie Daten des sozialen Netzwerks in eigene Webseiten ein.

  1. Facebook-Anwendungen in Webseiten integrieren
  2. Verbindung mit PHP
image.jpg

© Internet Magazin

Eine eigene Facebook-Anwendung haben wir in einer der letzten Ausgaben erstellt, die sich Nutzer innerhalb der Facebook-Website installieren können. Nun bieten wir Teile der Anwendung auch außerhalb von Facebook an. Dabei setzen wir auf Facebook Connect. Das ist streng genommen eine Single-Sign-On-Lösung (SSO) - Nutzer melden sich einmal bei Facebook an und werden dann auf allen Webseiten, die auf Facebook Connect setzen, erkannt.

Unser Beispiel basiert auf der Demo-Anwendung aus dem ersten Facebook-Artikel - OracleBFF. Diese ermittelt auf Basis eines einfach gehaltenen Algorithmus den besten Freund des Nutzers, indem einige zufällig ausgewählte Kontakte nach einem simplen Kriterium gerankt werden. Dazu benötigen wir ein wenig PHP-Code. Zuvor jedoch zeigen wir die Integration von Facebook Connect in eine Seite - mit HTML und Javascript.

Vorbereitungen

Zur Wiederholung hier noch einmal die wesentlichen Schritte, um überhaupt eine Facebook-Anwendung erstellen zu können. Unter http://developers.facebook.com/get_started.php]developers.facebook.com finden Sie Informationen über den Einstieg nebst Link auf die Facebook-Entwicklungsanwendung(http://www.facebook.com/developers/). Dort klicken Sie auf Set Up New Application und folgen den weiteren Instruktionen.

Der Name unserer Beispielanwendung ist "BFF Oracle". Danach erhalten Sie eine Anwendungs-ID, einen API-Schlüssel und ein Passwort (Secret). Diese Daten müssen Sie sich unbedingt merken, denn damit steuern Sie unter anderem die Einbindung von Facebook Connect. Die Beispielsdateien (Download unter http://www.ceterumcenseo.net) enthalten natürlich keine Schlüssel und Passwörter.

Sie müssen Ihre Daten gegebenenfalls von Hand nachtragen. In unserem Beispiel erweitern wir die bestehende Anwendung um Endpunkte für Facebook Connect, sprich wir speichern die zusätzlichen Dateien im selben Verzeichnis auf dem Webserver. Selbstverständlich ist es auch möglich eine eigene Anwendung rein für den Einsatz von Facebook Connect anzulegen.Im Vergleich zum reinen Erstellen der Anwendung gibt es beim Einsatz von Facebook Connect eine Besonderheit. Beim Bearbeiten der Anwendungseinstellungen innerhalb von Facebook gibt es ein Register Connect. Dort müssen Sie unbedingt die Connect URL angeben - das ist der Pfad, von dem aus die Facebook-Anwendung aufgerufen werden soll.Wichtig: Dieser Pfad muss entweder mit einem Verzeichnisnamen enden oder ein Fragezeichen enthalten. domain.tld/verzeichnis/ und domain.tld/verzeichnis/skript.php?abc=123sind also in Ordnung, domain.tld/verzeichnis/skript.php dagegen nicht. Tragen Sie hier am besten das Verzeichnis ein, in dem die Datei liegt, in die Sie Facebook integrieren möchten. Beenden Sie den Pfad mit einem Schrägstrich, damit klar ist, dass es sich auch wirklich um ein Verzeichnis handelt.

Verbindung einrichten

Die Kommunikation zwischen Ihrer Website und Facebook ist gewissen Hürden unterworfen. Ein technologischer Stolperstein ist die sogenannte "Same Origin Policy". Das ist ein Sicherheitsmechanismus von (unter anderem) Javascript, der Code nur den Zugriff auf Daten erlaubt, die denselben Ursprung haben - das heißt: gleicher Domainname, gleiches Protokoll, gleicher Serverport.Facebooks Lösung, diese Einschränkung zumindest in Teilen zu umgehen, besteht darin, dass Sie eine spezielle Datei auf dem Webserver ablegen. Als Name hat sich xd_receiver.htm etabliert. Legen Sie die Datei ins Verzeichnis in dem die Facebook-Integration stattfinden soll, und füllen Sie sie mit folgendem HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/
xhtml"><body><script src="http://static.ak.
connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/Javascript"></script></body></html>

Im nächsten Schritt wollen wir erstmals die Verbindung zu Facebook herstellen, rein mit clientseitigen Mitteln. Dazu sind einige Schritte notwendig: eine HTML-Datei muss erstellt, Skript-Dateien geladen und spezielles Facebook-Markup eingefügt werden. Abschließend implementieren wir mit Javascript ein wenig Logik. Grundlage ist eine XHTML-Datei.Achten Sie darauf, dass sie so valide wie möglich ist: Andernfalls kann es später bei der Ausführung zu merkwürdigen Seiteneffekten kommen. Ganz am Ende der HTML-Datei - also direkt vor </body> - benötigen wir zwei <script>-Blöcke. Der erste lädt eine Javascript-Datei vom Facebook-Server, die uns den Einsatz von Facebook Connect überhaupt erst ermöglicht:

<script type="text/Javascript" src=
"http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>

Wollen Sie eine lokalisierte Version von Facebook einsetzen, ergänzen Sie einfach die URL des Skripts um beispielsweise /de_DE. Direkt auf diesen <script>-Block folgt ein zweiter, diesmal mit Code. Die zuvor geladene Skript-Datei erstellt ein Objekt namens FB, über das Sie zahlreiche Facebook-Features anzapfen können.Zunächst einmal müssen Sie die Facebook-Anwendung auf dem Server initialisieren. Die Methode FB.init() erwartet zwei Parameter: den API-Schlüssel der Anwendung, den Sie zuvor bei der Einrichtung erhalten haben (nicht das Passwort), und den Namen der zuvor erstellten HTML-Datei (bei uns: xd_receiver.htm):

<script type="text/Javascript">
FB.init(
"3f76efd9c4d072d4a40e647fa05a7f53",
"xd_receiver.htm");
// ...</script>

Im nächsten Schritt integrieren wir einen Connect-Button. Die einfachste Möglichkeit der Realisierung besteht im Einsatz von FBML - ein spezielles XML-Markup das auch innerhalb normaler Facebook-Anwendungen zum Einsatz kommt. Fügen Sie in den <body>-Bereich der Seite Folgendes ein:

<div id="BFF"><fb:login-button onlogin="launchBFF()
;"></fb:login-button></div>

Damit erzeugen Sie eine Login-Schaltfläche; nach erfolgter Authentifizierung wird eine Javascript-Funktion namens launchBFF() aufgerufen, die wir später auch implementieren werden. Verwenden Sie bei FBML innerhalb des Browsers keine Kurzform (also beenden Sie das Tag nicht mit />), denn da machen einige wenige Browser Probleme. Damit die XHTML-Datei weiterhin validiert, müssen Sie den verwendeten Namespace fb am Seitenanfang deklarieren:

<html xmlns="http://www.w3.org/1999/
xhtml"
xmlns:fb="http://www.facebook.com/
2008/fbml">

Probieren Sie das Beispiel einmal aus: Nach Klick auf die Schaltfläche öffnet sich ein Login-Fenster von Facebook (manchmal auch als Iframe realisiert). Nach erfolgtem Login passiert zunächst nichts, denn die Funktion launchBFF() ist noch nicht implementiert. Das wollen wir jetzt nachholen.Ein sehr interessantes Feature der Facebook-Javascript-Bibliothek ist, dass wir auch FBML innerhalb des Browsers parsen können. Deswegen gehen wir in launchBFF() wie folgt vor: Wir erstellen simples FBML und schreiben das in dasselbe <div>-Element, in dem sich bis jetzt der Login-Button befindet.Sprich: nach erfolgtem Login verschwindet die Schaltfläche. Ein Aufruf der Methode FB.XFBML.Host.parseDomTree() parst die komplette Seite und ersetzt alles FBML-Markup durch entsprechendes HTML. Im Beispiel geben wir einfach den Namen des Nutzers aus.

<script type="text/Javascript">
function launchBFF() {
var fbml = "<h1>Hallo <fb:name uid=
'loggedinuser' useyou='false'></fb:name>!</h1>";
document.getElementById("BFF").
innerHTML = fbml;
FB.XFBML.Host.parseDomTree();
}</script>

Laden Sie die Seite im Browser und verbinden Sie sich mit Facebook - Ihr Name sollte erscheinen. Es gibt nur einen kleinen Haken: Wenn Sie die Seite neu laden, müssen Sie sich erneut verbinden - das ist nicht gerade Single Sign-On in Reinkultur.Die Methode FB.Connect.ifUserConnected() kann Code ausführen, wenn ein angemeldeter Nutzer erkannt wird. Leider kommt es hier in der Praxis immer wieder zu Timing-Problemen, wenn der Aufruf von FB.init() zu lange braucht. Deswegen sollten Sie die folgende Variante verwenden, die erst die Beendigung von init() abwartet:

FB.ensureInit(function () {
FB.Connect.ifUserConnected
(launchBFF);
});

Jetzt sollte auch nach einem Neuladen der Name sofort erscheinen.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…