Facebook-Anwendungen in Webseiten integrieren

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 https://developers.facebook.com/get_started.php]developers.facebook.com finden Sie Informationen über den Einstieg nebst Link auf die Facebook-Entwicklungsanwendung(https://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 https://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:

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:

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):

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:

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:

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.

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:

Jetzt sollte auch nach einem Neuladen der Name sofort erscheinen.