Ganz neu hat uns die Tage Google den +1 Button beschert. Ich denke in Zukunft wird dieser +1 Button von Google noch einiges an Wichtigkeit erlangen, so dass es nicht schaden kann jetzt bereits den Google +1 Button in die Webseite einzubauen. Ein paar Tutorials dafür gibt es bereits, aber die ausführlichste Erklärung sowie die Features und Spielereien rund um den +1 Button habe ich nur bei Google selbst gefunden.
Im Prinzip ist das Einbauen des Google +1 Button in Webseite sowie auch in den WordPress Blog nicht schwer. Ein Plugin braucht es meines Erachtens dafür nicht, da sich dieser Button nur aus ein paar Zeilen Code zusammen setzt. So gibt es einerseits von Google einen Generator, mit dem der Code für den +1 Button individuell nach Wunsch generiert werden kann.
Interessanter als der einfache Generator selbst ist die ausführliche Anleitung von Google für den +1 Buttons sowie seine Features. Darin habe ich etwas gestöbert und nun für mich die perfekte Lösung für den Einbau des Google +1 Button gefunden.
Als erstes braucht es ein kurzes Javascript, damit der Google +1 Button eingefügt werden kann und vor allem auch funktioniert. Der Einbau dieses Javascripts wird entweder im Head Bereich oder ganz am Ende der Seite im Footer vor dem </body> empfohlen. Ich habe mich für zweiteres, also für den Footer entschieden, da sich dies positiv auf die Ladezeiten auswirken kann. Damit lädt sich der Google +1 Button zwar als letztes der Seite, doch so schnell wird kaum jemand darauf klicken wollen, dass er zu dieser Zeit noch nicht geladen wäre.
Der Javascript Code für den deutschen Google +1 Button sieht wie folgt aus:
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>
Nun muss noch an der gewünschten Stelle selbst der Google +1 Button platziert werden. An Features bzw. Parameter für den Button sind möglich:
An der gewünschten Stelle der Seite (z.B. in WordPress in der single.php) kann nun der Button eingebaut werden. Der Code für den Einbau des Google +1 Buttons (ohne Callback Funktion) sieht z.B. so aus:
<g:plusone size="medium" count="true" href="<?php the_permalink();?>"></g:plusone>
Die gewünschten Parameter können individuell, wie oben in der Liste beschrieben, eingetragen werden. Für den href Parameter übertrage ich mit der WordPress Funktion die URL des entsprechenden Artikels. In der Sidebar als +1 Button für meinen Blog würde ich einfach nur die URL meiner Domain, also z.B. href="http://www.crazytoast.de/" an dieser Stelle eingeben.
Aus das Tracken des Google +1 Buttons über Google Analytics ist möglich. Eine schöne Anleitung dazu habe ich bei Yoast gefunden. Ich persönlich denke, das Ganze ist ein Workaround und Google wird selbst an einer automatischen oder empfohlenen Lösung für das Tracking des +1 Buttons arbeiten. Wie ich bei Hendrick erfahren habe, steht diesbezüglich ein Update von Analytics in Haus.
Wer aber nicht auf das Update warten möchte, sondern jetzt schon das Google Analytics Tracking seines Google +1 Buttons implementieren will, dem sei die oben erwähnte Anleitung von Yoast ans Herz gelegt. Für alle, die der englischen Sprache nicht mächtig sind, nachfolgend noch eine kurze Zusammenfassung:
Im Google +1 Button Code muss eine ID für die callback Funktion angelegt werden, z.B.
<g:plusone size="medium" count="true" callback="plusone_vote" href="<?php the_permalink();?>"></g:plusone>
Zusätzlich zu der Callback ID braucht es dann noch ein kurzes Javascript, welches Google Analytics anweist, den +1 Button als Event zu tracken:
<script type="text/javascript">
function plusone_vote( obj ) {
_gaq.push(['_trackEvent','plusone',obj.state]);
}
</script>
Das war es dann auch schon, damit wird das Tracking des Google +1 Buttons über Analytics möglich.
Der Google +1 Button ist 2 mal auf meinen Seiten implementiert. Einmal direkt unter jedem Artikel und einmal in meiner Sidebar für die Startseite meines Blogs selbst. Unter den Artikeln zeige ich aktuell den Zähler zum Google +1 Button an, in der Sidebar nicht.
Bezüglich des Zählers bin ich mir noch nicht so ganz sicher. Eine 0 sieht doch einfach irgendwie nur peinlich aus. Andererseits möchte ich aber auch in den einzelnen Artikeln sehen, was passiert ist. Was denkt Ihr darüber? Mit oder ohne Zähler?
[...] einbauen. Wer es sich trotzdem nicht nehmen lassen kann und diesen ausprobieren will, findet bei crazytoast eine einfache [...]
[...] Tanja ist da mit ihrer Bastel-Anleitung für den Button nur ein Beispiel. Aber es gibt auch kritische Stimmen zum neuen ‘Must [...]
[...] gute Anleitung, wie ihr den +1-Button auf eurer Seite einfügt, habe ich bei Tanja gefunden, die auch auf die Anleitung von Google verweist, das alles aber etwas ansprechender und [...]
[...] kann, wurde in den letzten Tagen in zahlreichen Blogs bereits gezeigt. Eine besonders anschauliche Anleitung zum Einbau des +1-Buttons von Google hat Tanja gefertigt, die nicht nur auf den Einbau eingeht, sondern auch die möglichen [...]
[...] es jetzt ein bisschen cleverer gelöst haben möchte, der schaut am besten mal bei Tanja vorbei. Die nimmt nämlich jeden Button auseinander und zeigt die jeweiligen Möglichkeiten [...]
[...] Einbau musste ich eigentlich nicht mehr groß denken, weil ich einfach der Anleitung für +1 gefolgt bin, über das warum (weil ich es kann) hat sich Gilly schon ausgelassen! (Das Logo habe [...]
[...] wird nun über Sinn oder Unsinn dieses Buttons diskutiert. Es werden Anleitungen über den Einbau des Google +1 Buttons in den eigenen Weblog geschrieben und auch die Problematik des Datenschutzes in Bezug auf den Google +1 Button bleibt [...]
[...] Google+1 – Facebook Alternative bietet gute Ansätze Geschrieben von Melvenue am 29 Juni 2011 0 Kommentare Viele kennen ihn wahrscheinlich schon, haben ihn hier und da schon mal gesehen oder vielleicht sogar auf dem eigenen Blog, der eigenen Internetseite eingebaut – den “Google+1″-Button. [...]
[...] Google +1 Button mit ein paar Spielereien einbauen [...]
Als der +1 Button neulich auch für Blogs & Co angekündigt wurde, habe ich gesehen, dass Addthis ein Partner ist, dort wird es bestimmt auch demnächst implementiert. Ich benutze nämlich bei mir AddThis um die gängigsten Social-Network-Buttons einzublenden
Aber was mich bisher wundert, ist warum der +1 Button nicht bei Google selbst in den Sucherbergebnissen auftaucht :-/
Also ich wehre mich noch gegen diesen Button, keine Ahnung warum. Ich weiß aber auch keinen Grund warum ich den bei mir einbauen sollte. Twitter und Facebook Buttons unter meinen Artikeln werden ja auch kaum genutzt.
Wenn er hier schon drin ist dann auch mit Zähler. Denke das animiert die Leute zu klicken. Man will ja dazu gehören
off Topic: Nun sieht dein Blog richtig gut aus. Voher hatte er mir überhaupt nicht gefallen
also vom Design her. Dein Content war ja schon immer spitze!
Ist ja interessant, werde ihn wohl auch integrieren!
Ich hoffe nur, der Zähler bleibt nicht leer.
Mit Zähler, ganz klar. Allerdings frage ich mich gerade, wie es hier wieder mit dem Datenschutz aussieht? Werde ich das ganze wieder irgendwo erwähnen müssen? Wird sich wieder irgendwer aufregen? Man traut sich schon gar nicht mehr das einzubauen
@Felix: Dass wir in DE den +1 Button in den Suchmaschinen sehen, wird wohl noch ein bißchen dauern. Auf google.com ist er schon sichtbar. Dazu muss man aber eingeloggt sein.
@Luigi: Muss jeder selbst wissen, welche Button er einbindet. Ich denke, dass man gerade den +1 Button von Google nicht unterschätzen sollte, der könnte ziemlich interessante Zukunftsmusik spielen. Das gilt aber nur für diejenigen, die Wert auf SuMa Besucher legen
Und Danke für das Kompliment mit dem Design und dem Content. Ist ja immer Geschmackssache, aber es freut mich natürlich, dass Dir das jetzt gefällt.
@Reiner: Ja die Sache mit den Zählern… wenn sich mal jeder der einen Artikel liest angewöhnen würde, auf einen der Buttons zu klicken, sähe unsere Welt ganz anders aus. Nur irgendwie sind wir alle wohl sehr sehr klickfaul was das betrifft
@Sven: Es wird wohl kaum jemals etwas Neues geben, worüber keiner was zu meckern hat
Aber im Ernst: keine Ahnung. Wenn es so sein sollte, dann werden wir wohl bald wieder viel darüber lesen.
Lustig! Gestern hatte ich mich auch mit dem +1-Button beschäftigt. Leider ist er – wie viele dieser Buttons – nicht XHTML 1.0 strict valide.
Grundsätzlich finde ich die Idee gut, habe allerdings auch die datenschutzrechtlichen Bauchschmerzen, die ich schon beim Like It-Button von Facebook hatte (siehe meinen Blogbeitrag ‘http://www.webseiten-infos.de/facebook-blockieren/‘).
Wie auch immer, die Anzahl der +1-Wertungen soll bei Google auch als Rankingfaktor für die Suchergebnisse einfließen. Gleichwohl werde ich unter diesen Rahmenbedingungen auch diesen Button boykottieren.
Bei mir ist der Button testweise auch seit einigen Tagen eingebaut. Ich werde ja dann sehen, wie er sich entwickelt. Von den Facebook- und Twitterbuttons wurde nach einiger Eit erfreulicherweise immer mal wieder von Lesern Gebrauch gemacht. Ich bin gespannt, wie sich das beim Google-Button entwickeln wird. Kommt sicherlich auch sehr darauf an, wie viele Leute einen entsprechenden Google-Account haben und nutzen. Aufgrund des Datenkrake-Images könnte es da schwierig werden, auch wenn ich selbst der Ansicht bin, dass Google da nicht schlimmer ist als beispielsweise auch Facebook, was ja dennoch fleißig immer mehr Menschen nutzen.
Es bleibt die Frage, ob man alles, aber auch alles mitmachen muss, was google vorgibt.
Einerseits wollen wir / will man die Vormacht des I-Net-Riesen brechen, andererseits lassen wir uns wie von einem Diktator sagen, was wir wie zu machen haben, damit er uns auch ja lieb hat.
Irgendwie doch verkehrte Welt, oder?
Also ich habe den Button auch heute mal eingebaut. Ich bin mir noch nicht ganz sicher, ob er was bringt. Zumindest verlängert er schon mal die Ladezeit der Webseite
Ich befürchte, dass viele diesen Button nicht nutzen werden. Der “normale” Besucher wird damit nichts anfangen können.
Das mit den Zähler würde ich so lassen. Die Null kann ja auch bewirken, dass man mitleid bekommt und auf +1 klickt.
Hallo Tanja,
wieder etwas neues bei dir gelernt. Den +1 habe ich bisher gar nicht wahrgenommen – wird sich jetzt vielleicht ändern.
Noch etwas muss ich loswerden: diesen “Bettel-Tweet” beim Aufrufen des Artikels hast du wirklich nicht nötig! Habe ich nicht kürzlich bei dir gelesen, dass du es gar nicht magst, wenn beim Aufruf einer Site pop-ups aufgehen?
@Dieter: Muss natürlich jeder selbst entscheiden.
@Sascha: Ich denke diesem Button wird man eine gute Weile Zeit lassen müssen. Aber da er auch Auswirkungen aufs Ranking hat, geht es ohne doch wohl dauerhaft nicht. Außer man legt keinen Wert auf SuMa Besucher, solche Leute gibt es ja auch.
@Marcus: So tickt eben das Internet, entweder man zieht mit oder man lässt es bleiben.
@Thomas: Er wird zumindest Auswirkungen aufs Ranking haben. Schon alleine deshalb würde ich ihn drin lassen, für die paar die dann doch mal klicken
@Stefan: Das ist kein Bettel-Tweet, hat andere Hintergründe
Dazu evtl. später mehr in einem neuen Artikel.
@Tanja
Jepp! Habe übrigens zu meiner Freude festgestellt, dass AdBlock Plus mit meinen Ergänzungen die ganzen Buttons blockt. Also auch den Google +1 Button und keine Buttonities beim Surfen.
Lediglich den Textlink Follow @crazytoast sehe ich in meinem Firefox und das finde ich auch vollkommen ok.
@Stefan und @Tanja
Erst als ich AdBlock Plus für die Seite testweise deaktiviere, sah ich diesen Layer mit der Bitte den Artikel zu tweeten. Fände ich nervig. Bin da mal auf die Hintergründe gespannt, denn das kenne ich bisher von Tanja auch nicht.
@Dieter: Der Artikel darüber ist bereits online.
@Tanja
Danke! Bereits gelesen und kommentiert. Wird auch gleich getweetet.
Ich liebe einfach deine fachlichen Artikel. Keiner erklärt das so gut wie du.
Und da du wieder so fleißig bist wie eh und je, brauche ich auch nicht mehr lange warten, bis etwas neues kommt
Danke dir! Sobald ich die Klausuren alle durch habe, werde ich mich endlich mal an die Blogroll setzen und dich an erster Stelle pinnen.
@Philipp: Danke, Du bist ein Schätzchen
Wie aktiv ich bin hängt immer gerade von meiner Laune und auch von meiner Zeit ab. Gerade eben ist es mir einfach nur noch viel zu warm *schwitz* – und bei fast 31 Grad im Schatten (schon wieder ein halbes Grad mehr seit dem letzten Blick vor einigen Minuten) ist es auch viel zu warm um nach draußen zu gehen…
Jo, heiß ist es hier auch, hatten aber gerade ein fettes Gewitter und haben immer noch Donnergrollen ohne Ende. Egal, der Grill wird jetzt ausgepackt
@Philipp: ohh wie süß
Bei uns regnet es jetzt auch grad. Da ist eine Wolke, die weint. 30 Grad, Sonne und einige große Regentropfen, die schon fast verdampft sind, bevor sie den Boden erreichen. Total abgefahren…
Grmpf… bin nicht süß, bin böse
Bei uns ist gerade Weltuntergang wurden sogar von der überdachten Terrasse vertrieben. Alles unter Wasser, Dauerblitze.
Jetzt also grillen draußen, essen drinne..
@Philipp: Wenn es so einfach und schnell ginge, dann würde ich sagen “komm verbei mit dem Grill”, hier kannste auch draußen in der Sonne sitzen (und schwitzen)…
Das wäre bestimmt erholsamer gewesen als hier mit 4 Kindern. Tinnitus pur! So was hält Mann echt nur im Garten aus, wo die Schallwellen sich besser verteilen können
Sonne gibt es bei uns wohl laut wetter.com erst wieder nächste Woche ;(
@Philipp: Bei uns sagen sie auch schon die ganze Zeit Regen voraus, nur ist der bis dato noch nicht wirklich hier angekommen, außer die paar Tropfen vor ein paar Stunden.
@Tanja: So, habe bei dem abgekühlten Wetter sogar noch schnell -danke deiner Anleitungen- auch noch den Follow-Button eingebaut. Supi.
Bei dem Wetter kann man super schlafen, müsste nur mal früher schlafen gehen
Weiß nicht, ob ich dir Regen wünschen sollte, hier sind eine Menge Keller unter Wasser.
Aber die frische Luft tut schon gut
@Philipp: Gestern Abend hat es noch richtig geschüttet hier
Ich habe den Google+1 Button jetzt mal testweise lokal installiert, allerdings habe ich ein Problem mit Opera. Alle gängigen Browser zeigen den Button, so wie es sein soll, nur bei Opera sieht man gar nichts. Ist auch nichts blockiert.
Ich schreib das jetzt extra mal hier, da man per Google nichts brauchbares findet und vielleicht hier jemand eine Lösung hat.
Ich hatte es tatsächlich falsch eingebaut. Habe jetzt unter dem Artikel den Artikel +1 Button und in der Sidebar den für den Blog im ganzen.
Dank dir für den Hinweis.
@Tanja: Kann man gut schlafen dann, oder
?
Es soll übrigens noch Betriebe geben, die zwanghaft an dem IE6 halten, leider geht da der G+1 nicht.
@Christian: Das war mir die Tage auch schon mal aufgefallen. Ich dachte es liegt an meiner alten Opera Installation… mir fällt dazu leider grad gar nix ein
@Thom: Bitte, gerne, wenn es schon auffällt, dann kann man das ja auch mitteilen
@Philipp: Stimmt, da geht er nicht. Ich halte übrigens auch zwanghaft an meinem IE6 fest (IE Multi-Installation wegen Webdesign). Wenn ich mal Lust auf lustig surfen habe, dann wird der aufgemacht *lacht*
@Tanja: Entdecke ich da eine masochistische Ader
Oki, danke.
Nal abwarten, vielleichts liegts ja auch daran, dass der Blog noch lokal läuft. Wüsste zwar nicht warum, aber man hat schon Pferde kotzen sehen. ^^
@Philipp: Nicht ganz so maso wie Du denkst. Ich brauch ihn ja auch für die Anpassungen der Designs, wobei ich hier schon seit einiger Zeit nicht mehr wirklich so pingelig bin
@Christian: Man kann es nie wirklich allen Browsern Recht machen. Irgendwas tanzt immer irgendwie aus der Reihe
Nette Zusammenfassung, erspart mit die Sucherei – danke
Ich werde das Ding spätestens am Wochenende mal einbauen… alle guten Buttons sind drei Buttons…
@Marc: Du warst ja schon fleissig, wie ich gerade bei Dir gelesen (und geklickt) habe
Ich habe innerlich mit den Augen gerollt – “nicht schon wieder einer!” -, als ich von dem Button las und konnte mich nicht recht mit ihm anfreunden. Aber ich stimme Deinen “Zukunftsgedanken” zu und werde ihn nun doch einbinden (müssen)
Gruß Sylvi
@Sylvi: Ja, ich denke es kann nicht schaden ihn zu haben und somit auch hin und wieder vielleicht einen Klick darauf zu erhalten.
Klasse, vielen Dank für die Übersicht! Ich habe den Button direkt mit dem Generator eingebaut
Kann man denn da nichts machen um den Code valide zu bekommen?
@Reiner: Mir fällt dazu nichts ein.
Hallo Tanja,
klasse Artikel. hat mich überzeugt, werde den Button auch einbauen.
Allerdings birgt die Art und Weise wie der Button auf Deiner Seite eingebaut ist auch Gefahren, nämlich dann wenn der Google-Server mal laggt. dann friert Deine Seite ein.
Da Du jQuery-Framework verwendest, solltest Du eine asynchrone Verbindung herstellen, wie zum Beispiel so:
if ($(“.g-plusone”).length){
$.ajax({
type: ‘GET’,
url: ‘https://apis.google.com/js/plusone.js',
dataType: ‘script’,
async: true,
cache: true
});
}
In der Anweisung wird nach dem Google-Container gesucht. Befindet sich der Container im Document, dann wird das Script asyncron nachgeladen – und nur dann.
Ein weiterer Vorteil besteht darin, dass das Script gecacht wird und nicht jedes mal neu geladen werden muß.
Nochmal: Vielen Dank für die Inspiration.
Grüße
Werner
Hallo Tanja,
ich sehe den Sinn des Buttons noch nicht. Deshalb bleibt er erstmal draußen.
Bei allen anderen “Buttons” sehen meine Freunde, oder Abonnenten, dass ich etwas toll finde.
Bei diesem Button sieht das nur Google, oder? Oder taucht diese “Bewertung” noch irgendwo sonst auf?
Denn nur für Google würde ich das nicht machen.
LG
Thomas
@Thomas: Wenn sie für google.de freigeschaltet wird, ist sie auch dort sichtbar. Momentan nur in google.com. Dauert ja immer eine Weile, bis das komplett ausgerollt ist.
Ob Sinn oder Unsinn… Ich hab Dir ein weiteres Google +1 beschert, auf das es hilft…
LG
Thomas
Das ist lieb von Dir, vielen Dank
Da ich mich jetzt entschieden habe, den Button auch mal zumindest für einen Monat einzubauen, hab ich mich an Deine Einbauanleitung erinnert.
Nur im Text fehlt was, das vielleicht für Anfänger beim Bloggen oder programmieren wichtig werden könnte:
… ganz am Ende der Seite im Footer vor dem ?? empfohlen …
vor dem was? Vor dem wp_footer fehlt da wohl, oder?
@Marcus: Da fehlte im Artikel die HTML Codierung des HTML Tags, so dass WordPress das Ganze verschluckt hat. Der Ende Body Tag war hier gemeint und es ist jetzt im Artikel ersichtlich.
@Jonas: Bis dato habe ich noch keinen +1-Button Version ohne Javascript gesehen.
Moin,
habe jetzt schon einiges über den +1-Button gelesen und möchte den auch in mein Blog einbauen. Allerdings hab ich was gegen JS und versuche das zu vermeiden, wenn es irgendwie möglich ist. Daher die Frage: Kann man den +1-Button auch statisch einbinden oder MUSS das wirklich über das Google-Script laufen?
Danke für die ausführliche Anleitung!
Mittlerweile ist der Button auch bei mir eingezogen. Was ich aber feststellen konnte auf mehreren Blogs, dass die Klicks dort nicht im Counter angezeigt werden.
Bin ich eingeloggt und klicke einen +1-Button, erhöht sich der Counter und der Button färbt sich blau. Logge ich mich aber nun aus meinem Google-Profil aus, dann verschwindet der Klick aus dem Counter und der vorherige Stand wird angezeigt.
Ich dachte erst, dass es an einer Einstellung in meinem Google-Profil hängt, habe dort aber nichts dergleichen gefunden. Aber warscheinlich bin ich einfach nur zu doff, das zu kapieren…
@Stefan: Zu Anfang war mich auch aufgefallen, dass das “Teil” etwas klemmt. Ich war gerade bei Dir im letzten Artikel, dort konnte ich im Zähler eine 1 sehen (nicht eingeloggt). Daraufhin habe ich mich eingeloggt und +1 gedrückt. Stand eine 2 drin eingeloggt, kaum habe ich mich ausgeloggt was wirder nur ne 1.
In meinem Profil bist Du aber drin bei den +1, also schätze ich, dass es einfach nur ne Weile dauert, bis der Zähler das “rafft”.
Jo, so schaut es aus. Mittlerweile haben sich die Counter aktualisiert. Danke Dir fürs Ausprobieren! Was man nicht alles macht, um nen Vote abzustauben!
Jetzt weiß ich auf jeden Fall Bescheid und brauch mich nicht zu wundern!
Viele Grüße
Stefan
@Stefan: Hab ich doch gerne mal kurz ausprobiert. Mir wird bei so was auch immer ganz anders
Übrigens war mir auch schon mal aufgefallen, dass +1 einfach so votes verschluckt hat… erst da, dann am nächsten Tag weg…
Danke für die Anleitung.

Habe es mittlerweile auch drin und einen Trackback solltest du ebenfalls bekommen!
Ist allerdings nun wie folgt eingebunden: href=”"
oder soll/muss ich das in meine URL umändern?! Hab da nicht so gaaanz durchgeblickt!
Wie immer – Danke Tanja!
@Alex: Tb ist noch keiner hier eingetrudelt
href solltest Du schon ausfüllen, sonst funktioniert da nix. Entweder Deine URL nehmen oder wie oben im Artikel beschrieben den Permalink, wenn das in die einzelnen Artikel soll.