HTML / CSS, News, Suchmaschinenoptimierung

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

WordPress Entwickler und Webdesigner

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:

Anzeige:




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

<script type="text/javascript" src="https://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="https://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="https://www.webdesign-podcast.de/" count="false"><\/g:plusone>');
</script>

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

69 Antworten 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

    • 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. 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.

    • 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.

    • Hallo,
      ich habe auch das Problem bei der Verwendung HTML 4.01 Strict.
      Kann mir bitte jemand einen Link mit einem Beispiel nennen?
      Vielen Dank und Grüße

    • Hallo Roberto,

      ein entsprechendes Code-Beispiel ist oben im Artikel zu finden, schau mal im Bereich: „Update: Ich wurde relativ häufig gefragt (Kommentare und Mails), wie man den Button valide einbauen kann, denn ist natürlich kein offizieller Tag. Die Lösung ist simpel: Schreibt den Tag via JavaScript in eure Seite.“ am Ende des Artikels.

      Beste Grüße
      Pascal

    • Hallo Pascal,
      Danke für die schnelle Antwort.
      Ich habe einiges versucht, geladen und angesehen.
      Nichts geht wirklich gut.
      Nie ist es valide und einmal war sogar „document.write“ zu lesen 🙂
      Liegt es daran, dass ich mit dem alten Kompozer arbeite?
      Nun habe ich erst mal wieder den grausigen alten google-schnipse eingefügt.
      Immerhin sind da nur 2 W3C-Fehler zu sehen.
      Ok, vieleicht mache ich mich da unnötig verrückt. Denn es funktioniert ja so.
      Aber bei der Testerei habe ich auch mal als „Empfänger-URL“ nur die Index eingefügt.
      Und siehe da, dann werden die 2 G+ der index angezeigt.
      Mit dem google-schnipsel kann ich das nicht beeinflussen, und müsste es auf die Index einbauen..
      **Kopf kratz und tüftel**
      Grüße aus Aachen

    • Hallo Pascal,
      ich habe einiges probiert. Bis auf eine Kleinigkeit ist es nun valide.

      Erkannt wird noch:
      Error Line 86, Column 11: element „G:PLUSONE“ undefined

      Was ich gemacht habe:
      Im Head-Bereich=

      {lang: ‚de‘};
      document.write(“);

      Den Button im Inhalt=

      Den einen Fehler bekomme ich leider nicht weg.
      Liegt sicher an strict und einfachem html …

      Beste Grüße aus Aachen

  4. 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?

    • 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. 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

    • 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.

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

  8. 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* 🙂

  9. 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 🙂

    • 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

  10. 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

  11. 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).

  12. 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

  13. 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

  14. 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

    • 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

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

  16. 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.

  17. ein Code-Beispiel ist oben im Artikel zu finden. Schaue mal im Bereich „Update. Die Lösung ist einfach. Schreibt den Tag via JavaScript in eure Seite.“

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.