Google veröffentlicht “+1 Buttons” (PlusOne) für Websites

plusone-buttons-google-2

Vor einiger Zeit kündigte Google an, ein soziale Komponente in die Suchergebnisse einfließen zu lassen und so dem Like-Button von Facebook Konkurrenz zu machen. In der Trefferliste der Suchmaschine wird seitdem ein kleiner Zähler neben den Suchergebnissen angezeigt, der darüber Aufschluss gibt, wie viele Menschen die Website positiv bewertet haben. Um die Bewertungen zu sehen und auch selbst abgeben zu können, muss man über einen Google-Account verfügen. Darüber hinaus sei erwähnt, dass das Feature bislang nur in der englischen Version von Google zu sehen ist.

Nun macht das System wenig Sinn, wenn die Besucher nur in der Ergebnisliste von Google bewerten können. Wer sucht schon bei Google nach einem Thema, findet anschließend eine hilfreiche Seite und kehrt daraufhin noch einmal zur Ergebnisliste zurück um dort die Website zu bewerten?
Aus diesem Grund hat Google nun den "+1 Button" für Websites veröffentlicht. Per Code-Snippet lässt sich der Button problemlos in die eigene Website integrieren. Anschließend können Besucher die Inhalte auch dort empfehlen, wo sie gelesen werden.

Trainings für Unternehmen und Privatpersonen

Wir machen dich fit für die Zukunft des Web! In unseren Seminaren und Workshops lernst du wie moderne Websites entstehen.

Infos zu Inhouse-Seminaren
Infos zu öffentlichen Terminen

Google bietet vier verschiedene "+1 Buttons"

Google stellt vier verschiedene Versionen, bzw. Größen des +1 Buttons zur Verfügung. Im nicht-geklickten Zustand sind die Buttons weiß. Nach der Bewertung blau.

Plus One (+1) Buttons von Google

Einfache Einbindung

Um den Button in der eigenen Website verwenden zu können, muss zunächst die JavaScript API von Google eingebunden werden. Bindet dazu folgenden Code entweder im head der Website, oder direkt vor dem schließenden /body-Tag ein. Das folgende Snippet bindet die deutsche Sprachversion ein.

<script type="text/javascript">
  window.___gcfg = {lang: 'de'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Um den Button in der Website anzuzeigen, fügt ihr folgenden Code ein. Ich habe den Code für alle Größen untereinander geschrieben.

<!-- small -->
<g:plusone size="small"></g:plusone> 

<!-- medium -->
<g:plusone size="medium"></g:plusone> 

<!-- standard -->
<g:plusone></g:plusone> 

<!-- tall -->
<g:plusone size="tall"></g:plusone>

Live-Demo / Fazit

Wenn ihr sehen wollt, wie der Button im Live-Einsatz aussieht oder testen möchtet, wie er funktioniert, so findet ihr ihn ab sofort am Ende aller meiner Artikel. Ich bin noch nicht sicher, wie sich "+1" im Internet verbreiten wird. Ich selbst werde es auf jeden Fall effektiv nutzen, da ich über jede Facebook-Konkurrenz froh bin. Wie seht ihr das?

Offizielle Ressourcen

Google hat die Funktionen des Plus One (+1) Buttons bereits in einem Video ausführlich erklärt.

Die offiziellen Google-Quellen zu diesem Thema findet ihr hier:

Update: Google +1-Button für WordPress

Wenn ihr den +1-Button innerhalb von WordPress mithilfe eines Plugins einbinden möchtet, so schaut euch am besten folgendes Plugin an. Es funktioniert einwandfrei mit anderen "Share"-Plugins wie Twitter oder Facebook.

Update 2: Asynchrones Laden

Google hat eine Update des Buttons bereit gestellt. Der Button hat einige zusätzliche Optionen spendiert bekommen und lädt nun u.A. auf Wusch asynchron. Ein asynchrones Loading behindert den Seitenaufbau nicht und führt zu einem schnelleren sichtbaren Website-Aufbau. Da ich die Option für sinnvoll halte, habe ich das Code-Snippet entsprechend angepasst. Die Standard-Version des Buttons kann nach wie vor auf code.google.com/apis/+1button generiert werden.