kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Facebook-Power Teil 3: Open Graph Protocol nutzen

Der berühmte „gefällt mir/like“-Button ist weit mehr als lediglich eine simple Verlinkung zu Facebook. Vielmehr ist er ein wesentlicher Bestandteil von Facebooks Schnittstelle um mithilfe des Open Graph Protocols Websiteinhalte in den Social Graph zu integrieren. Aber mal der Reihe nach.

Der Social Graph dient dazu die verschiedenen und sehr komplexen Beziehungen zwischen Objekten (z.B. Facebook-Usern) auszudrücken. Er ist allerdings nicht auf Facebook allein beschränkt sondern besteht global und schließt beispielsweise auch den E-Mail-Verkehr oder Aktivitäten auf anderen Netzwerken und Blogs ein.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

Quelle: designforfun.com

Das Open Graph Protocol ermöglicht es Euch nun mithilfe des Like-Buttons externe Web-Inhalte in den Social Graph auf Facebook zu integrieren. In erster Linie ist das Protokoll dafür gedacht reale Dinge wie ein Restaurant oder einen Kinofilm auf Facebook zu repräsentieren aber Ihr könnt es auch einsetzen um Euren Blog zu vermarkten. Ich möchte Euch erklären wie das funktioniert und welche Vor- und Nachteile abgewogen werden müssen.

Das Wichtigste zuerst

Bitte lest diesen Artikel erst komplett durch bevor Ihr anfangt die Funktionen in Eure Website zu integrieren. Somit sollten sich einige Fragen bereits erübrigen und Probleme vermeiden lassen.

Sollte sich auf der Seite die Ihr um Graph-Funktionen erweitern wollt bereits ein Like-Button befinden, so könnt Ihr die URL nur dann nachträglich an den Graph andocken wenn Ihr bisher keinen "Like" erhalten habt. Das hängt damit zusammen, dass Graph-Objekte sich tief in die Benutzerprofile von Facebook-Usern schreiben und es wohl technisch kaum möglich ist nachträglich hier noch Änderungen vorzunehmen. Was genau alles passiert wenn ein Objekt Bestandteil des Graphs ist erläutere ich später im Detail.

Open Graph verwenden

Um Website-Inhalte wie beispielsweise einen Blog-Post in den Social Graph zu intergrieren müssen die Inhalte zunächst in ein sogenanntes Graph-Element umgewandelt werden. Das geschieht mit Hilfe von <meta>-Befehlen im <head> der entsprechenden Seite. Neben einem Titel, einer Beschreibung und der Quelle kann auch eine Kategorie und ein Bild bereit gestellt werden. Kickt anschießend ein Besucher auf den "gefällt mir"-Button werden diese Meta-Informationen an Facebook übertragen und lösen dort eine Reihe von Aktionen aus. Dazu später mehr.

Das folgende Beispiel zeigt die Einbindung der <meta>-Tags anhand dieses Artikels. Achtet darauf, dass auch der <html>-Tag erweitert werden muss.


<html
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title> ... </title>

<meta property="og:title" content="Facebook-Power Teil 3: Open Graph Protocol nutzen"/>
<meta property="og:site_name" content="kulturbanause blog"/>
<meta property="og:description" content="Webdesign-News aus der digitalen Kreativ-Szene von heute"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://www.kulturbanause.de/facebook-power-teil-3-open-graph-protocol-nutzen"/>
<meta property="og:image" content="http://www.kulturbanause.de/open-graph-icon.jpg"/>
<meta property="fb:admins" content="123456789"/>
...
</head>
...
</html>

Wenn Ihr WordPress im Einsatz habt, so sollten die Werte natürlich dynamisch geladen werden. In diesem Fall könnte der <meta>-Bereich so aussehen.


<meta property="og:title" content="<?php the_title(); ?>"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<meta property="og:description" content="<?php bloginfo('description'); ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="<?php the_permalink() ?>"/>
<meta property="og:image" content="http://www.kulturbanause.de/open-graph-icon.jpg"/>
<meta property="fb:admins" content="123456789"/>

