Website-Icon Webdesign-Podcast

Google +1 (Plus One) Button in die eigene Webseite einbinden / integrieren

Google +1 Button
Mit dem Google +1 (Plus One) Button reiht sich ein weiterer Button in die Social Media Leiste der meisten Webseiten ein und gesellt sich damit zu „gefällt mir“ und Twitter. Bereits vor einigen Wochen habe ich hier von der „gefällt mir“ Konkurrenz berichtet. Damals war der Button jedoch nur in Google.com verfügbar, mittlerweile können auch Webmaster den Button in die eigene Seite integrieren.

Der Clou an der Sache: Google will die Wertungen durch den +1 Button in die Suchergebnisse einfließen lassen. Es war natürlich zu erwarten, dass Google eines nicht allzu fernen Tages etwas „sozialer“ wird. Microsoft hat mit der Facebook Integration in Bing bereits vorgelegt. Google setzt hier lieber auf eigene Technik und entwickelt den Plus One Button.

Der Button selbst lässt sich extrem einfach in eine Webseite einbinden und sollte selbst einem Leihen gelingen. Vorraussetzung zum einbinden ist natürlich, dass man alle nötigen Rechte hat um die HTML-Dateien bzw. Templates eines CMS zu bearbeiten:

Als erstes muss im Head der Webseite ein kleines Script eingebunden werden, also zwischen <head> * </head>:


Das {lang: ‚de‘} sollte dabei wohl selbsterklärend sein, es gibt die zu verwendende Sprache des Plus One Buttons an.

Update: Mittlerweile muss der JavaScript Code nicht mehr zwangsweise im Header einer Webseite eingebunden werden, sondern kann auch direkt über dem PlusOne Tag eingebunden werden (siehe nachfolgendes Beispiel).

Es macht natürlich weiterhin Sinn den JavaScript Code nur einmal im Header einzubinden, wenn der PlusOne Button mehrmals auf einer Seite auftaucht (wie es z.B. auf dieser Seite der Fall ist), so wird die Ladezeit verringert.

Eine weitere Aktualisierung ist am Ende des Artikels zu finden!!!




Danach muss nur noch einer der folgenden Schnipsel an die entsprechende Stelle eingebunden werden, an der Googles neuer Plus One Button auftauchen soll. Es gibt verschiedene Varianten der Tags, die Einfluss auf die Größe des Buttons haben:

Der Standard-Code lautet wie folgt:


mit folgenden Attributen lässt sich die Größe beeinflussen:

Kleiner Button:


Mittlerer Button:


Großer Button:


Neben dem size Attribut zur Bestimmung der Größe gibt es noch die Möglichkeit ein href Attribut einzubauen. Damit lässt sich die Ziel URL bestimmen auf die der +1 Button angewendet werden soll. Weiterhin lässt sich mittels count bestimmen ob neben dem +1 Button ein Klick-Counter angezeigt werden soll oder nicht.

Beispiel:


Es sind noch einige weitere eher nebensächliche Einstellungsmöglichkeiten vorhanden, diese können in der Google +1 Dokumentation nachgelesenen werden

Das war es dann auch schon, mit diesen einfach Schritten wird der neue +1 (Plus One) Button von Google in eine Webseite integriert.

Inwiefern sich die Klicks auf den Button später auf die Platzierung in den Suchergebnissen auswirken wird ist aktuell noch nicht klar.

Ich gehe allerdings davon aus, dass der Button eine ähnliche schnelle Verbreitung finden wird wie der „gefällt mir“ Button, allerdings mit Einbußen. Der Google Button ist meiner Meinung nach nicht ganz so gesellschaftskonform wie der nette „gefällt mir“ Button von Facebook.

Update: Ich wurde relativ häufig gefragt (Kommentare und Mails), wie man den Button valide einbauen kann, denn <g:plusone> ist natürlich kein offizieller Tag. Die Lösung ist simpel: Schreibt den Tag via JavaScript in eure Seite.

Das würde dann z.B. so aussehen:


Die mobile Version verlassen