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="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: +1, Google, HTML, PlusOne, SEO
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.
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!
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
Probier mal das ganze direkt in den Templates einzubauen, also direkt in den Code.
Bzw. was gibt es den überhaupt für Validierungsfeheler?
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
Ok, wird offensichtlich doch gefiltert. Da wäre ein extra Code-Feld doch praktisch.
Vielleicht kannst Du deine Anleitung ja ergänzen?
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).
Gefällt mir besser als der Facebook-Button. Trotzdem wird der erstmal oder weiterhin seinen festen Platz in den Blogs haben.
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.
Danke für den Hinweis, ich habe den Artikel entsprechend geupdatet…
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.
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.
Tut mir leid, aber mit PowerGap kenne ich mich nicht aus.
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* 🙂
Danke für deine Ergänzung.
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
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.
Du kannst die Größe anpassen, das Design selber soweit ich weiß nicht.
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
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).
Ich weiß leider nicht was du meinst … Du kannst den Button auf verschiedenen URL’s einbinden und auch mehrmals auf einer Seite.
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.
dann hast du keinen festen href Wert angegeben.
ich bin auf dieser Seite gegangen und habe diesen Code in meiner html eingefügt:
https://www.addthis.com/get/sharing#.TzqYkIGgfoJ
und so sah das auf meine siete aus da ist auch nix mit „href“
Hi Seiko,
AddThis fügt für jede Seite einen eigenen Code ein.
Hast du denn diesen Artikel hier überhaupt nicht gelesen, bevor du kommentiert hast??
Oben ist ein entsprechendens Beispiel mit „href“, einfach das letzte und vorletzte Beispiel ansehen.
Beste Grüße
Pascal
natürlich habe ich alles gelesen, nur ich habe es im Internet gesehen das man auch über AddThis auf allen Seiten die Gleichen Werte haben kann. Vielleicht muss man da irgend etwas einstellen.
Na dann versuch doch bitte einfach mal die Variante aus dem Artikel 😉 Die Einstellung bei AddThis kann ich dir leider auch nicht sagen …
also ich muss sage die Variante aus dem Artikel Funktioniert wunderbar, die habe ich auch schon eingebunden, Danke nochmal.
Beste Grüße
Tarek
Kein Problem, bitte …
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
Ja es muss ein entsprechender Eintrag ins Impressum …
bitte den Link von Max raus nehmen. Vielen Dank im voraus
wie, wo, was und vor allem warum?
Vielen Dank für die schnelle Antwort. Die Batterie Seite ist von mir und ich kenne keinen Max. Also warum dann der Link zu meiner Seite? Können Sie ihn bitte rausnehmen.
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. –>
Versuch mal die JavaScript Variante, ganz unten in diesem Artikel…
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
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
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
es muss ein entsprechender Eintrag ins Impressum
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!
Eigentlich hat such an dem Code nichts geändert, es sollte weiterhin alles funktionieren.
ja hast recht es funktioniert wider, da war wahrscheinlich etwas mit dem Server!
Danke für diese Informationen. Werde ich demnächst mal ausprobieren
supper danke für die info
GEFÄLLT MIRRRRR SEHR 🙂
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.
Leider ist nicht alles angekommen. Was ich gemacht habe ist im Head: {lang: ‚de‘}; document.write(“); und dann nur den Button gesetzt.
Seltsam, es gelingt mir nicht, die Anweisung hier einzustellen 🙂
JavaScript Code wird aus Sicherheitsgründen aus den Kommentaren gefiltert. Du kannst mir den Code aber gerne per E-Mail schicken, dann gucke ich ihn mir mal an.
Kontaktdaten findest du hier: https://www.webdesign-podcast.de/kontakt/
Alternativ kannst du den Code über mycodestock.com oder JSFiddle freigeben und hier den Link posten.
Hallo Pascal, vielen Dank für die Mail ! Nun klappt alles prima 🙂
Button und Counter wird richtig angezeigt und beim validieren alles grün!
Beste Grüße, Roberto
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.“