Inmitten der Schwierigkeiten liegt die Möglichkeit

Facebook-Applikationsentwicklung
Kommentare

Bei über 400 Millionen Usern, davon über 13,3 Millionen alleine in Deutschland, führt Facebook die Spitze der sozialen Netzwerke unangefochten an, und auch Microsoft sieht wohl noch weitaus größeres Potenzial in der Plattform, an der man sich mit 1,6 Prozent für stolze 240 Millionen Dollar beteiligt hat. Das Firmenerfolgsgeheimnis liegt nicht zuletzt auch in den eingebetteten und angeblich teilweise süchtig machenden Applikationen von Drittherstellern, die ihrerseits durch die Symbiose mit Facebook sehr einfach und kostengünstig ihre Reichweite vergrößern können. Firmen wie Zynga (heute schon Farmville gespielt?) haben es vorgemacht, wieso also nicht einfach auf den anfahrenden Zug aufspringen und selbst einmal eine Applikation schreiben?

Wer häufig und regelmäßig auf Facebook unterwegs ist und einen breiten Freundeskreis besitzt, trifft sie des Öfteren: Einladungen und vollgepostete Walls von Spielen (oder Glückskeksen) – und genau diese sind auch in der Regel die initialen Einstiegspunkte für neue User, schließlich muss das, was mir jemand aus meinem Freundeskreis empfiehlt oder selbst nutzt, ja interessant sein, und man will ja auch mitreden können und ebenfalls sein Motto des Tages auf der eigenen Wall mitteilen. Nicht zuletzt fließt in so manche Applikation auch reales Geld, und wer zahlt, kommt wieder und macht auch in Zukunft weiter fleißig Werbung. Für Anwendungsentwickler ist es also ein attraktives Mittel, mit der eigenen Anwendung möglichst schnell einen soliden Kundenstamm zu generieren. Aber wie erstellt man Facebook-Anwendungen und wie findet man möglichst schnell den Einstieg, um die angebotenen Möglichkeiten auch ausnutzen zu können?

Genesis

Der Einstiegspunkt zum Verwalten Ihrer Anwendungen ist http://www.facebook.com/developers/. Zum Erstellen benötigen Sie lediglich einen Namen für Ihre neue Applikation und einen über Handy- oder Kreditkartennummer verifizierten Account. Facebook hostet selbst keine Drittanwendungen, was eine eigene Umgebung voraussetzt, auf der Ihre Applikation ausgeführt wird. In der weiteren Konfiguration (Abb. 1) werden sie daher dazu aufgefordert, einen URL unter [B] anzugeben, sodass ihre Anwendung auf Ihrem Server von Facebook per IFrame eingebunden werden kann. In [A] geben Sie einen weiteren Namen an, unter der Facebook Ihre Anwendung verlinken soll. Sofern Ihr Server standardmäßig eine Ausgabe liefert, sollte diese nach dem Speichern aufhttp://apps.facebook.com/ [A] bereits sichtbar sein.

Abb. 1: Konfiguration der Facebook-Applikation

Integration

Um von PHP aus auf Facebook zugreifen zu können, stellt Facebook ein PHP SDK zur Verfügung. Die Integration ist denkbar einfach (Listing 1) und erfordert nur ihre Anwendungs-ID und Ihren Anwendungsgeheimcode, den Sie in der Konfiguration (Abb. 1) finden.

