Neuen Google +1 Button in einen Blogger Blogspot Blog einbetten

blogger blogspot
Wie kann man bei Blogspot den neuen “Google Plus Eins” Button einbinden? Wie bettet man den neuen “Google +1” Button bei einem Blogger Blogspot ein?

Google hat das Design der “Google +1” bzw. der “Google Plus” Buttons geändert. Das neue Design der Buttons wurde automatisch für sehr viele Produkte, auch in Blogger Blogspot Blogs, übernommen. Wer sich mit dem alten bunten Design gar nicht anfreunden konnte hat vielleicht Grund zur Freude.

Das alte Design wird es in diesem Artikel weiter zu “bewundern” geben.

Wozu braucht man nur all diese Share Buttons (Social Media Buttons)? Man braucht sie nicht, aber sie bringen viele Vorteile.

Wer seine Webseite bekannter machen möchte und das Ranking in den Suchmaschinen verbessern möchte, wird kaum mehr an Social Media Buttons vorbeikommen.

Ein Vorteil ist, dass der Leser schneller den Inhalt der Seite, auf der er sich befindet, in sozialen Netzen teilen kann. Was das bringen soll? Es bringt mehr Besucher und neue Leser finden vielleicht die Seite bzw. den Blog interessant. Vielleicht teilen diese wieder die Links zu bestimmten Posts bzw. Artikeln des eigenen Blogs. Somit kann sich ein Link zu einer Webseite bzw. einem Blog schneller verbreiten und mehr Besucher auf den Blog bringen.

Sehr gut ist es, wenn dann noch jemand den Inhalt des eigenen Blogs so gut oder empfehlenswert findet, dass er in seinem Blog oder auf seiner Webseite einen Link zum eigenen Blog setzt. Man spricht dann von einem Backlink. Auch den Backlinks kommt eine wichtige Bedeutung zu und sehr vereinfacht ist es ein nicht unwesentliches Kriterium für das Ranking des Blogs in den Suchmaschinen.

Der "Google Plus Eins" Button ist ebenso ein Social Media Button und hat in etwa die gleiche Funktion wie der “Gefällt mir” Button von Facebook. Mit dem "Google +1" Button können Leser die Inhalte des Blogs positiv bewerten und es bringt eventuell weitere Besucher auf den Blog.

Der Code für den "Google +1" Button wird in einem Blogger Blogspot Blog über das Gadget HTML/JavaScript (meist in der Seitenbar) eingefügt.

Gadget für HTML/JavaScript in der alten Blogger Oberfläche hinzufügen

  • bei blogger.com einloggen und entsprechenden Blog aufsuchen
  • Design >> Seitenelemente >> Gadget hinzufügen >> HTML/JavaScript auswählen und den Code des “Google +1” Buttons einfügen >> Speichern
  • Blog neu laden und der Button sollte zu sehen sein

Gadget für HTML/JavaScript in der neuen Blogger Oberfläche hinzufügen

  • bei blogger.com einloggen und entsprechenden Blog aufsuchen
  • Layout >> Gadget hinzufügen >> HTML/JavaScript auswählen und den Code des “Google +1” Buttons einfügen >> Speichern
  • Blog neu laden und der Button sollte zu sehen sein

Neue Google +1 Buton in Blogger Blogspot einbetten. Neue Google Plus Eins Button in Blogger Blogspot einbetten.


Google +1 Buttons & Codes

Button – groß

Neue Google +1 Buton in Blogger Blogspot einbetten. Neue Google Plus Eins Button in Blogger Blogspot einbetten.

Code

<g:plusone size="tall" annotation="none"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'de'}
</script>

Button – standard

Neue Google +1 Buton in Blogger Blogspot einbetten. Neue Google Plus Eins Button in Blogger Blogspot einbetten.

Code

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

Button – mittel

Neue Google +1 Buton in Blogger Blogspot einbetten. Neue Google Plus Eins Button in Blogger Blogspot einbetten.

Code

<g:plusone size="medium" annotation="none"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'de'}
</script>

Button – klein

Neue Google +1 Buton in Blogger Blogspot einbetten. Neue Google Plus Eins Button in Blogger Blogspot einbetten.

Code

<g:plusone size="small" annotation="none"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'de'}
</script>

Button mit Counter – groß

Neue Google +1 Buton in Blogger Blogspot einbetten. Neue Google Plus Eins Button in Blogger Blogspot einbetten.

Code

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

Button mit Counter – standard

