Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 20. August 2010

Mit JSON Inhalte von Facebook „entführen“

War Facebook bis­lang ein geschlos­se­nes System, erlaubt es das sozia­le Netz mitt­ler­wei­le, Inhalte aus­zu­le­sen und auf ande­ren Websites dar­stel­len zu las­sen. Machbar ist das mit der „Graph API“, einer Schnittstelle, die den Zugriff auf Facebook-Inhalte ermög­licht.

Mit „Graph API“ kann man auf die soge­nann­ten Facebook-Objekte zugrei­fen. Zu die­sen Objekten gehö­ren Benutzer, Seiten, Links, Fotos und Veranstaltungen – also alles, womit man befreun­det sein kann, was einem gefal­len oder was man tei­len kann. Jedes die­ser Objekte wird über eine ID ange­steu­ert und stellt objekt­spe­zi­fi­sche Werte zum Auslesen bereit. Bei Benutzern las­sen sich zum Beispiel Name, Geschlecht oder Herkunft ermit­teln. Natürlich stellt die API nur sol­che Inhalte zur Verfügung, die frei zugäng­lich sind.

JSON als Austauschformat

Der Austausch der Inhalte sol­cher Facebook-Objekte erfolgt über das Format JSON, was für JavaScript Object Notation steht. JSON ist es kom­pak­tes Datenformat, wel­ches Daten in Textform zwi­schen ver­schie­de­nen Anwendungen aus­tau­schen kann. Es ähnelt von sei­ner Funktion dem XML-Format, ist aller­dings deut­lich ein­fa­cher und schlan­ker.

Über JSON kön­nen Eigenschaften – dazu zäh­len Arrays,  Zeichenketten, Zahlen sowie bool­sche Werte – aus­ge­tauscht wer­den. Eigenschaften wer­den in Objekten, die in geschwun­ge­nen Klammern ste­hen, dar­ge­stellt. Jede Eigenschaft hat einen Schlüssel und einen Wert. Während Zeichenketten in Anführungszeichen ste­hen, wer­den Zahlen und bool­sche Werte ohne Anführungszeichen dar­ge­stellt. Arrays ste­hen in ecki­gen Klammern.

Objekte las­sen sich ver­schach­teln, wobei ver­schach­tel­te Objekte wie auch die Eigenschaften über einen Schlüssel ver­fü­gen:

{
  "Name": "Manfred Mustermann",
  "Mitgliedsnummer": 1484,
  "Anschrift": {
    "Strasse": "Musterweg 11",
    "Ort": "Musterstadt",
    "PLZ": 57842
  }
  "Hobbys": [ "Reiten", "Lesen", "Schwimmen" ],
  "Alter": 35,
  "Mitgliedsbeitrag": 10,
  "Lastschrift": true
}

Ein JSON-Objekt ist ein gül­ti­ges JavaScript, wel­ches über die JavaScript-Funktion eval() aus­ge­le­sen wer­den kann. Aber auch ande­re Programmiersprachen ver­fü­gen über Funktionen, mit denen JSON-Objekte aus­ge­le­sen und kon­ver­tiert wer­den kön­nen. PHP stellt dazu die Funktion json_decode() zur Verfügung.

Aufruf der „Graph API“

Um ein Facebook-Objekt über die API auf­zu­ru­fen, benö­tigt man die ID des Objektes oder den Benutzernamen.

Beispiel: Über den Aufruf von „http://graph.facebook.com/220439“ oder alter­na­tiv „http://graph.facebook.com/btaylor“ erhält man als JSON-Objekt die objekt­spe­zi­fi­schen Daten des Facebook Benutzers Bret Taylor (wird von Facebook für Demozwecke genutzt):

{
  "id": "220439",
  "name": "Bret Taylor",
  "first_name": "Bret",
  "last_name": "Taylor",
  "link": "http://www.facebook.com/btaylor",
  "gender": "m\u00e4nnlich",
  "locale": "en_US"
}

Sonderzeichen wie die deut­schen Umlaute wer­den als Unicode-Escape-Sequenz aus­ge­ge­ben, also als Backslash gefolgt vom Unicode-Wert. Die über das JSON-Objekt dar­ge­stell­ten Werte des Facebook-Benutzers las­sen sich nun zum Beispiel mit­tels PHP aus­le­sen und wei­ter­ver­ar­bei­ten.

Über die API las­sen sich, wie anfangs bereits erwähnt, alle Facebook-Objekte aus­le­sen (inso­fern sie frei zugäng­lich sind).

Beispiel: Über „http://graph.facebook.com/40796308305“ erhält man Zugriff auf die Facebook-Seite „Coca-Cola“:

{
  "id": "40796308305",
  "name": "Coca-Cola",
  "picture": "http://profile.ak.fbcdn.net/profile-ak-snc1/object3/
    1853/100/s40796308305_2334.jpg",
  "link": "http://www.facebook.com/coca-cola",
  "category": "Consumer_products",
  "username": "coca-cola",
  "products": "Coca-Cola is the most ...",
  "fan_count": 10171036
}

Neben den all­ge­mei­nen Informationen zu Benutzern, Gruppen und Seiten las­sen sich auch die Inhalte der ein­zel­nen Objekte aus­le­sen, etwa die Inhalte einer Pinnwand. Über den Aufruf von „http://graph.facebook.com/40796308305/feed“ erhält man ein JSON-Objekt mit den Meldungen der Pinnwand der Seite „Coca-Cola“.