Das soeben gezeigte Beispiel nutzt die Standard-Werte für Graph-Objekte die ich nun kurz erklären möchte:

  • og:title: Titel des gesamten Objekts
  • og:site_name: Titel der aktuellen Seite. Zum Beispiel der aktuelle Artikel.
  • og:description: Beschreibungstext
  • og:type: Kategorie. Welche Kategorien zur Verfügung stehen steht Ihr hier: http://developers.facebook.com/docs/opengraph#types
  • og:url: Permalink/Permanente URL
  • og:image: Grafik die innerhalb des Objekts dargestellt werden soll. Die Grafik sollte mindestens 50x50 Pixel groß sein und ein möglichst quadratisches Format haben. Maximal ist ein 3:1 Verhältnis umsetzbar – das sieht allerdings nicht schön aus.
  • fb:admins: User-ID des Administrators. Wenn die Seite von mehreren Leuten administriert wird können durch Komma getrennt auch mehrere IDs angegeben werden
  • fb:app_id: Facebook-Application ID al Alternative zum Admin

Es lassen sich allerdings auch noch weitere Attribute nutzen die Ihr ebenfalls der folgenden Liste entnehmen könnt, die im Beispiel jedoch keine Anwendung finden. Eine detaillierte Anleitung findet Ihr auf http://opengraphprotocol.org. Bedenkt auch, dass Graph-Objekte in Kombination mit Mikroformaten verwendet werden können.

  • og:latitude: Breitengrad: zum Beispiel „37.416343“
  • og:longitude: Längengrad: zum Beispiel: „122.153013“
  • og:street-address: Straße
  • og:locality: Stadt
  • og:region: Bundesland/-Staat
  • og:postal-code: Postleitzahl
  • og:country-name: Land/Staat
  • og:email: E-Mail-Adresse
  • og:phone_number: Telefonnummer (inkl. intern. Vorwahl)
  • og:fax_number: Faxnummer (inkl. intern. Vorwahl)

Um zu testen ob Ihr die Werte korrekt eingetragen habt und welche Werte wie übertragen werden empfiehlt es sich folgendes Facebook-Tool zu nutzen: http://developers.facebook.com/tools/lint

Like-Button einbinden

Nachdem Ihr nun die <meta>-Daten in Eure Seite integriert habt fehlt lediglich der „gefällt mir“-Button. Hierzu könnt Ihr das Tool auf http://developers.facebook.com/docs/reference/plugins/like nutzen oder folgenden Code einbinden.

Lösung mit iframe:


<iframe src="http://www.facebook.com/plugins/like.php?href=deine-url&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Lösung mit FBML


<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"><!--mce:0--></script>

Wenn Ihr WordPress nutzt, so lest hier nach wie Ihr die URL korrekt übergeben könnt: Facebook „gefällt mir“-Button in WordPress einbinden

Fluch und Segen von Graph-Objekten

Das war im Grund schon alles um den Like-Button funktionell zu erweitern und die Website an den Social Graph anzuschießen. Wenn jetzt ein Besucher auf den "gefällt mir" Button klickt werden eine Reihe von Funktionen ausgelöst die ich nun im Detail beschreiben möchte. Beachtet bitte, dass je nach Projekt entschieden werden muss ob es Sinn macht eine Website an den Graph anzuschießen, bzw. welche Meta-Daten übertragen werden sollen.

Automatisch erzeugte Facebook (Fan-)Pages

Sobald der Like-Button betätigt wird generiert Facebook aus den Meta-Daten und der URL eine Micro-Fanpage! Facebook nennt diesen Seitentyp schicht "Seite". Da Ihr selbst in der Regel Administrator Eurer Seite seid (Zur Erinnerung: Ihr übergebt die Admin-ID in den Meta-Daten) werdet Ihr zunächst davon ausgehen, dass diese Seite eine "normale" Fan-Page ist und für jeden User sichtbar. Das ist nicht der Fall - nur Ihr könnt sie sehen.

facebook-open-graph-seite-micropage

Um auf die Seite nun zugreifen zu können gibt es zwei mir bekannte Möglichkeiten. Zum Einen wird der Like-Button in der entsprechenden Quelle um einen "Administrator-Link" erweitert der Euch zur Seite führt. Dieser ist natürlich auch nur für Euch sichtbar.
Alternativ wird für jede Seite der Seitenliste innerhalb Eures Profils hinzugefügt. Ihr erreicht sie also in der Hauptnavigation über "Konto > Seiten verwalten".

