Facebook: “Like”-Button – Social Graph – Open Graph Protokoll
30. April, 2010 | Thomas Hutter | 12 Kommentare
An der F8 Konferenz vom 21.04.2010 stellte Facebook “Like” vor, voller Enthusiasmus baute ich wie diverse weitere Blogger und sehr viele Webseitenbetreiber – gemäss einer von Facbeook publizierten Meldung immerhin 50′000 in der ersten Woche – den Like-Button in den Blog, bzw. in die Website mit ein. Der Einbau des Like-Buttons war auch nicht wirklich schwer, Facebook vereinfachte das Prozedere mit der Einbaumöglichkeit via iFrame. Beim Studium der von Facebook zur Verfügung gestellten Informationen zur Graph-API wurde mir bewusst, dass der Like-Button ein nicht unwesentlicher Teil des Social Graph ist, allerdings nicht wie von mir und vielen anderen angenommen, eine einfacher zusätzlicher Verlinkungsmechanismus. Vor allem Websitebetreiber, die bereits mit einer Fanpage aktiv auf Facebook vertreten sind, sollten sich den Einsatz des Like-Buttons zweimal überlegen – durch die Verwendung des Like Buttons werden Facebook Seiten erstellt, diese Seiten können unter Umständen in Konkurrenz mit der eigentlichen Fanpage stehen.
Nachfolgend die Beschreibung gemäss developers.facebook.com.
Open Graph Protokoll / Social Graph
Das Open Graph Protokoll ermöglicht es einem Websitebetreiber, seine Website in den Social Graph zu integrieren. Das Open Graph Protokoll ist zur Zeit für Webseiten vorgesehen, welche Dinge der realen Welt repräsentieren, Dinge wie Filme, Sportmannschaften, Persönlichkeiten, Restaurants, Websites, Blogs, etc. Sobald die Website Inhalte im Social Graph erhält, können Facebook Benutzer eine Verbindung zu der Website aufnehmen, Facebook erstellt dafür eine eigenständige Page, analog wie sie es bereits mit Facebook Seiten (Fanpages) machen können. Basierend auf den strukturierten Daten, welche über das Open Graph Protokoll an Facebook zur Verfügung gestellt werden, entstehen Nennungen der Website innerhalb von Facebook: in Benutzerprofilen, in Suchresultaten und im NewsFeed.
Einleitung Facebook Social Graph - Graph API
Mit Social Graph starten
Damit eine Website in den Social Graph integriert werden kann, müssen die entsprechenden Inhalte in Graph Objekte verwandelt werden. Dafür müssen <meta>Tags des Open Graph Protokolls sowie der “Like”-Button in die Website integriert werden.
Diese Tags ermöglichen es, strukturierte Informationen über die Seite zu spezifizieren. Umso mehr Informationen zur Verfügung gestellt werden, desto mehr Möglichkeiten bietet Facebook zur Darstellung heute und in Zukunft.
Hier ist ein Beispiel für eine Film-Seite:
<html
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
...
</head>
...
</html>
Für das Open Graph Protokoll sind fünf notwendig Einstellungen/Werte definiert:
- og:title – Der Titel des Objekts wie er im Social Graph dargestellt werden soll, z.B. “The Rock”.
- og:type – Der Typ des Objekts, z.B. “movie”. Die komplette Liste der unterstützen Typen.
- og:image – Ein Image-URL, der im Zusammenhang mit dem Objekt im Graph dargestellt werden soll. Das Bild muss im Minimum 50×50px und ein Maximum Verhältnis von 3:1 aufweisen.
- og:url – Der Canonical-URL als permanente ID für das Objekt im Social Graph, z.B. http://www.imdb.com/title/tt0117500/.
- og:site_name – Ein durch Menschen lesbarer Name der Seite, z.B. “IMDb”
Zusätzlich zu diesen Basis-Angaben muss ein zusätzlicher Wert hinzugefügt werden, dass die Seite verbunden werden kann mit:
- fb:admins oder fb:app_id – eine kommagetrennte Liste der Facebook-Benutzer-ID’s oder der Facebook Plattform-Applikations ID welche die Seite administrieren.
Empfohlen wird auch, dass ein zusätzliche Wert für die Beschreibung oder diese zusätzlichen Werte hinzugefügt werden:
- og:description – eine Beschreibung der Seite in einem Satz oder zwei Sätzen.
<meta property=”fb:admins” content=”USER_ID”/>
<meta property=”og:description” content=”A group of U.S. Marines, under command of a renegade general, take over Alcatraz and threaten San Francisco Bay with biological weapons.”/>
Bei der nachfolgenden News Feed Story, werden og:title verlinkt mit og:url und og:site_name automatisch auf die Website verlinkt:
Beispiel einer Facebook NewsFeed Meldung
In einem Benutzer-Profil definieren og:type in welcher Kategorie der Link und og:image welches Thumbnail verwendet werden soll.
Beispiel der Darstellung innerhalb eines Facebook Benutzerprofils
Für einige Objekte macht es Sinn, weitere zusätzliche Meta-Angaben zu spezifizieren, z.B. das Ort beim einem Restaurant. Es können so viele og:-Angaben hinzugefügt werden, wie Sinn machen. Mehr Infos zu den Möglichkeiten.
Den Like-Button hinzufügen
Sobald die Meta-Informationen in die Page integriert sind, kann der Like-Button der mit dieser Seite verbunden ist, hinzugefügt werden. Der Like-Button kann einfach über ein <iFrame>, oder als XFBML-Tag hinzugefügt werden <fb:like>. Die zweite Variante benötigt das JavaScript SDK.
Im entsprechenden Beispiel für “the Rock” auf “IMDb” wäre dies für eine Darstellung von 450 x 80 Pixel unter Verwendung des XFBML-Codes folgender Eintrag:
<fb:like href="http://www.imdb.com/title/tt0117500/" width="450" height="80"/>
Administration der Seite
Die Änderungen der Attribute der Seite können über die <meta>Tags bewerkstelligt werden. Zu beachten gilt, dass die Werte von og:title und og:type nur anfänglich editiert werden können, sobald eine Seite mehr als 10 likes aufweist, werden diese Angaben fixiert. Diese Massnahme ist ein Schutz der Benutzer, nicht, dass Benutzer, die bereits die Website “geliket” haben, anschliessend überrascht sind, dass die Seite einen anderen Sinn oder Inhalt darstellt.
Sobald sich Benutzer mit der Seite verbunden haben, können Seitenadministratoren Stream Updates zu allen Benutzern publizieren und Statistiken einschauen, analog dies bei Facebook Seiten (Fanpages) gemacht werden können. Damit eine Seite administriert werden kann, ist eine Verbindung mit dem Facebook-Benutzer notwendig. Um diese Verbindung vornehmen zu können, muss der zusätzliche Wert fb:admins in die Seite hinzugefügt werden. Kommagetrennt kann so eine Liste der Administratoren hinzugefügt werden:
<meta property="fb:admins" content="USER_ID1,USER_ID2"/>
Jedes Mitglied dieser Liste muss auf der entsprechenden Seite “Like” anklicken, damit es als Administrator überprüft werden kann. Dies gilt wieder als Schutz, damit nicht irgendwelche Benutzer als Administratoren hinzugefügt werden können. Wichtig, der erste Benutzer in diesem Eintrag kann nicht entfernt werden.
Sobald die Verbindung zwischen der Seite und dem Facebook Account stattgefunden hat, wird die Seite unter “Konto -> Seiten verwalten” administriert werden.
Facebook - Seiten verwalten
Von diesem Interface aus, können Stream-Updates publiziert und Analyse-Daten über die Benutzer, die sich mit der Seite verbunden haben, eingeschaut werden.
Administration der Seiten via Applikation
Einige Seiten werden über hunderte oder tausende Subseiten mit den Open Graph Protokoll <meta>Tags verfügen, damit solche Seiten ebenfalls effizient administriert werden können, kann für solche Seiten eine Applikation geschrieben werden.
Empfohlene Meta-Daten
Zwei übliche Informationen über die die meisten Seiten verfügen sind Ort und Kontaktinformationen, nachfolgend ist aufgelistet, wie diese Informationen als <meta>-Daten hinzugefügt werden können.
Ort
Die Ortsangabe ist für Seiten von Firmen, Restaurants oder alle anderen Seiten mit effektiv existierenden Orten. Die Ortsangaben können mit Latitude und Longitude, eine Adresse oder mit beidem definiert werden.
Folgende Werte sind möglich:
- og:latitude - z.B. “37.416343″
- og:longituede – z.B. “-122.153013″
- og:street-address – z.B. “-1601 S California Ave”
- og:postal-code – z.B. “94304″
- og:country-name – z.B. “USA”
entsprechend sehen diese Informationen im Meta-Bereich wie folgt aus:
<meta property=”og:latitude” content=”37.416343″/>
<meta property=”og:longitude” content=”-122.153013″/>
<meta property=”og:street-address” content=”1601 S California Ave”/>
<meta property=”og:locality” content=”Palo Alto”/>
<meta property=”og:region” content=”CA”/>
<meta property=”og:postal-code” content=”94304″/>
<meta property=”og:country-name” content=”USA”/>
Kontaktinformationen
Um Kontaktinformationen hinzuzufügen, können folgende Informationen hinzugefügt werden:
- og:email - z.B. “me@example.com”
- og:phone – z.B. “650-123-4567″
- og:fax – z.B. “+1 415 123 4567″
entsprechend sehen diese Informationen im Meta-Bereich wie folgt aus:
<meta property=”og:email” content=”me@example.com”/>
<meta property=”og:phone_number” content=”650-123-4567″/>
<meta property=”og:fax_number” content=”+1-415-123-4567″/>
Objekt Typen
Je nach Objekt muss für die Verwendung im Social Graph ein Typ definiert werden, dies erfolgt über den Wert og:type und sieht so aus:
<meta property="og:type" content="product" />
Folgende Typen werden zur Zeit von Facebook unterstützt:
Aktivitäten
- activity
- sport
Geschäft
- bar
- company
- cafe
- hotel
- restaurant
Gruppen
- cause
- sports_league
- sports_team
Organisationen
- band
- government
- non_profit
- school
- university
Personen
- actor
- athlete
- author
- director
- musician
- politician
- public_figure
Orte
- city
- country
- landmark
- state_province
Produkte und Unterhaltung
- album
- book
- drink
- food
- game
- movie
- product
- song
- tv_show
Produkte welche über einen UPC-Code oder eine ISBN-Nummer verfügen, können dies mit dem Wert og:upc und og:isbn spezifizieren. Diese Werte erlauben es, genaue Verbindungen im Social Graph herzustellen.
Websites
- article
- blog
- website
Wichtig für Besitzer von Facebook Seiten (Fanpages)
Beim Einbinden der Social Graph Funktionalität über das Open Graph Protokoll erstellt Facebook entsprechende Facebook Seiten (Gemeinschaftsseiten), diese Seite können natürlich unter Umständen die eigentliche Facebook Seite, welche bereits besteht, konkurrenzieren (Suche, Fangewinnung, etc.). Für Besitzer von bestehenden Facebook Seiten steht nach wie vor die Like-Box oder dem Fanpage Widget für die Einbindung in die Website zur Verfügung. Wie eine Verbindung von Facebook Seite (Fanpage) und dem Facebook Seiten (Gemeinschaftsseiten) aussehen kann, kann ich mir im Moment noch nicht definitiv vorstellen.
Enormes Potential
Das enorme Potential im Zusammenhang mit der Interaktion mit dem Social Graph ist nicht weg zu diskutieren und dürfte vielen Websites enorme neue Möglichkeiten eröffnen, Inhalte besser zu verteilen und Facebook Benutzer noch gezielter anzusprechen.
The Open Graph Protocol Design Decisions
Facebook Kommentare
Blog Kommentare (12)
Ähnliche Artikel
» Facebook: AllFacebookStats neu mit API
» Facebook: Worst Practice Beispiel eines Gewinnspiels am Beispiel von "HEINZ"
» Facebook: Der "Like-Hype" ist nicht vorbei
» Facebook: Gebührenpflicht für Facebookseiten kommt
» Facebook: Heute findet die grosse Timeline Umstellung statt!
» Facebook: Alle Kommentare nun mit Permalink
» Facebook: Timeline & Subscribe vs Facebook Seiten
» Facebook: Fotos im Vollbildformat
» Facebook: Namensänderungen bei Facebookseiten
» Facebook: Heineken Facebook-Marketing - Social by Design & holistischer Ansatz
[...] Facebook Like Button – Social Graph – Open Graph Protokoll von Thomas Hutter [...]
[...] Community Pages, im Prinzip werden also Community Pages erstellt für jede Profilangabe der Nutzer. Einen weiteren Grund für Community Pages hat Thomus Hutter in seinem Blog beleuchtet: Der Einsatz des Like-Buttons birgt beim Einsatz einer eigenen Facebook Seite (Fanpage) auch [...]
Das Wordpress plugin:
http://wordpress.org/extend/plugins/like
verfügbar in Deutsch
Hm, vor allem die Info mit den existierenden Fan-Pages ist interessant. Für unser Cafe gibts jetzt schon 345 leute, die das mögen, da möchte ich nicht nochmal bei null anfangen?!
Hallo, ich beschäftige mich auch gerade intensiv damit für ein neues Projekt. Ich habe ALLE Metadaten inklusive lat/long nun dynamisch für alle meine Einträge in den header als Metadaten schreiben lassen. Leider aber erscheint in facebook nur “xyz gefällt abc” und nicht “xyz gefällt abc auf MNO”. Einmal wurde es angezeigt, aber jetzt nicht mehr.
Zudem “Problem” mit den konkurrierenden Facebook Seiten: Da wir Restaurants etc. listen, könnte man denen doch anbieten, dass sie ihre eigene APP-ID oder USER_ID eintragen, dann können sie diese Seiten selber verwalten.
Zum ersten Problem kann ich nicht weiterhelfen, ist bei mir so noch nie aufgetaucht.
Zum zweiten Problem glaube ich nicht, dass dies einen Unterschied macht, die Problematik der konkurrenzierenden Seite bliebe ja bestehen.
[...] Weitere Informationen zum Thema finden Sie bei n-tv, Silicon.de, Golem, Thomas Hutter eConsulting & Coaching. [...]
[...] das Open Graph Protokoll erfahren möchte der sollte sich folgenden Artikel mal durchlesen: Facebook: “Like”-Button – Social Graph – Open Graph Protokoll Tags: Button, Facebook, Fan, Gefällt mir, Like it, [...]
Eine Frage zum “Gefällt mir” Button:
Ich habe ihn auf einer Webseite mit SFBML und JavaScript eingefügt, er funtkioniert auch, allerdings ist die Version nun Englisch.
Wo kann ich das auf Deutsch “umschalten” (Site ist Deutsch).
Bei der iFrame-Variante ist das automatisch deutsch. Da ist der Nachteil u.a. aber, das keine ordentliche Meldung kommt, wenn jemand klickt, aber nicht bei Facebook angemeldet ist.
Kann mir da jemand mit einem erhellenden Tipp helfen?
Wäre super,
Danke Oliver
im SDK kann der Sprachcode geändert werden.
Anstelle von
‘//connect.facebook.net/en_US/all.js’
musst Du
‘//connect.facebook.net/de_DE/all.js’
einsetzen
Vielen Dank für die super schnelle Antwort. So gehts!
Das ganze könnte ein größeres problem werden. Da FB automatisch Seiten aus der Wiki pedia generiert und konkurrierende Seiten entstehen ob man will oder nicht.
Fast jeder Brand hat eine Fanseite und plötzlich soll er einen Like button der wieder eine Fanseite generiert einbauen . Das spiest sich ein bisschen neben den bekannten bugs die der Like Knopf noch hat.
Siehe am beispiel Jowood über 15 Seiten
http://www.facebook.com/search/?flt=1&q=jowood&o=65