Wikiversity

Kurs:Neueste Internet- und WWW-Technologien/Facebook Open Graph

< Kurs:Neueste Internet- und WWW-Technologien

Einleitung

Bearbeiten

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

Bearbeiten

Objekte

Bearbeiten
 

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

Bearbeiten
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

Bearbeiten
 

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

Bearbeiten
  1. Facebook App anlegen
  2. Benutzer authentifizieren
  3. Objekte, Aktionen und Aggregationen erstellen
  4. Aktionen für Benutzer freigeben
  5. Optional: eigene Social Plugins bereitstellen
  6. Aktionen bei Facebook genehmigen lassen

Anlegen einer Facebook App

Bearbeiten

Basiseinstellungen

Bearbeiten

 

Verwalten der Aktionen, Objekte und Aggregationen

Bearbeiten

 

Authentifizierung

Bearbeiten

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

Bearbeiten
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

Bearbeiten

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

Bearbeiten

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

Bearbeiten

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

Bearbeiten

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

Bearbeiten

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

Bearbeiten

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

Bearbeiten
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

Bearbeiten

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

Bearbeiten

Diskussion

Bearbeiten

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

Bearbeiten

Einzelnachweise

Bearbeiten
  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.
Abgerufen von „https://de.wikiversity.org/w/index.php?title=Kurs:Neueste_Internet-_und_WWW-Technologien/Facebook_Open_Graph&oldid=629156“