facebook-open-graph-seiten-verwalten

Was ist jetzt das Besondere an dieser Seite? Ganz einfach: Links könnt Ihr sehen welchen Benutzern dieser Beitrag gefällt. Das könnt Ihr sonst so ohne weiteres nicht herausfinden wenn Ihr nicht selbst mit dem Benutzer befreundet seid.
Darüber hinaus hat die Micropage eine eigene Pinnwand. Wenn Ihr nun hier eine Statusmeldung verfasst postet Ihr diese Nachricht auf die Pinnwand aller User die auf "gefällt mir" geklickt haben. Je nach Art des Inhalts kann diese Methode enorm effektiv sein um eine bestimmte Zielgruppe zu erreichen.

Automatisch erzeugte Interessen in User-Profilen

Wenn ein Besucher auf den „Like-Button“ klickt, so werden die Meta-Informationen mit übertragen. Im Info-Tab des entsprechenden Benutzers werden die Interessen und „gefällt mir“ kategorisiert. Hier greift der og:type und ordnet das Objekt entsprechend ein. Das passiert bei einem Objekt was nicht an den Graph angeschlossen ist nicht. Auch das Benutzerbild wird übertragen und ein Link zur Website!

facebook-open-graph-info-profile

Seiten und externe Links in der Facebook-Suche

Jede neue Micro-Facebook-Page wird in die Facebook-Suche aufgenommen. Besonders interessant an dieser Sache ist, dass die Links von Facebook weg auf Eure Seite führen. Wenn Ihr die Funktion also in Euren Blog einbaut so könnt Ihr über längere Zeit eine enorme Menge an Content und externen Verlinkungen von Facebook aus generieren. Wie das genau mit PageRank etc. aussieht kann ich im Moment jedoch noch nicht sagen.

facebook-pages-in-suche

Teilen, Empfehlen und Co.

Die Meta-Daten werden auch dann verwendet wenn ein Benutzer innerhalb von Facebook eine Statusmitteilung mit seinen Freunden teilt. Das Benutzerbild wird beispielsweise angezeigt was die Mitteilung zumindest optisch hervorhebt.

facebook-open-graph-like-button

Fazit, Hinweise, Bedenken

Ich gebe zu die Funktion ist ebenso mächtig wie unübersichtlich. Auch kann ich aktuell schlecht einschätzen wie groß eine eventuelle Gefahr ist.
Sofern man wie ich eine "echte" Fan-Page betreibt muss man zumindest damit rechnen, dass die automatisch generierten Seiten eine Konkurrenz zur Fan-Page darstellen. Ich für meinen Fall habe mich dazu entschlossen alle meine Blog-Posts vorerst an den Graph anzudocken. Ich schaue dann mal wie sich das alles entwickelt und gehe das Risiko ein, dass es schief geht.

Für elementar halte ich auch ein eventuelles Datenschutz-Problem. Ich weiß nicht in wie fern ich den Besucher darüber informieren muss, sollte etc, dass die Informationen in sein Profil geschrieben werden. Und hier ist eben nicht von der Pinnwand die Rede sondern von den Interessen die - je nach Privatsphäre-Einstellungen - öffentlich sichtbar sind. Was allerdings wiederum gut für mich ist da öffentliche Inhalte auch von Google indexiert werden können. Wenn hier jemand einen Link oder Anregungen hat dann immer her damit.

Zuletzt möchte ich darauf hinweisen, dass die Funktion natürlich auch missbraucht werden kann. Ich wäre durchaus in der Lage Werbung (inkl. Bild!) in die Meta-Daten einzupflegen um alle bereits besprochenen Vorteile zum Spamming zu nutzen. Vor allem da der Besucher nicht direkt sieht welche Daten übertragen werden wenn er den Button klickt.

Update: Das Open-Graph-Protocol erzeugt invaliden HTML-Code. Wie ihr das Problem in den Griff bekommt habe ich in einem weiteren Artikel beschrieben.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

