[Gastartikel] Google +1 Button in Artikel einbauen

Juli 8, 2011 16 Kommentare technisches

Den Google +1 Button gibt es bereits seit einigen Wochen, kurz darauf erfolgte die Öffnung der Beta-Phase von Google+. Der Google +1 Button erhielt daher in den letzten Tagen eine Art Boom, in dem er auf immer mehr Seiten auftauchte. Getreu dem Slogan „Empfehlungen genau im richtigen Moment“, soll der Button mehr sein, als ein Gefällt-mir-Button. Er soll einen Link nicht nur weiterempfehlen, sondern auch seine Position in der Google-Suchmaschine optimieren. Mehr Klicks bedeutet damit auch eine bessere Position in Googles Suchergebnissen. Doch nun kam in den letzten Tagen auch immer häufiger die Frage auf, wie baue ich einen solchen +1 Button unter meine Blog-Artikel ein? Daher bin ich heute am Zug – der selbstgemachte Admin :alien:  – einen kurzen Artikel darüber bei Miki zu schreiben.

Ich werde mich bei der Erklärung auf WordPress beziehen, was sich besonders durch die Bearbeitung der Templates und des Nutzens von PHP ausdrücken wird.

Was wird gebraucht?:

  • der generierte Google +1 Code
  • Zugriff (via FTP) auf das WordPress-Template

Wer noch nie in seinem Leben sein WordPress-Template in Code-Form gesehen hat, sollte hier äußerst vorsichtig vorgehen. Wie immer heißt es: Vorsicht ist besser als Nachsicht und somit sollte man vorher ein Backup des Templates anlegen.

Zunächst generiert man seinen Google +1 Code. Dafür bietet Google einen eigenen Service an, der hier zu finden ist. Hier kann man nun verschiedene Optionen einstellen. Dazu gehören vor allem die Größe, die Sprache und ein paar erweiterte Optionen. Bei den erweiterten Optionen ist vor allem der Punkt „Zähler anzeigen“ interessant, der neben bzw. über dem Google +1 Button (je nach eingestellter Größe) anzeigt, wie oft er bereits geklickt wurde.

Ich habe folgenden Beispielcode generiert:

<!– Dieses Tag in den Head-Bereich oder direkt vor dem schließenden Body-Tag einfügen –>
<script type=“text/javascript“ src=“https://apis.google.com/js/plusone.js“>
{lang: ‚de‘}
</script>

<!– Dieses Tag dort einfügen, wo die +1-Schaltfläche dargestellt werden soll –>
<g:plusone></g:plusone>

Dieser Button wird wie folgt aussehen:

Dieser generierte Code muss nun den Weg in das WordPress-Template finden.

Zunächst ist der Header des Dokuments dran. Meistens verbirgt sich dieser in der header.php. Dort sucht man nach <head>…</head>. Dazwischen muss der erste Teil des Google +1 Codes eingefügt werden:

…

<head>

…

<!– Dieses Tag in den Head-Bereich oder direkt vor dem schließenden Body-Tag einfügen –>
<script type=“text/javascript“ src=“https://apis.google.com/js/plusone.js“>
{lang: ‚de‘}
</script>

…

</head>

…

Dabei bietet es sich z.B. an, ihn direkt vor den </head>-Tag zu packen, also als letztes Element im <head>-Bereich.

Danach muss der eigentliche Button in den Content, also den Artikel, eingefügt werden. Dieser befindet sich in einer anderen Template-Datei, bei einfachen Templates ist dies meistens die index.php-Datei. Dort sucht man nach dem Code-Schnipsel <?php the_content(‚(TEXT FÜR WEITERLESEN-LINK)‘); ?>. An dieser Stelle wird der Artikel eingeblendet. Je nachdem, ob man den Google +1 Button über oder unter dem Artikel einbauen möchte, muss man den Code über bzw. unter den the_content-Schnipsel packen.

In diesem Beispiel packe ich den Code darunter:

…

<?php the_content(‚(TEXT FÜR WEITERLESEN-LINK)‘); ?>

<!– Dieses Tag dort einfügen, wo die +1-Schaltfläche dargestellt werden soll –>
<g:plusone></g:plusone>

…

Doch eine Sache fehlt noch, denn aktuell wird der Google +1 Button sich nicht auf den Artikel, sondern auf die aktuell aufgerufene Seite beziehen. So würden jetzt also alle Buttons nur ein „plussen“ von mik-ina.de erlauben, und nicht von den direkten Artikel-Links. Um das zu ändern, muss nur noch eine kleine Anpassung vorgenommen werden. Es muss der Artikel-Link, der bei WordPress über PHP generiert wird, zwischen die <g:plusone>-Tags gepackt werden.

<g:plusone><?php the_permalink() ?></g:plusone>

Nun müssen die entsprechenden Template-Dateien nur noch auf dem Server aktualisiert (hochgeladen) werden und der Google +1 Button für die jeweiligen Artikel ist einsatzbereit.

Wer sich weitere Features bzw. Buttons wünscht und sich hier noch unterfordert fühlte, dem empfehle ich die Nutzung von AddThis, welches auch die Nutzung des Google +1 Buttons offiziell unterstützt. Wie man einen AddThis-Code HTML-konform einbindet, findet ihr auf meinem Blog heraus ;-)

    Kommentare geschlossen.