Meldungen einer Pinnwand als JSON-Objekt und wie Facebook sie darstellt

Meldungen einer Pinnwand als JSON-Objekt und wie Facebook sie dar­stellt

Die Anzahl der dar­ge­stell­ten Meldungen lässt sich über den Parameter „limit“ eben­so defi­nie­ren wie die ers­te dar­zu­stel­len­de Meldung über den Parameter „off­set“. Über „http://graph.facebook.com/40796308305/feed?limit=10&offset=5“ wer­den also zehn Meldungen ange­zeigt, wobei ab Meldung fünf begon­nen wird. Insgesamt wer­den also die Meldungen fünf bis fünf­zehn dar­ge­stellt.

Über die Parameter „until“ und „sin­ce“ las­sen sich Meldungen auch auf­grund ihres Datums dar­stel­len. So wer­den mit „http://graph.facebook.com/40796308305/feed?since=yesterday“ alle Meldungen seit „ges­tern“ ange­zeigt.

Jede ein­zel­ne Meldung der Pinnwand hat wie­der­um eine eige­ne ID und lässt sich sepa­rat ansteu­ern.

Facebook-Inhalte mit PHP darstellen

Eine kon­kre­te Anwendung für die „Graph API“ ist das Darstellen von Facebook-Inhalten auf der eige­nen Website. Im fol­gen­den Beispiel wer­den die Pinnwandmeldungen einer Facebook-Seite über ein PHP-Script aus­ge­le­sen und aus­ge­ge­ben. Wer eine Seite bei Facebook pflegt, kann so die Pinnwandmeldungen, die sonst nur Facebook-Besucher sehen, auf sei­ner eige­ne Website dar­stel­len las­sen.

Zunächst wird das JSON-Objekt mit den Meldungen der Pinnwand der ent­spre­chen­den Seite (wir blei­ben bei Coca-Cola) über „fopen()“ ein­ge­le­sen:

$fb_feed = fopen("http://graph.facebook.com/40796308305/feed", "r");

while (!feof($fb_feed)) {
  $fb = fgets($fb_feed);
}

fclose($fb_feed);

Die Variable $fb ent­hält nun alle Pinnwandmeldungen der Seite als JSON-Objekt. Anschließend wird das ein­ge­le­se­ne JSON-Objekt in eine PHP-Variable kon­ver­tiert:

$fb = json_decode($fb, true);

Die Pinnwandmeldungen sind in dem Array data gespei­chert. Mit $fb["data"] hat man Zugriff auf das Array, das aus dem JSON-Objekt über­nom­men wur­de. Über eine for-Schleife wer­den alle Objekte des Arrays aus­ge­le­sen. Jeder Wert des Arrays ent­hält eine Pinnwandmeldung. Je nach Art der Meldung (Statusmeldung, Bild, Veranstaltung) las­sen sich objekt­spe­zi­fi­sche Werte abfra­gen.

In die­sem Fall las­sen wir den Namen des Posters und den Meldungstext wie­der­ge­ben:

for ($i = 0; $i < sizeof($fb["data"]); $i++) {

  $fb_eintrag = $fb_daten[$i];

  echo "<strong>".$fb_eintrag["from"]["name"].":</strong> ";
  echo $fb_eintrag["message"]."</p>";
  echo "<hr />";

}

Die Art der Darstellung lässt sich noch ver­fei­nern, indem man die unter­schied­li­chen Typen von Meldungen abfragt (in die­sem Fall über „$fb_eintrag[“type”]“) und die Ausgabe ent­spre­chend anpasst.

Fazit

Das hier dar­ge­stell­te Beispiel zeigt nur einen Teil der Möglichkeiten, die man die der „Graph API“ von Facebook hat. Insbesondere beschränkt sich das Beispiel auf Inhalte, die frei ver­füg­bar sind.

Mit der API kön­nen Sie auch auf Daten von Benutzern zuge­grei­fen, die sonst nur „Freunden“ die­ser Benutzer zugäng­lich sind. Allerdings bedarf es der Zustimmung des jewei­li­gen Benutzers. Facebook stellt hier­für ein spe­zi­el­les Protokoll zur Authentifizierung zur Verfügung.

(mm),

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

3 Kommentare

  1. Hallo Denis,

    sehr inter­es­san­ter Beitrag den du da ver­öf­fent­licht hast. Nun habe ich das sel­ber ein­mal pro­biert mit der Pinnwand aus­le­sen jedoch bekom­me ich fol­gen­de Fehlermeldung wie­der: “An access token is requi­red to request this resour­ce.”
    Als type erhal­te ich den Wert OAuthException und den Code 104

    Kannst du mir wei­ter­hel­fen, was für einen access token ich benö­ti­ge?
    Vielen Dank schon ein­mal im vor­aus und mach wei­ter so.

    Schöne Grüße,
    Joel von htaccess24.de

    • Hallo Joel, da bei Facebook prak­tisch jeden Tag irgend­was ver­än­dert wird ver­mu­te ich dass der Code ein­fach nicht mehr aktu­ell ist. Informier dich mal bei Facebook selbst. Falls das Thema für dich über­haupt noch Relevant ist…ich seh näm­lich grad dass dei­ne Frage fast ein Jahr aus ist.

  2. Hallo,

    kann man mit der API auch die pri­va­ten Nachrichten an die Seite abru­fen?

    Gruß,
    D9n

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.