15 Kommentare

  1. Michael

    Verfasst am 26. November 2010 um 8:40 Uhr.

    „Sollte sich auf der Seite die Ihr um Graph-Funktionen erweitern wollt bereits ein Like-Button befinden, so könnt Ihr die URL nur dann nachträglich an den Graph andocken wenn Ihr bisher keinen “Like” erhalten habt.“

    Ich habe die Metadaten für ein relativ aktuelles Projekt nachträglich zum Like-Button ergänzt. Dies Url hatte zum zeitpunkt auch schon über 200 „Likes“. Eine Micosite für diese Url wurde nachträglich ergänzt. Jedoch werden die ersten 200 Likes nicht auf der Microsite gelistet. Erst der 201te „like“ wird auf der Mirosite dargestellt.

    „Wie das genau mit PageRank etc. aussieht kann ich im Moment jedoch noch nicht sagen. „

    Ich denke das hier bald auch der TrustRank eine wichtigere Rollen spielen wird.

    *Super Post*

    • Jonas Hellwig

      Verfasst am 26. November 2010 um 11:37 Uhr.

      @Michi: Danke für den Tipp mit den Likes. Ich hab das in der Form gar nicht gemerkt.

  2. Jana

    Verfasst am 26. November 2010 um 13:11 Uhr.

    Erstmal vielen Dank für Facebook Power Reihe. Diese Datensammelwut und Unübersichtlichkeit von Facebook finde ich persönlich aber grauenhaft. Der Umgang damit erinnert ein wenig an russisches Roulette.

  3. Henner

    Verfasst am 22. Januar 2011 um 4:38 Uhr.

    Hallo Kulturbanause,
    also ich bin gerade dabei og. in unsere überarbeitete Webseite einzubinden (ca.70 Seiten) und habe den LikeButton jetzt auf jeder Seite integriert. Meine Frage: wenn ich überall den selben og-metatext verwende müsste es nur EINE Micropage geben (möchte die dann allerdings als Facebook-Firmenseite verwenden – aber wenn diese auf Facebook von anderen nicht gefunden wird? Bin ratlos).
    Sobald ich den Metatext ändere müsste eine weitere Microseite „erzeugt werden“ – ist das so (eventuell für einzelne Unterseiten). Bin noch am Googeln….

    • Jonas Hellwig

      Verfasst am 24. Januar 2011 um 7:07 Uhr.

      Hallo Henner,
      also wenn die Seite öffentlich für “Fans” genutzt werden soll solltet Ihr lieber eine normale Fan-Page anlegen. Die hier beschriebene Technik erweitert die Integration der Website in Facebook – als Fanpage ist sie nicht gut geeignet.
      Wenn du überall die gleichen Metadaten verwendest wird Facebook nicht erkennen, dass es sich um verschiedene Seiten handelt und folglich auch nur eine Seite erstellen. Zumindest die URL sollte also angepasst werden. Im Idealfall (z.B. bei einer Umsetzung mit WordPress) werden alle Metadaten voll dynamisch geladen. Selbst das Bild kann mit Post-Thumbnail individuell geladen werden.

  4. Browsersim

    Verfasst am 20. Februar 2011 um 18:18 Uhr.

    Schon mal vielen Dank für den ausführlichen Artikel. Aber ehrlich gesagt habe ich immer noch nicht gecheckt, worin jetzt nun der Vorteil gegenüber einer gewöhnlichen Fanpage besteht, die man von der eigenen Website aus liken kann. Bringt es was im Hinblick auf mehr Popularität und höhere Besucherzahlen?

    • Jonas Hellwig

      Verfasst am 21. Februar 2011 um 7:39 Uhr.

      Der Vorteil ist in erster Linie die Integration von dynamischen Blog-Posts in Facebook. Wenn anschließend jmd auf den Like-Button klickt, so werden einfach noch viel mehr informationen übertragen. Zum Beispiel ein Artikelbild oder die Kategorie. Dadurch lassen sich die Zugriffe über Facebook dann sicherlich steigern.

  5. Andre

    Verfasst am 3. März 2011 um 18:26 Uhr.

    Sehr guter Artikel! Hast du mitlerweile irgendwelche nennenswerten Erfahrungswerte?

    Kann man auf einer Webseite mehrere unterschiedliche Open Graph Protokolle einbinden. Bspw. wenn man mehrere News untereinander stehen hat (kein Blog; statische Webseite) und für jeden separaten Beitrag einen Open Graph anlegen möchte. Geht das?

    Und kommt mir jetzt nicht mit „Mensch Andre, mach doch alles mit WP, dann haste den Hazzle nich.“ ;)

  6. Andre

    Verfasst am 4. März 2011 um 8:09 Uhr.

    Bei näherer Betrachtung meines Kommentars ist der der zweite Teil vom Inhalt blödsinn. Brauch man also gar nciht näher drauf eingehen ;)

  7. Coco

    Verfasst am 12. März 2011 um 8:27 Uhr.

    Hallo, ich habe die likebox in die Webseite eines Freundes (für ein Cafe in Berlin) eingebunden (mit opengraph-tags), hat soweit auch alles wunderbar funktioniert…nun sollte ich aber den Link ändern…wurde vorher die Webseite selbst „geliket“ so soll aber jetzt von der Webseite aus die facebookseite „geliket“ werden…Link geändert…erst Probleme…dann mit dem Url-linter ( http://developers.facebook.com/tools/lint/ ) facebook überredet die neuen Daten anzuerkennen – war alles supi – uuuund jetzt – alles war gut aber ca alle 3-4 Tage werden von facebook wieder die alten Daten genommen, aber alle 3-4 tage alle Urls wieder durch den Linter jagen kanns ja auch nicht sein??????? Hat jemand eine rettende Idee? :(
    Danke auch so…die Seite hatte mir schon sehr geholfen…Grüße aus Berlin

  8. Herbrich

    Verfasst am 27. Mai 2012 um 6:12 Uhr.

    Also diese Funktoon ist schon gut, aber die umsetzung ist mist. Den in asp.net kann man den link nicht Dynamisch schreibnen. Und ich beführte das es die einstellung des Like Buttons überschreiben konnte. den der „date-link“ wert zeigt immer auf die aktuelle seite. Die Meta Propety aber nur auf http://www.herbrich.org, kann es den da jetzt zu Problehmen kommen??

  9. Metacowboy

    Verfasst am 4. September 2012 um 22:01 Uhr.

    Jonas mein grosses Lob! Endlich ein Post der sich mit dem Thema beschäftigt. Besser hätte ich es nicht in Worte fassen können.
    Nach diesem Schema fahre ich seit ca. einem Jahr und funktioniert sehr gut. Vielleicht 2 Ergänzungen.

    Ist nicht so gut wenn man nur unter weiter Fanpages gelistet wird. Besser ist es auch den Type dynamisch je nach Post zu gestalten. Bsp-Weise via Meta Felder die WP anbietet. Wenn möglich den Post in den Hauptkategorien „Musik“, „Book“, „Movies“ ect. anlegen. Dort gibts ein Thumb im Profil des Likers.
    Ein großer Nachteil den ich noch nicht wirklich lösen konnte: Die dynamischen Abfragen belasten den Blog massiv. Min 10+ zusätzliche Datenbank Abfragen werden zum Problem wenn die sozialen Besucher zunehmen. Und das werden sie…
    Suche nach einer Lösung wie es Youtube macht, mit dynamisch vorgenerierten Metatags.

    PS: Nicht nur Facebook liest diese Metatags auch Google Listet danach.

    Mit Freundlichen Grüßen aus Wien

    • Jonas Hellwig

      Verfasst am 5. September 2012 um 7:17 Uhr.

      Vielen Dank für deine hilfreiche Ergänzung! Du hast Recht, am besten ist es einen Beitrag in die Hauptkategorien einzugliedern. Leider passen diese oft auf Blog-Posts überhaupt nicht zu. Vllt. ergänzt Facebook die Kategorien bald ja.

  10. Mosti

    Verfasst am 9. Dezember 2012 um 18:04 Uhr.

    Hallo,
    erstmal großes Lob für diesen super Artikel!

    Allerding habe ich jetzt alles so eingebaut aber habe keinen Admin Button neben dem Like Knopf und somit auch keine Admin Page.
    Weiß jemand Rat woran das liegen kann?

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.