23
Sep
2010
admin

Facebook Open Graph

Jeder hat schon mal die Begriffe Open Graph oder Social Graph gehört. Doch was verbirgt sich dahinter? Um Facebook Anwendungen unter Zuhilfenahme der Graph API zu schreiben, ist es notwendig den Social Graph, bzw. den Open Graph zu verstehen.

Der soziale Graph bezeichnet in erster Linie die Personen eines sozialen Netzwerks und deren Relation zueinander, wobei die Personen als Knoten und die Verbindungen zwischen den Personen als Kanten bezeichnet werden.

Beispiel
Ein Beispiel für einen Graphen ist der Familienstammbaum, bei dem jedes Familienmitglied ein Knoten und jede Verbindung zu einem anderen Familienmitglied eine Kante ist.

Der Facebook Open Graph ist revolutionär unter der sozialen Graphen. Er verbindet nicht nur Personen untereinander. Mit ihm lässt sich nahezu jedes Objekt mit einer Person oder mit anderen Objekten verbinden. So ist es beispielsweise möglich, sich nicht nur mit Personen, sondern auch mit Orten, Firmen oder Filmen etc. zu verbinden.

Durch den Open Graph ist es also möglich sich mit Inhalten jeder beliebigen Webseite zu verbinden. Die Verbindung wird über den Gefällt mir-Button hergestellt. Wird er auf einer Webseite eingebunden, können Besucher sich, durch das Anklicken der Schaltfläche, mit dem Inhalt, bzw. mit der Webseite verbinden.

Die Integration einer Webseite in den Open Graph wird durch das Open Graph Protokoll ermöglicht. Webseiten, die in den Open Graph integriert werden, sind mit herkömmlichen Facebook-Seiten gleichzusetzen. So erscheinen die Seiten, die in den Open Graph integriert werden z.B. in den Suchergebnissen auf Facebook. Sie können außerdem Nachrichten in die Streams der Benutzer schreiben.

Um eine Webseite in den Open Graph zu integrieren, muss sie ein Graph-Objekt werden. Ein Graph-Objekt zeichnet sich durch spezielle <meta>-Tags aus, durch die das Objekt kategorisiert und beschrieben wird. Zurzeit sind folgende Tags erforderlich:

Eigenschaft Beschreibung
og:title Der Titel des Objektes, unter dem es im Graphen bekannt gemacht werden soll.
og:type Der Typ des Objektes. Hier die komplette Liste aller Typen.
og:image Ein Bild, welches das Objekt innerhalb des Graphen repräsentiert. Es sollte mindestens 50px * 50px groß sein und ein maximales Seitenverhältnis von 3:1 haben.
og:url Die URL, unter der das Objekt zu finden ist.
og:site_name Der Name der Seite, die das Objekt repräsentiert, bzw. bereitstellt.
fb:admins Eine kommaseparierte Liste von Facebook User IDs, welche die Seite Administrieren dürfen.
fb:app_id Die ID einer Facebook Anwendung, welche die Seite Administrieren darf.

Die Tags fb:admins und fb:app_id können beide eingebunden werden, allerdings reicht es aus, ein einziges davon zu implementieren. Weiterhin besteht die Möglichkeit zusätzlich weitere, optionale Tags einzubinden.

Eigenschaft Beschreibung
og:description Eine (kurze) Beschreibung der Seite. Die Implementierung dieses Tags wird ausdrücklich empfohlen.
Lokalisierung
og:latitude Beispiel: 37.416343
og:longitude Beispiel: -122.153013
og:street-address Beispiel: 1601 S California Ave
og:locality Beispiel: Palo Alto
og:region Beispiel: CA
og:postal-code Beispiel: 94304
og:country-name Beispiel: USA
Kontaktinformationen
og:email Eine gültige Email-Adresse
og:phone_number Die Telefonnummer
og:fax_number Die Faxnummer

Die Lokalisierungs-Informationen machen selbstverständlich nur dann Sinn, wenn real existierende Dinge, wie z.B. Restaurants oder eine Firma, repräsentiert werden.

Hier ein Beispiel der Meta-Angaben, die für dieses Tutorial bereitgestellt werden:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
  <meta property="og:title" content="Facebook Open Graph  &raquo;  About The Web"/>
  <meta property="og:type" content="article"/>
  <meta property="og:url" content="http://www.abouttheweb.de/facebook-open-graph/"/>
  <meta property="og:image" content="http://www.abouttheweb.de/wp-content/themes/abouttheweb/img/atw-meta-image.jpg"/>
  <meta property="og:site_name" content="About The Web"/>
  <meta property="fb:admins" content="100000011965545"/>
  <meta property="og:description"
      content="Jeder hat schon mal die Begriffe Open Graph oder Social Graph gehört. Doch was verbirgt sich dahinter? Um Facebook Anwendungen unter Zuhilfenahme der Graph API zu schreiben, ist es notwendig den[...]"/>
</html>

Klickt man nun den Gefällt mir-Button auf einer Seite, die diese Meta-Angaben implementiert, wird automatisch eine Feed-Story veröffentlicht, die wie folgt aussieht:

Ähnliche Artikel

Bild des Benutzers Alexander Trust
Alexander Trust
Sa, 12/11/2010 - 05:13

Was genau hat es mit dem fb:admins auf sich? Bzw. diese Nummer dort als content-Attribut, ist das eine persönliche? Muss man sich dafür eine eigene App. Registrieren oder ist das eine Standardnummer?

Bild des Benutzers admin
admin
Sa, 12/11/2010 - 12:13

Die Nummer ist deine User ID auf Facebook. Wenn jemand diese Seite "liked", wird eine Facebook Seite dafür erstellt. Diese Facebook Seite können die Personen, deren IDs in fb:admin hinterlegt sind, administrieren, also z.B. News in den Newsfeed der User schreiben, denen die Seite gefällt etc. Ich hoffe das war einigermaßen verständlich.

X
Laden