Das von Facebook entwickelte OpenGraph Protokoll macht es Anbietern von Inhalten im Internet einfach, diese für Socialnetworks zugänglich zu machen, zum Beispiel, damit Nutzer diese Inhalte “Sharen”, “Liken” oder “Gut finden” können. Seit Kurzem unterstützen auch die VZs dieses Protokoll und mit der neuen VZ-JS-Library gibt es auch einen schönen “im VZ zeigen” Button.
Wir haben diese neuen Möglichkeiten natürlich gleich ausprobiert und dabei gleich ein paar Bugs gefunden, die von den VZ-Entwicklern gleich behoben wurden (zuerst gab es Probleme in Kombination mit dem Mootools Framework, später mit dem Twitter-Button). Da diese behoben sind und die Integration gut funktioniert, wollen wir euch erklären, wie wir vorgegangen sind.
1. OpenGraph Metadaten
Damit neue VZ-Button und auch der Facebook “Like”-Button funktionieren, werden erstmal Metadaten benötigt. Diese werden im OpenGraph Format in den Head der Seite geschrieben. Wir haben dies über ein paar Zeilen Code in unserem WordPress Theme gelöst, aber für fast alle Content Management Systeme gibt es auch entsprechende Plugins, welche die Metadaten automatisch erzeugen.
Wichtig für die VZs sind die Metadaten “og:title”, “og:description”, “og:site_name” und optional “og:image”.
2. Die VZ-JS-Library
Die VZs bieten mit ihrer JS-Library eine einfache Möglichkeit, den “Zeigen”-Button einzubinden. Hierfür muss lediglich folgender Code in den Head der Seite eingefügt werden:
<script src="http://static.pe.studivz.net/Js/id/v2/library.js" data-authority="platform-redirect.vz-modules.net/r" data-authorityssl="platform-redirect.vz-modules.net/r" type="text/javascript"></script>
Dieser Code nutzt den VZ-PlatformRedirector, damit immer das passende VZ für jeden Benutzer ausgewählt wird. Alternativ kann auch direkt ein VZ angegeben werden.
3. Der VZ-”Zeigen”-Button
Der “Zeigen”-Button kann ganz einfach an jeder Stelle der Seite eingefügt werden, indem folgender Code verwendet wird:
<script type="vz/share"> id: shareButton </script>
Der Button erscheint dann an Stelle des Codes. Wie der Button aussieht, kann man unter diesem Artikel sehen.
Das neue Sharing der VZs ist deutlich einfacher in websites einzubinden als bisher und auch die User-Experience ist durch automatische Wahl des VZs und die Auslagerung des eigentlichen “Sharing”-Vorgangs in ein Pop-Up deutlich verbessert.
Weitere Informationen:
Pingback: Marcel Pauly
Ich bekomm einfach nicht die Meta Daten in blogger.com integriert. Der HTML Editor schreib die Daten automatisch um, gibt es keine Lösung für mein Problem?
Funktioniert das mittlerweile bei allen Seiten? Den anfangs hieß es erst, dass die nur mit ausgesuchten Partnern testen wollen.
Bei uns funktioniert der Twitter und auch der FB-Button ohne Probleme. Beim VZ-Button werden die Open Graph-Daten einfach nicht ausgegeben. Es wird nur die url übertragen.
Gibt es dafür eine Lösung?