HTML / CSS / News / Suchmaschinenoptimierung

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>:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>

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!!!

<!-- Beispiel aus dem Artikel Update (gelber Kasten) -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>

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:

<g:plusone></g:plusone>

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

Kleiner Button:

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

Mittlerer Button:

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

Großer Button:

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

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:

<g:plusone size="medium" href="http://www.webdesign-podcast.de/" count="false"></g:plusone>

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:

<script type="text/javascript">
document.write('<g:plusone size="medium" href="http://www.webdesign-podcast.de/" count="false"><\/g:plusone>');
</script>

Flattr uns...
Wenn du ein Flattr Konto hast und dir dieser Artikel gefallen hat, kannst du uns mit einer kleinen Spende unterstützen. Kein Flattr Account? Hier gibt es mehr Infos zu Flattr.

flattr this!

61 Kommentare zu “Google +1 (Plus One) Button in die eigene Webseite einbinden / integrieren”

  1. Ich finde das Einbauen des +1-Knopfes (vor allem in meine statischen Seiten, die mit ganz unterschiedlichen Tools erstellt wurden und bearbeitet werden – ich sag nur NOF) überhaupt nicht einfach. Schon gar nicht für Laien. Bei der einen Seite funktioniert die einfache +1-Einbau-Variante, bei der nächsten Seite nicht. Mal zerhaut mir der +1-Knopf das Layout (z. B. als ich versucht habe, ihn in der Navileiste unterzubringen, mal nicht – weshalb ich ihn schließlich ganz ans Ende gesetzt habe). Dann ist da noch die Sache, dass ich bei jeder meiner über 400 statischen Seiten etwas in den head- und in den body-Teil einfügen muss. Ich bin, ehrlich gesagt, frustriert, dass Google uns Webmastern so etwas zumutet. Dass der Knopf tatsächlich so angenommen wird, wie der FB-Knopf, glaube ich auch eher nicht, denn da hinter dem +1-Knopf keine Freunde-Community steht, hat man keinen Grund +1 zu klicken, um mitzuteilen, was einem gefällt – das macht man höchstens für seinen eigenen Blog/Website und für seine Freunde.

  2. hallo,
    ich verwende den 1&1 homepagebaukasten – da funktioniert das einbauen leider nicht.
    im head habe ich den code abgespeichert.
    dann habe ich einen neuen eintrag für html hinzugefügt und den folgenden code verwendet:
    eingebaut. es gibt keine fehlermeldung. Aber auf der siete tut sich nichts. öffnet man den eintrag wieder um ihn zu ändern ist der text gar nicht mehr da :-(
    muss man vielleicht noch etwas drum herum bauen?
    vielen dank für eurer hilfe – andrea

    • Ich gehe mal davon aus, dass der 1&1 Baukasten JavaScript bzw. HTML Code aus dem WYSIWYG Editor löscht.

    • Hallo Andrea,
      ich hatte das selbe Problem, dass der 1&1 Editor wohl “invaliden” Code ausfiltert. Der Trick mit dem Javascript (
      document.write(”);

      ) funktioniert allerdings!

  3. Gurkenmaske sagt:

    Ich würde den Button ja auch gerne einbinden, allerdings nutze ich den doctype 4.01 strict und das “g” ist leider nicht w3c-konform. Hat jemand eine Idee, wie das behoben werden kann? Den Doctype kann ich nicht ändern.

    • Ja, du kannst denn nicht validen Code via JavaScript document.write() einbinden und ins Dokument schreiben lassen. Dann sollte der Validator nicht mehr meckern.

    • Gurkenmaske sagt:

      Super, das ist die Lösung. Das ist ja ein generelles Problem. Ich hoffe mal, das macht jetzt kein Chaos, wenn ich den Codeschnipsel hier poste:

      document.write(”);

      Verstehe garnicht, warum das nicht generell als Einbauanleitung verwendet wird.

      Vielen Dank.

  4. Gurkenmaske sagt:

    Ok, wird offensichtlich doch gefiltert. Da wäre ein extra Code-Feld doch praktisch.

    Vielleicht kannst Du deine Anleitung ja ergänzen?

  5. Hi,
    ich bekomme es leider auch nicht gebacken.
    Egal ob ich das Script in den head-Bereich einfüge oder direkt vor dem schließenden body-tag, ich bekomme immer folgende Fehlermeldung:

    XML-Verarbeitungsfehler: Präfix nicht an einen Namespace gebunden

    Vielleicht läuft es nicht mit Xhtml 4 Strict?

    • Gurkenmaske sagt:

      Das plusone.js ist wohl am Besten direkt vor dem “Ende-Body” zu platzieren. Dann muss noch der “g-Tag” für den +Button an der gewünschten Stelle rein. Wie Pascal Bajorat bereits erklärt hat funktioniert das auch W3C-konform mit document.write() . Den Code-Schnipsel hatte ich schonmal gepostet, der wird aber vom WP gelöscht.

      Auf der Seite machhtml.de/ebay-vorlagen-kostenlos.html ist ein Beispiel zu sehen. Quelltext anzeigen und dann in Zeile 108 (suche einfach nach g:plusone) ist das Skript für den Button. Wegen des canonical im head kann man sich den href im g:plusone eigentlich auch sparen (zumindest habe ich das so verstanden).

  6. Ceasar sagt:

    Gefällt mir besser als der Facebook-Button. Trotzdem wird der erstmal oder weiterhin seinen festen Platz in den Blogs haben.

  7. Der Einbau hat sich geändert: http://code.google.com/intl/de-DE/apis/+1button/

    Es muss jetzt nichts mehr im Head stehen, dadurch wird der Einbau einfacher.

  8. Hallo Pascal,
    habe den plusone-Button nach Deiner Vorgabe realisiert. Leider gibt nun der “Markup Validation Service” (den entsprechenden Button findest Du im Fuß meiner Seite) einige HTML Fehler aus. Wie kann ich das verhindern?
    Gruss, tommi

    • Hi,
      Update ist am Ende des Artikels, so sollte es funktionieren.

      Beste Grüße
      Pascal

    • Mein erster Versuch ist leider schief gegangen: der +1 Button ist vollkommen verschwunden!
      Brauche mehr Zeit zum ausprobieren. Jetzt sind erst Mal andere Dinge angesagt. Ich werde mich melden.
      Danke für die schnelle Antwort! Gruss, tommi
      P.S.: habe +1 und facebook “gefällt mir” erst einmal deaktiviert.

  9. Hallo,

    kennst du dich auch mit PowerGap aus?
    Wollte diesen +1 Button bei allen unseren Artikeln im Onlineshop hinzufügen so, wie es momentan schon bei dem Facebook “gefällt mir” Button ist.

  10. Hallu,

    für die Freunde des stricten XHTML 1.1 und damit zusammenhängender Probleme mit der Validität:

    /* <![CDATA[ */
    document.write('');
    /* ]]> */

    So wird der Code vom Validator quasi ausgeschlossen.

    Lieben Gruß aus Potsdam *wink* :-)

  11. Hallo,
    Ich habe die documentwrite Variante drin. Mozilla, keine Probleme. IE zeigt es aber nicht an. Weiß jemand einen Rat was da schief laufen kann? Und ich glaube …<\/g:… sollte </g: sein :)

    • Nein <\/g ist vollkommen richtig.

    • k… was bewirkt es den? Damit ich mal wieder was lerne… Wüsste so keine Funktion. Ohne scheint es auch zu gehen… Beides lößt aber leider mein anderes wichtigeres Problem nicht -.-

    • Schieb es mal ohne Slash und mit Slash durch den Validator ;-) Da der Plus One Code bei allen gleich ist weiß ich nicht warum es bei dir im IE nicht geht, bei mir alles kein Problem.

    • Hallo, Habe mittlerweile etwas umständlich selbst herausgefunden was \/ bedeutet (schwer danach zu suchen) und habe auch eine andere valide Variante mit entdeckt, die auch mit size und count in XHTML 1.0 Trans funktioniert und bei mir auch in ie… der andere Fehler ist mir rätselhaft bisher, Console debuggen lassen -> nichts im geringesten gefunden… aber mehr zeit verschwende ich für die Inkompentenz validen Code bei solchen Buttons zu produzieren nicht mehr -.- Trotzdem Danke

  12. Gibt es eigentlich eine Möglichkeit das Design des Buttons zu beeinflussen? Würde gern ein Design wählen, dass zum Webdesign der eigenen Website passt.

  13. Hallo Pascal,

    ich hoffe, das stört nicht, wenn ich kurz auf meine hinterlegte URL hinweise. Dort kann man gänzliche ohne irgendwelche Kenntnisse sich den neuen Google +1 Button in 3 unterschiedlichen Versionen generieren. Letztendlich ändert sich im Code auch nur die Größe des Buttons und die eingetragene URL, wie du es ja auch hier im Beitrag geschrieben hast.

    Beste Grüße
    Benjamin

  14. Ich habe zwei fragen erstens:
    wieso werden bei mir verschiedene Werte angezeigt ob wohl ich das ganze auf eine Webseite gebunden habe?

    darf man den botton auf verschiedene Url,s einbinden und wie wirkt sich das ganze auf die werte (zahl der Klicks).

  15. mit verschiedene werte meinte ich die klicks auf der einen seite steht eine3 und auf der anderen eine 0 obwohl der gleiche code vewendet wurde ist das normal.

  16. also ich muss sage die Variante aus dem Artikel Funktioniert wunderbar, die habe ich auch schon eingebunden, Danke nochmal.

    Beste Grüße
    Tarek

  17. Hallo Zusammen,
    danke für die Erklärung zum Einbinden des Buttons aber wie sieht es mit einem Eintrag im Impressum aus? Hat da schon jemand Erfahrungen gemacht. Vielen Dank im voraus

  18. Hallo,

    bei mir schmeist der W3C validators 2 Fehler aus die mit Google+ zu tun haben

    Mir fehlt nun leider das Wissen um das abzustellen.

    http://validator.w3.org/check?uri=http://wohlfuehlpolster.de/

    Line 209, Column 154: there is no attribute “annotation”…+1-Schaltfläche angezeigt werden soll. –>

    Line 209, Column 162: element “g:plusone” undefined…+1-Schaltfläche angezeigt werden soll. –>

  19. Hallo Leute,

    das hier erklärte sind leider gut! Es wird nicht erwähnt das es sich um die XHTML variante handelt und die HTML5 Version wird vorenthalten (die würde möglichweise auch mit den 1&1 Baukasten funktionieren.

    Ebenso wird nicht die asynchrone Methode nicht erklärt welche nun Standard ist und die Seite deutlich schneller macht. Das Javascript würde ich auch nicht im Bereich reinkopieren sondern besser vor dem Ende des Tags.

    Kurzum: Das einbauen des Buttons ist eh super easy, geht besser auf die offizielle Google Seite und folgt den Anweisung.

    • Hi Werner,
      ich muss ehrlich gestehen, dass sich dieser Artikel nicht an Baukasten Nutzer richtet…
      Was die neue asynchrone Ladefunktion angeht hast du recht, die gab es aber zum Veröffentlichungsdatum dieses Artikels noch nicht.
      Werde das ganze aber demnächst mal aktualisieren.

      Beste Grüße
      Pascal

  20. mweltring sagt:

    wenn schon Ihr eigener Button nicht klappt, dann ist Ihre Beschreibung sicher unnütz geworden, veraltet… schade, dass man im Netz so viel uralten Content findet, der zu nix mehr nutzt.

    • Hi mweltring,
      sowohl der Button auf unserer Webseite funktioniert ohne Probleme als auch die im Artikel.
      Soll heißen auch die Anleitung ist aktuell und der beschriebene Code funktioniert.
      Schade das manche Leser nicht warten können bis sämtliche Inhalte geladen sind! ;)
      P.S. Wenn die G+ Buttons bei dir nicht geladen wurden lag das am Google Server, denn die werden ja von dort aus geladen.
      Liebe Grüße
      Pascal

  21. Also ich habe gemacht was ich machen mus aber habe nicht denn botton bekommen

    • Hi Sami,
      dann kontrollier den Code am besten noch mal, denn der in dem Artikel gezeigte funktioniert ohne Probleme.
      Siehst du ja auch an den Beispielen ;)

      Beste Grüße
      Pascal

  22. es muss ein entsprechender Eintrag ins Impressum

  23. hallo,

    ich habe mal vor längerer Zeit den Botton bei mir auf der Homepage eingebunden, hat auch super geklappt aber seit ca. 1 Woche ist der verschwunden woran kann das liegen habe nichts gemacht!

  24. ja hast recht es funktioniert wider, da war wahrscheinlich etwas mit dem Server!

  25. Danke für diese Informationen. Werde ich demnächst mal ausprobieren

  26. Autoankauf H u. L sagt:

    supper danke für die info

  27. GEFÄLLT MIRRRRR SEHR :-)

  28. Danke für die ausführliche Anleitung. Ich benutze aktuell zwar ein Plugin, mit diesem bin ich aber nicht zufrieden. Ich werden den Google Button manuell in den Blog einbauen.

Hinterlasse eine Antwort

Email-Benachrichtigung bei weiteren Kommentaren.
Auch möglich: Abo ohne Kommentar.