Neue Google +1 Buton in Blogger Blogspot einbetten. Neue Google Plus Eins Button in Blogger Blogspot einbetten.

Code

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

Button mit Counter – mittel

Neue Google +1 Buton in Blogger Blogspot einbetten. Neue Google Plus Eins Button in Blogger Blogspot einbetten.

Code

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

Button mit Counter – klein

Neue Google +1 Buton in Blogger Blogspot einbetten. Neue Google Plus Eins Button in Blogger Blogspot einbetten.

Code

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

Button mit Counter – groß

Neue Google +1 Buton in Blogger Blogspot einbetten. Neue Google Plus Eins Button in Blogger Blogspot einbetten.

Code

<g:plusone size="tall" annotation="inline"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'de'}
</script>

Button mit Counter – standard

Neue Google +1 Buton in Blogger Blogspot einbetten. Neue Google Plus Eins Button in Blogger Blogspot einbetten.

Code

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

Button mit Counter – mittel

Neue Google +1 Buton in Blogger Blogspot einbetten. Neue Google Plus Eins Button in Blogger Blogspot einbetten.

Code

<g:plusone size="medium" annotation="inline"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'de'}
</script>

Button mit Counter – klein

Neue Google +1 Buton in Blogger Blogspot einbetten. Neue Google Plus Eins Button in Blogger Blogspot einbetten.

Code

<g:plusone size="small" annotation="inline"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'de'}
</script>


Artikel als PDF herunterladen

4 Kommentare:

Lily 13. April 2012 um 20:34

Ist es auch möglich den social network button mit der Kommentarfunktion zu verbinden, bzw. ihn unter den jeweiligen Post zu hängen? Das habe ich auch schon auf diversen blogs gesehen.

Liebe Grüße
Lily

BloggerLatein 13. April 2012 um 21:48

@Lily

1. Kommentarfunktion: habe mir mal eben deinen Blog angeschaut. Und Du nutzt auch das neue zweistufige Kommentarsystem. Ich habe es noch nicht ausprobiert und kann nicht viel dazu sagen. Es wird wohl aber über den Kommentar Feed pro Post bereit gestellt und daher glaube ich, wird es schwierig mit der Integration der Share Button. Wenn ich in den nächsten Tagen mal mehr Zeit finde werde ich es mir mal anschauen und ausprobieren.

Nutzt man noch die alte Kommentarfunktion müsste man den Code bzw. Aufbau deiner Template Vorlage kennen dann könnte man es bestimmt umsetzen.

2. Unter einem Post:
Dazu musst Du tiefer in Deine Template Vorlage eingreifen...ist aber halb so schlimm. Vorher fertige eine Sicherung vom Template an (falls was schief geht und Du Dir Deine Vorlage ruinierst).

Sicherung - Neue Blogger Oberfläche:
Vorlage >> Backup/Wiederherstellung (oben rechts) >> Vollständige Vorlage herunterladen (und fertig)

Wenn etwas schief geht lädst Du die Sicherung einfach wieder über Layout >> Backup/Wiederherstellung >> Durchsuchen und hochladen hoch


Danach: Vorlage >> Live im Blog >> HTML bearbeiten >> (Warnmeldung ignorieren) Fortfahren >> Haken bei Widget-Vorlagen komplett anzeigen >> dann STRG+F oder F3 Taste drücken und in die Suchmaske für die Seitensuche folgendes eingeben: <div class='post-footer-line post-footer-line-2'/> und gleich darunter kopierst Du den Code von einen Google Plus Button >> Vorlage speichern >> Blog neu laden und der Google Plus Button sollte unter dem Post zu sehen sein

Wenn es vom Design nicht passen sollte dann wiederhole den Vorgang und lösche den Code (Google Plus Button) bei post-footer-line-2 wieder und kopiere ihn kurz darunter bei post-footer-line-3.

Wenn es nicht funktionieren sollte dann melde Dich noch einmal.

Viele Grüße

Anonym 29. April 2012 um 14:56

Kann man eigentlich auch bestimmen, welchen Text Google+ sich auf einer Webseite rausschneidet und auf der jeweiligen Google-Plus-Seite veröffentlicht?

BloggerLatein 30. April 2012 um 11:32

Eine andere Variante ist mir nicht bekannt. Ich glaube es ist ähnlich wie mit dem Facebook Button, es werden immer die ersten Zeilen des Posts angezeigt.
vg

Kommentar veröffentlichen