try{
require './facebook.php';
} catch(Exception $e){
echo "
" . print_r($e) . "
"; } $facebook = new Facebook(array( 'appId' => '[Anwendungs-ID]', 'secret' => '[Anwendungs-Geheimcode]', 'cookie' => true, ));

Über die so initialisierte Facebook-Klasse besteht damit die Möglichkeit, mit dem Facebook-Universum zu kommunizieren. Um jedoch auf Daten des Users zugreifen oder etwas an seine Wall posten zu dürfen, benötigen Sie zuvor die Autorisierung des Users (Listing 2), der dafür auf einen über das SDK generierten URL umgeleitet wird (Abb. 2). Nachdem Facebook sehr auf Datenschutz bedacht ist, müssen und können Sie hierbei feingranular benötigte Rechte anfordern. Eine vollständige und umfassende Liste finden Sie in der Dokumentation zu erweiterten Rechten. In unserem Beispiel beschränken wir uns darauf, auf eine E-Mail-Adresse zugreifen zu dürfen (email), sowie Schreibzugriff (Kommentieren, Posten, Gefällt mir etc.) auf die Wall des Users zu bekommen (publish_stream). Nach diesem Autorisierungsvorgang wird der User automatisch auf die Adresse der Anwendung zurückgeleitet. Zur weiteren Autorisierung (http ist zustandslos) benutzt man für API Calls den access_token, der neben der uid (ID des Users) im $session Array enthalten ist.

Abb. 2: Autorisierung durch den Benutzer

$session = $facebook->getSession();
$loginUrl = $facebook->getLoginUrl(
array(
'canvas' => 1,
'fbconnect' => 0,
'req_perms' => 'publish_stream,email'
)
);

if (!$session) {
echo "";
echo "top.location.href = '$loginUrl';";
echo "";
exit;
}

try {
$uid = $facebook->getUser();
} catch (FacebookApiException $e) {
echo "";
echo "top.location.href = '$loginUrl';";
echo "";
exit;
}

Weiter geht es mit der Frage, wie man von seinem Server per PHP auf das API von Facebook zugreifen kann.

[ header = Seite 2: Auf einefache Wege schickt man nur die Schwachen ]

Auf einfache Wege schickt man nur die Schwachen

„Ich kann jetzt also von meinem Server per PHP auf die API von Facebook zugreifen, aber was gibt es überhaupt für Schnittstellen?“ Schaut man an diesem Punkt in die Dokumentation unter API Reference, ist man über den Umfang überrascht und gleichzeitig davon erschlagen – und etwas später frustriert, weil man gerade zwei Stunden überlesen hat, das der Teil der API (wie viele andere) deprecated ist oder in Kürze sein wird. Damit Ihnen das nicht passiert, wird im Folgenden ein Überblick hierüber gegeben.

Graph API

Die derzeit am besten unterstütze Schnittstelle ist die Graph API. Jedem Objekt im Social Graph von Facebook (Personen, Fotos, Events, Seiten, Nachricht etc.) ist eine eindeutige ID zugeordnet. Über diese ID (bzw. einem Alias wie ‚/me‚) können mithilfe der Graph API die Informationen zum Objekt und dessen Relationen ausgelesen werden:

$me = $facebook->api('/me');
echo $me['name'];
$friends = $facebook->api(/me/friends');

Graph Realtime API

Eine Erweiterung zur Graph API ist die Graph Realtime API, die auf Basis von Publish Subscribe (oder Follow, bei Twitter) funktioniert, sprich, man teilt Facebook einen Callback URL mit, über den man bei Änderungen von gewissen Daten benachrichtigt werden möchte. Dies ist vor allem dann interessant und relevant, wenn die eigene Anwendung Caching benutzt, sei es, um die teilweise langen Response-Zeiten der Schnittstelle zu umgehen oder weil man aufwendig generierte Daten benötigt, man schlussendlich aber dennoch immer auf einer aktuellen Datenbasis operieren möchte. Derzeit kann man sich über Änderungen an User- und Page-Objekten sowie Berechtigungen (z. B. User entzieht der Anwendung die Zugriffsrechte) benachrichtigen lassen.

Die Subscription-Schnittstelle unterstützt die HTTP-Methoden GET (Abfragen der Subscriptions), POST (Erstellen/Ändern von Subscriptions) und DELETE (Löschen von Subscriptions). Zur Authentifizierung wird jeweils ein access_token der Anwendung als Parameter erwartet, den man über OAuth mithilfe der Anwendungs-ID und dem Anwendungsgeheimcode erhält.

Der Subscribe-Vorgang (POST) ist etwas aufwendiger und beinhaltet einen Drei-Wege-Handshake zwischen Facebook und dem Callback-Server (Abb. 3). Zuerst sendet die Applikation per POST (1) den Namen des zu überwachenden Objekts, eine Liste der Felder des Objekts, einen Callback URL sowie einen Token an die Schnittstelle. Im zweiten Schritt (2) sendet Facebook zur Verifikation einen GET-Request zusammen mit dem angebenden Token und einem neuen, zufälligen String an den zuvor übermittelten Callback URL. Im dritten Schritt (3) sendet der Callback-Service zum Abschluss des Handshakes als Response auf den Request (2) den erhaltenen zufälligen String an den Subscription-Service zurück. Facebook wird nun in Zukunft bei Änderungen am Objekt den Callback-Service über POST-Requests informieren (4-6).

Abb. 3: Handshake zwischen Facebook und dem eigenen Callback-Service

REST API

Sehr bekannt, weit verbreitet und dementsprechend in vielen Tutorials ist die REST API zu finden, die allerdings nicht mehr unterstützt wird und auf kurz oder lang verschwinden wird. Facebook verweist ausdrücklich darauf, die Graph API stattdessen zu benutzen, auch wenn der Funktionsumfang teilweise noch leicht hinterherhinkt.

FQL

Eine weitere effiziente Möglichkeit auf Facebook-Daten zuzugreifen und diese zu selektieren, ist über die Facebook Query Language, kurz FQL, die es ermöglicht, die Abfragen in einem SQL-ähnlichen Stil zu schreiben (Listing 3). Obwohl die Daten auch über die Graph API abgreifbar sind, bietet FQL auch die Möglichkeit, Multiqueries, sprich Batch Processing, sowie geschachtelte Queries (Subqueries) anzuwenden, was mitunter ein Grund dafür sein dürfte, dass FQL noch länger Bestand haben wird. Eine vollständige Liste aller Tabellen, auf die per FQL zugegriffen wird, ist in der Dokumentation zu FQL zu finden.

Auch wenn FQL stark an SQL erinnert, so fehlen doch wichtige Funktionen wie etwa Joins über eine oder mehrere Tabellen, was aus der Erfahrung von bisherigen Projekten allerdings keine größeren Probleme darstellt. In Fällen, in denen man hier an Grenzen stößt, kämpft man meist bereits zuvor mit Performanceproblemen und sollte sich mehr Gedanken um sinnvolles und performantes serverseitiges Caching machen.

SELECT uid, name, pic_square FROM user WHERE uid = me() OR uid IN (
SELECT uid2 FROM friend WHERE uid1 = me()
)

$fql = "select name, sex, pic_square from user where uid=". $uid;
$param = array(
'method' => 'fql.query',
'query' => $fql,
'callback' => ''
);
$fqlResult = $facebook->api($param);

FBML

Die Facebook Markup Language (FBML) ist eine Erweiterung von HTML um zusätzliche Facebook Tags. Es gibt in Facebook standardmäßig zwei Möglichkeiten, um Applikationen einzubinden. Einmal über IFrames, wie hier im Artikel beschrieben, indem der Content Ihrer Anwendung direkt im Browser landet, oder aber, indem ihre Anwendung FBML zurückgibt und Facebook sowohl die Userzugriffe als auch das Generieren des wirklichen HTML übernimmt. Hierdurch ist die Nutzung von normalem JavaScript allerdings nicht möglich und man muss auf eine von Facebook angebotene JavaScript API (FBJS) zurückgreifen. Facebook ist derzeit dabei, die Unterstützung für FBML einzustellen, sodass es in Kürze auch nicht mehr möglich sein wird, neue FBML-Anwendungen zu erstellen. An dieser Stelle wird aus diesem Grund weder auf die Erstellung von FBML-Applikationen an sich, noch auf die einzelnen Tags oder FBJS eingegangen. Facebook verweist darauf, zukünftige Applikationen über IFrames einzubinden und die JavaScript SDK (auf die wir in diesem Artikel noch eingehen werden) zu verwenden.

Im nächsten Abschnitt lesen Sie, warum das nicht so Web 1.0 ist, wie es auf den ersten Blick erscheinen mag.

[ header = Seite 3: Lass uns doch mal direkt miteinander reden ]

Lass uns doch mal direkt miteinander reden

Mit der Graph API, der Graph Realtime API, FQL und der PHP SDK haben Sie die Möglichkeit, auf Facebook-Daten von Ihrem Server aus zuzugreifen. Das Ganze klingt aber irgendwie nach Web 1.0. Was, wenn man aber eine One-Page-Applikation hat und dafür nicht sämtliche vorstellbaren Daten, die die Applikation benötigt, initial auslesen und ausliefern möchte? Sicherlich kann man dies über einen Ajax Request an den eigenen Server lösen, der wiederum die Facebook-Schnittstelle anspricht und die Daten nur durchreicht, aber viel effizienter wäre es doch, wenn der Browser direkt mit Facebook kommunizieren würde, um Responsezeiten zu verkürzen und den eigenen Server zu entlasten. Für diesen Fall hat sich Facebook ebenfalls etwas einfallen lassen und bietet mit einer JavaScript SDK neben der Möglichkeit, Daten direkt bei Facebook abzufragen, auch noch viele weitere interessante Möglichkeiten.

JavaScript SDK

Das JavaScript SDK bietet die Möglichkeit, auf alle Features der Graph API zuzugreifen, sowie über FQL Daten von Facebook auszulesen. Darüber hinaus kann damit XFBML gerendert (dazu etwas später) und die von Facebook bekannten Dialoge (Share, Post etc.) angezeigt werden. Ein weiterer sehr positiver Aspekt ist, dass die JavaScript SDK nicht nur auf eingebetten Applikationen, sondern auf jeder beliebigen Website benutzt werden kann. In diesem Fall muss man sich allerdings selbst um das Authentifizieren (Login) kümmern, wofür das SDK auch Methoden zur Verfügung stellt. Die Einbettung in die HTML-Seite kann hierbei synchron oder aber asynchron erfolgen, sprich die JavaScript-Datei wird direkt referenziert oder aber nachgeladen (Listing 4). Die asynchrone Variante ist der effizientere Weg, da hierbei das Laden von anderen Elementen auf der Seite nicht blockiert wird. Dies resultiert in schnelleren Seitenladezeiten, was die Usability steigert. Notwendig ist beides Mal ein DIV-Element mit der ID fb-root; es sollte daher nicht vergessen werden. Das JavaScript SDK unterstützt auch I18N, sodass statt /en_US/all.js auch die Datei/de_DE/all.js mit deutschen Übersetzungen geladen werden kann. Zum Debuggen existiert auch eine nicht komprimierte Version, allerdings nur auf Englisch. Damit sind die Voraussetzungen auch bereits geschaffen, um über die Methode FB.api() Zugriffe über FQL Queries oder über das Graph API auszuführen (Listing 5).

window.fbAsyncInit = function() { FB.init({ appId:'[Applikations-ID]', status: true, // Überprüfen des Login Status cookie: true, // Server darf session benutzen xfbml: true // Parsen von XFBML aktivieren }); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }());
FB.api({
method: 'fql.query',
query: 'SELECT birthday FROM user WHERE uid=346344'
}, function(response) {
alert('Der Geburtstag des Users ist ' + response[0].email);
});

FB.api('/me', function(response) {
alert(response.birthday);
});

Das JavaScript SDK vermag aber noch einiges mehr, als nur Daten abzufragen. Sehr hilfreich ist die Methode FB.Canvas.setAutoResize(), die man direkt nach der Initialisierung aufrufen kann, um die Größe des IFrames automatisch anzupassen. Die Facebook Library startet hierbei im Hintergrund einen Timer, der in kurzen Zeitintervallen die Größe errechnet und damit die Attribute des IFrames im übergeordneten Frame setzt.

Eine weitere der Kernfunktionalitäten ist das Anzeigen von Facebook-UI-Komponenten, wie der Dialog zum Posten an die Wall (Abb. 4), zum Sharen von Links, zum Hinzufügen von Freunden als auch zum Bookmarken der Anwendung innerhalb von Facebook in der linken Navigationsleite (Listing 6). Facebook öffnet hierbei entweder einen IFrame-Dialog oder ein Pop-up, je nachdem, ob man sich auf Facebook direkt oder aber auf einer eigenen Seite befindet.

FB.ui(
{
method: 'stream.publish',
message: '',
attachment: {
name: '[NAME]',
caption: '[CAPTION]',
description: ('[DESCRIPTION]'),
href: '[LINK]',
media: [{
type: 'image',
href: '[BILD LINK]',
src: '[BILD URL]'
}]
}
}, function(response){}
);

var share = {
method: 'stream.share',
u: 'http://phpmagazin.de'
};

FB.ui(share, function(response){});

FB.ui({ method: 'friends.add', id: 23523235 }, function(response){});

FB.ui({ method: 'bookmark.add' }, function(response){});

Abb. 4: Facebook-Dialog

Im letzten Teil erhalten Sie unter anderem einen Überblick über die XFBML-Tags.

[ header = Seite 4: Wann, wo und was ]

Das JavaScript SDK kann weiterhin auch XFBML innerhalb des Anwendungs-IFrame parsen. Hierzu ruft man lediglich die Methode FB.XFBML.parse() auf, der man optional ein Element des DOM Trees mitgeben kann, um das Parsen und Rendern einzuschränken und damit den Vorgang bezüglich Geschwindigkeit zu erhöhen. Ähnlich zu FBML ist XFBML eine Erweiterung von HTML um zusätzliche Facebook Tags, die vom JavaScript SDK ausgewertet und durch normales HTML ersetzt werden. Facebook unterstützt hier nur eine gegenüber FBML sehr eingeschränkte, aber dennoch ausreichende Auswahl an Tags, die vor allem die Social-Plug-ins wiederspiegeln (Tabelle 1).

Tag

Beschreibung

 

Zeigt eine Liste der interessantesten Aktivitäten, die auf der angegebenen Seite stattfinden

Button, mit dem der User die Applikation als Tab (muss unterstützt/konfiguriert werden) in seinem Profil einbinden kann

Button, mit dem der User die Applikation bookmarken kann, sodass sie in der linken Navigation dargestellt wird

Fügt der aktuellen Seite eine Kommentarbox hinzu, in der Facebook-User Kommentare hinterlassen können

Stellt die Facebook-Userprofilbilder dar, die auf diese Seite auf den Like-Button gedrückt haben

Rendert den sehr bekannten Like-Button

Box mit Usern, denen eine angegebene Facebook-Seite gefällt

Zeigt eine Box, in der User Kommentare und Links posten können und in Echtzeit angezeigt bekommen

Rendert einen Login-Button sowie die Profilbilder der Freunde des Users, die sich auf dieser Seite schon mal eingeloggt haben

Rendert ein Pronomen für einen bestimmten User

Zeigt eine Box mit personalisierten Empfehlungen an

Container für FBML, das dann von Facebook gerendert wird

Rendert das Profilbild des angegebenen Users

Rendert den aktuellen Status eines angegebenen Users

Tabelle 1: XFBML-Tags

Wann, wo und was

Um das Gesamtbild nicht aus den Augen zu verlieren und die einzelnen Zugriffe und Komponenten zusammenzufügen, wird hier der Ablauf der Kommunikation nochmals zusammengefasst (Abb. 5). Der User ruft initial Ihre Anwendung unter http://apps.facebook.com/[Ihre Applikation]/ auf (1) und erhält von Facebook eine HTML-Seite, die einen IFrame enthält, der auf Ihren Applikationsserver verweist. Der Browser sendet daraufhin einen Request an Ihren Server (3), um den Inhalt des IFrames zu laden. Ihre PHP-Applikation lädt über FQL oder die Graph API Daten (z. B. Freundesliste, Bilder des Users etc.) von Facebook (4 und 5). Dieser Vorgang ist natürlich nicht auf eine einzelne Abfrage beschränkt, da durchaus Abhängigkeiten von Daten aus einem vorhergehenden API-Aufruf bestehen können. Zusammen mit diesen Informationen von Facebook und denen Ihrer eigenen Anwendung generiert Ihr Server ein HTML-Dokument, das er an den User zurücksendet (6). Auf Clientseite können nach dem vollständigem Laden der Anwendung weiter über das JavaScript SDK und FQL bzw. der Graph API zu jeder Zeit Daten von Facebook nachgeladen werden (7, 8).

 Abb. 5: Kommunikation im Überblick

Es ist auch möglich, das initiale Laden sowie das Nachladen von Facebook-Daten rein über den Server abzuwickeln (4,5). Genauso ist es möglich, den Datenabruf rein über das JavaScript SDK (7, 8) zu gestalten. Ob man eine kombinierte Variante wählt oder die Aufrufe auf Server oder Client beschränkt, hängt hauptsächlich von den Anforderungen (sowohl funktionalen als auch nichtfunktionalen), sowie der Systemarchitektur der Applikation und nicht zuletzt der gewohnten Arbeitsweise ab. Hierbei kann auch ein Blick in die Best Practices sowie diePerformancedokumentation für ein tieferes Verständnis und zur besseren Entscheidungsfindung dienlich sein.

Fazit

Facebook ist eine immer noch stark wachsende Plattform mit vielen Möglichkeiten und eine gute Basis für neue Geschäftsmodelle und damit verbundene Applikationen. Eine Facebook-Anwendung zu schreiben, kann durchaus anspruchsvoll sein, aber über die von Facebook angebotenen Tools und Libraries und nicht zuletzt die sehr umfassende Dokumentation bekommt man mittlerweile genügend Unterstützung, sein Ziel auch zu verwirklichen.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -