Einleitung

Facebook gilt heute als das größte soziale Netzwerk mit über 900 Mio. aktiven Nutzern^[1].
Diesen Erfolg hat das Netzwerk unter anderem seiner ausgeprägten Schnittstelle (API) zu verdanken. Zunächst unter dem Namen Facebook Connect wurde Facebook's Verbindung immer umfangreicher und steht heute mit dem Namen Graph API der Entwicklergemeinschaft zur Verfügung. Als größte Neuerung bringt diese die Unterstützung für das sogenannte Open Graph protocol mit. Mit Hilfe dieses von Facebook entwickelten Protokolls soll es möglich gemacht werden, dass jede reale Aktivität auf Facebook virtuell festgehalten werden kann. Dazu besteht das Netzwerk aus Objekte (z.B. Personen, Facebook-Seiten/-Gruppen/-Apps, etc.) und deren Beziehungen untereinander, die Aktionen. Mehrfachausführungen einer gewissen Aktion auf unterschiedliche Objekte werden bei Facebook in Aggregationen gesammelt.
Da dieses Protokoll sehr abstrakt gehalten wurde, sind in Hinsicht auf die Verwendung von Facebook nahezu keine Grenzen gesetzt. Schon heute kann man mit seinen Facebook-Freunden automatisch austauschen, welche Musik man gerade hört (z.B. über Spotify) oder welches Video man gerade gesehen hat (z.B. per Netflix).

Open Graph Strukturen

Objekte

Die Open Graph Objekte bilden die Grundlage des Open Graph Protokolls. So sind beispielsweise Facebook-Nutzer genauso wie Facebook-Seiten, -Gruppen oder -Apps Objekte im sozialen Netzwerk Facebook. Jedes Objekt hat einen eigenen Zustand, wie es aus der Objektorientierung bekannt ist.

Externe Webseiten können ebenfalls zu Open Graph Objekte werden. Dazu müssen entsprechende Meta-Informationen im HTML-Head hinzugefügt werden. Ob ein Objekt seiner Spezifikation genügt lässt sich mit dem Debugger überprüfen.

Neue OG-Objekte können im App-Dashboard definiert werden.

Meta-Informationen

Folgende Informationen können per Meta-Tags in den HTML-Head einer externen Webseite eingepflegt werden:

Property-Wert	Beschreibung	Typ
og:title	Name des Open Graph Objekts	benötigt
og:type	Spezifizierungsabhängiger Datentyp	benötigt
og:image	Eine Foto-URL, die das Objekt repräsentiert	benötigt
og:url	Die kanonische URL des Open Graph Objekts (wird als permanente ID im Graph benutzt)	benötigt
og:audio	URL einer Audiodatei, die in Beziehung zum Open Graph Objekt steht	optional
og:description	Beschreibung des Open Graph Objekts	optional
og:determiner	Zum Titel zugehöriger Artikel (Englisch: a, an, the, "" und auto)	optional
og:locale	Sprache der Open Graph Meta Informationen	optional
og:locale:alternate	Array mit weiteren Sprachen, in denen die Webseite verfügbar ist	optional
og:site_name	Name der Webseite zu der das Open Graph Objekt gehört (z.B. "IMDb")	optional
og:video	URL einer Videodatei, die in Beziehung zum Open Graph Objekt steht	optional

Darüberhinaus können weitere, objektspezifische Informationen über OB-Objekte in Form von Meta-Tags kommuniziert werden.

IMDb Beispiel Objekt

Eine Übersichtsseite von IMDb kann wie folgt einfach als Open Graph Objekt beschrieben werden:

<html prefix="og: http://ogp.me/ns#">
<head>
<title>Die Hard (1988) - IMDb</title>
<meta property="og:title" content="Die Hard (1988)" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0095016/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/M/MV5BMTIxNTY3NjM0OV5BMl5BanBnXkFtZTcwNzg5MzY0MQ@@._V1._SX100_SY135_.jpg" />
...
</head>
...
</html>

Aktionen

Datei:Beispiel Facebook Aktion.png

Zwei OG-Objekte können durch eine Open Graph Aktion in Beziehung gesetzt werden.
Facebook-Nutzer können mit anderen befreundet sein, sie können Facebook-Seiten "liken", aber auch Facebook-Seiten können andere Seiten "liken". Ein Foto gehört einem Nutzer, ein Song wird von einem Nutzer gehört.

Im App-Dashboard werden OG-Aktionen definiert. Außerdem kann dort deren Aussehen und Verhalten angepasst werden.

Aggregationen

Wird eine OG-Aktion mehrfach auf unterschiedliche Objekte angewandt, kann dies durch sogenannte Open Graph Aggregationen dargestellt werden.

Beispielsweise könnte ein Facebook-Nutzer unterschiedliche Vorlesungen besuchen. Auf seiner Timeline findet sich dann eine Aufzählung der zuletzt besuchten Vorlesung wieder. Eine solche Aufzählung wird über OG-Aggregationen realisiert.
Genauso wie bei Objekten und Aktionen gibt es auch bei Aggregationen unterschiedliche Darstellungsvarianten die von Facebook zur Auswahl gestellt werden.

Neue OG-Aggregationen können ebenfalls im App-Dashboard definiert werden.

Allgemeine Schritte zur eigenen Open Graph App

Facebook App anlegen
Benutzer authentifizieren
Objekte, Aktionen und Aggregationen erstellen
Aktionen für Benutzer freigeben
Optional: eigene Social Plugins bereitstellen
Aktionen bei Facebook genehmigen lassen

Anlegen einer Facebook App

Basiseinstellungen

Verwalten der Aktionen, Objekte und Aggregationen

Authentifizierung

Datei:Facebook Authentifizierung.jpeg

Bevor ein Nutzer eine Open Graph App benutzen darf, muss er sich bei Facebook dazu authentifizieren. Dabei wird er aufgefordert die nötigen Zugriffsrechte der Applikation zu bestätigen.
Es gibt unterschiedliche Verfahren, wie eine solche Authentifizierung ablaufen kann:

Übersicht der möglichen Zugriffsrechte

user_about_me	friends_about_me	email
user_activities	friends_activities	read_friendlists
user_birthday	friends_birthday	read_insights
user_checkins	friends_checkins	read_mailbox
user_education_history	friends_education_history	read_requests
user_events	friends_events	read_stream
user_groups	friends_groups	xmpp_login
user_hometown	friends_hometown	ads_management
user_interests	friends_interests	ads_management
user_likes	friends_likes	manage_friendlists
user_location	friends_location	publish_stream
user_notes	friends_notes	create_event
user_online_presence	friends_online_presence	rsvp_event
user_photo_video_tags	friends_photo_video_tags	sms
user_photos	friends_photos	offline_access
user_relationships	friends_relationships	publish_checkins
user_relationship_details	friends_relationship_details	manage_pages
user_religion_politics	friends_religion_politics
user_status	friends_status
user_videos	friends_videos
user_website	friends_website
user_work_history	friends_work_history

Graph API

Die Graph API ist die eigentliche Schnittstelle zu Facebook. Über sie können Anfragen gestellt und beantwortet werden.
Es gibt beispielsweise API-Requests zum Erstellen und Löschen von Inhalten (Beiträge, Kommentare, Events, etc.), zum Abfragen von Statistiken (Facebook Insights) oder zum allgemeinen Durchsuchen von Facebook. Darüberhinaus ist es möglich, mehrere Abfragen gleichzeitig abzusenden (Bauch Requests) oder die Antworten abhängig von Land oder Sprache zu machen.
Die Authentifizierung findet über sogenannte Access Token statt, die bei der Authentifizierung eines Facebook-Benutzers kommuniziert bzw. angelegt werden.

Die wichtigsten Abfragemöglichkeiten über die Graph API

Abfrage von Objekten

https://graph.facebook.com/{ID}

Abfrage von Beziehungen zwischen Objekten

https://graph.facebook.com/{ID}/{CONNECTION_TYPE}

Einfach Einbindung von Profilfotos

<img src="https://graph.facebook.com/{ID}/picture"/>

Beispiel-Abfragen

Abfrage #1

https://graph.facebook.com/1413308977

Ergebnis #1

{
   "id": "1413308977",
   "name": "Fabio Niephaus",
   "first_name": "Fabio",
   "last_name": "Niephaus",
   "link": "https://www.facebook.com/fniephaus",
   "username": "fniephaus",
   "gender": "male",
   "locale": "en_US"
}

Abfrage #2

https://graph.facebook.com/HassoPlattnerInstitute

Ergebnis #2

{
   "id": "156170457748104",
   "name": "Hasso Plattner Institut",
   "picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/276787_156170457748104_680467838_s.jpg",
   "link": "https://www.facebook.com/HassoPlattnerInstitute",
   "likes": 61,
   "category": "Local business",
   "is_published": true,
   "website": "http://www.hpi.uni-potsdam.de",
   "username": "HassoPlattnerInstitute",
   "location": {
      "street": "Prof.-Dr.-Helmert-Stra\u00dfe 2-3 ",
      "city": "Potsdam",
      "country": "Germany",
      "zip": "14482",
      "latitude": 52.393511114805,
      "longitude": 13.129229288177
   },
   "phone": "+4933155090",
   "checkins": 150,
   "were_here_count": 669,
   "talking_about_count": 30
}

Software Development Kits

Um den Einstieg in die Open Graph Entwicklung zu erleichtern, stellt Facebook folgende SDKs zur Verfügung:

Name	Beschreibung
JavaScript SDK	Clientseitige Kommunikation über die Graph API
PHP SDK	Serverseitige Kommunikation über die Graph API
iOS SDK (iPhone & iPad)	Zur Entwicklung von iPhone, iPod Touch und iPad Apps
Android SDK	Zur Entwicklung von Android Apps

Einführung in die Verwendung des JavaScript SDKs

Initialisierung

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'DEINE_APP_ID', // App ID
      channelUrl : '//WWW.DEINE_DOMAIN.DE/channel.html', // Channel-Datei
      status     : true, // Überprüfe Login Status
      cookie     : true, // Aktivierung von Cookies, damit der Server direct auf die Session zugreifen kann
      xfbml      : true  // Parse XFBML
    });

    // hier kann weiterer Code folgen
  };

  // Asynchrones Laden des SDKs
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

Der Div-Container #fb-root wird vom SDK für unterschiedliche Aktionen genutzt und ist zwingend erforderlich. Außerdem sollte er möglichst weit oben in einer Webseite eingebaut sein und darf nicht per CSS versteckt werden.

Die Channel-Datei dient dazu, Kompatibilitätsprobleme zwischen Browsern zu beseitigen. Ihr Inhalt kann folgender Einzeiler sein:

<script src="//connect.facebook.net/en_US/all.js"></script>

Authentifizierung per JavaScript SDK

 FB.login(function(response) {
   if (response.authResponse) {
     console.log('Willkommen!  Deine Information werden geladen.... ');
     FB.api('/me', function(response) {
       console.log('Hallo, ' + response.name + '.');
     });
   } else {
     console.log('Benutzer hat Authentifizierung abgebrochen oder nicht vollständig ausgeführt.');
   }
 });

Graph API Abfragen

FB.api('/me', function(response) {
  alert('Dein Name ist ' + response.name);
});

Einführung in die Verwendung des PHP SDKs

Erzeugen eines Facebook Objekts

<?php
include_once('php-sdk/facebook.php');

//global variables
$app_url = "http://www.example.com";
$app_id = "1234567890";
$app_secret = "0987654321";
$app_namespace = "exampleapp";


$facebook = new Facebook( array(
                           'appId' => $app_id,
                           'secret' => $app_secret,
                         ));
?>

Authentifizierung per PHP SDK

<?php
//Festlegung der Zugriffsrechte auf Benutzerinformationen
$permissions = "publish_actions";

//Generierung von Login- und Logout-Links
$login_url = $facebook->getLoginUrl( array( 'scope' => $permissions) );
$logout_url = $facebook->getLogoutUrl();
?>

/* Verwendung */
<a href="<?php echo $login_url; ?>">Login</a><br />
<a href="<?php echo $logout_url; ?>">Logout</a>

Verwendung des Facebook Objekts

Graph API Abfragen

$retrieve = $facebook->api($path, $method, $params);

Parameter	Beschreibung
path	Open Graph Pfad (z.B. /me)
$method	optional: zu verwendende HTTP-Methode ( "GET", "POST", oder "DELETE")
$params	optional: zu übergebene Parameter (Schema: 'name' => 'wert')

Beispiel: Aktion veröffentlichen

function publishExample($facebook, $object_url) {
	global $app_namespace;
	$ret_obj = $facebook->api('/me/'.$app_namespace.':action', 'post', array(
                        'object' => $object_url,
	));
	return $ret_obj['id'];
}

Weitere Funktionen eines Facebook Objekts

Funktion	Beschreibung
getAccessToken	Abfragen des aktuellen AccessTokens des SDKs
getApiSecret	Abfragen des aktuellen app secrets des SDKs
getAppId	Abfragen der aktuellen app ID des SDKs
getLoginStatusUrl	Ermittelt eine URL abhängig vom Status des eingeloggten Benutzers
getSignedRequest	Abfragen des signed requests des SDKs
getUser	Abfragen der Benutzer ID. Wenn kein Nutzer eingeloggt ist, wir 0 zurückgegeben
setAccessToken	Setzen des access tokens
setApiSecret	Setzen des app secrets
setAppId	Setzen der app ID
setFileUploadSupport	Aktivieren/Deaktivieren der Dateiupload-Funktion im SDK
useFileUploadSupport	Zur Überprüfung, ob Dateiupload-Funktion im SDK aktiviert ist

Werkzeuge

Name	Beschreibung
Graph API Explorer	Zum Testen und Zusammenstellen von Graph API Pfaden
JavaScript Test Console	Zum Testen von JavaScript
App Dashboard	Zur Verwaltung der Open Graph Apps
Insights	Statistiken zu den Open Graph Apps
Access Token Tool	Werkzeug zum Verwalten der Access Tokens
Debugger	Zum Überprüfen und zum Validieren von Open Graph Objekten
Test User API	Werkzeug zum Erstellen von Testbenutzern
Action Spec Preview Tool	Zum Überprüfen von Aktionen und deren Spezifikationen

Graph API Explorer
JavaScript Test Console
Debugger
Action Spec Preview Tool

Social Plugins

Um auf einige wichtige Funktionalitäten einfach zugreifen zu können, bietet Facebook folgende Social Plugins an:

Plugin-Name	Beschreibung
Like Button	Like und Verteilen einer Facebook-Seite direkt über eine externe Webseite
Send Button	Versenden des Inhalts einer externen Webseite an Facebook-Freunde
Subscribe Button	Verfolgen anderen Facebook-Nutzer direkt über eine externe Webseite
Comments	Kommentarfunktion für externe Webseiten
Activity Feed	Darstellung der Aktivitäten von Facebook-Freunde auf einer externen Webseite (durch "Likes" und Kommentare)
Recommendations	Inhaltsbox mit Empfehlungen von Facebook-Seiten
Like Box	Box mit Likefunktion für externe Webseite mit Anzeige von Freundesaktivitäten in Echtzeit
Login Button	Anzeige von Facebook-Freunden, die sich bereits auf einer externen Webseite registriert haben (mit zusätzlichem Login Button)
Registration	Einfache Registrierungsfunktion für das Registrieren auf einer externen Webseite mit einem Facebook-Account
Facepile	Anzeige von Profilfotos der Facebook-Freunde, die bereits die entsprechende externe Webseite "liken" oder sich für diese registriert haben
Live Stream	Echtzeitaustausch von Kommentaren und Likes (Das Comments-Plugin wird dieses Plugin ab dem 03.10.2012 vollständig ersetzen)

Technologien hinter Facebook

Webserver: Tornado, BigPipe^[2] und Varnish
Front-End: PHP und Hip Hop for PHP
Datenbank: MySQL und Memcached
Fotos: Haystack^[3]
Chat: Erlang
Serverlogging: Scribe
Dateiverwaltung: Apache Cassandra, Apache Hadoop und Apache Hive
Cross-Language Framework: Thrift

Diskussion

Mit dem Open Graph Protokoll hat Facebook ein sehr mächtiges Werkzeug bereitgestellt, um das soziale Netzwerk noch weiter ins reale Leben einbeziehen zu können.
In welchem Ausmaß dies letztendlich geschieht, bleibt den Ideen der Entwickler, die die Schnittstelle nutzen, und den jeweiligen Nutzern, überlassen. Natürlich sollte an dieser Stelle ebenfalls auf die immer noch aktuelle Datenschutz-Debatte verwiesen werden.

Weiterführende Links

Facebook Developers: https://developers.facebook.com/
Facebook SDK Reference: https://developers.facebook.com/docs/sdks
The Open Graph protocol: http://ogp.me/
Facebook auf Wikipedia: http://en.wikipedia.org/wiki/Facebook

Einzelnachweise

↑ Facebook Newsroom. Abgerufen am 22.07.2012.
↑ Changhao Jiang: BigPipe: Pipelining web pages for high performance. In: Facebook Engineering, 2010. Angerufen am 22.07.2012.
↑ Peter Vajgel: Needle in a haystack: efficient storage of billions of photos. In: Facebook Engineering, 2009. Abgerufen am 22.07.2012.

[1] Facebook Newsroom. Abgerufen am 22.07.2012.

[2] Changhao Jiang: BigPipe: Pipelining web pages for high performance. In: Facebook Engineering, 2010. Angerufen am 22.07.2012.

[3] Peter Vajgel: Needle in a haystack: efficient storage of billions of photos. In: Facebook Engineering, 2009. Abgerufen am 22.07.2012.

[1]

[2]

[3]