Google Plus auf Webseite einbinden und das möglichst unkompliziert und schnell: In diesem Artikel möchte ich das Vorgehen kurz erklären. Es ist in der Regel in wenigen Minuten gemacht. Falls man ein CMS oder Blogsystem wie Word Press hat, dann geht das in der Regel noch schneller mit einem Plugin.
Hat man kein etabliertes System wie Word Press oder dergleichen und kann nicht auf bereits fertige Plugins zurückgreifen, dann muss man den HTML-Code per Hand an die richtige Stelle platzieren.
Den Code für Google Plus erhält man auf der Google+ Platform unter Google Developers. (Achtung, nicht wundern: Der Generator für den Code wird etwas verzögert im oberen Teil der Seite nachgeladen.)
Und so sieht der Google Plus Generator dann aus, nachdem er geladen wurde:
Im linken oberen Bereich muss man zuerst die Größe (size) auswählen. Entsprechend sieht man in der rechten Vorschau den Button. Man hat die Auswahl zwischen „small“, „medium“, „standard“ und „tall“. Hier auf seomeo.de sieht man links und unter dem Beitrag den Google+ Button in der Größe „tall“.
In der ComboBox unter annotation kann man die Ausrichtung der Anzeige für die gemachten Empfehlungen festlegen. Bei inline wird die Anzahl im laufenden Textfluss angezeigt. Bei der Auswahl bubble wird die Anzahl als Seifenblase, ähnlich wie bei Comics, entweder oben oder rechts vom Button selbst angezeigt. Ob rechts oder oberhalb hängt von der ausgewählten Buttongröße ab.
Unter width legt man die Breite des gesamten Buttonbereichs fest.
Mit der vierten Einstellung legt man noch die Sprache (language) fest. Bei der Ausrichtung inline steht zuerst die Anzahl der Empfehlung und anschließend folgender Text rechts neben dem Plus-Button: „Auf Google empfehlen“.
Unter Advanced options kann man noch folgende Einstellungen festlegen:
- Asynchronous
- HTML5 valid syntax
Interessant ist hier die Option URL. Hier kann man, wenn man möchte, eine feste Adresse für die Empfehlung / Like festlegen. Wird keine URL festgelegt, dann wird immer die Internetadresse ausgelesen, auf der der Button gerade zu sehen ist und angeklickt wurde.
Nachdem man sich durchgeklickt hat, erscheint rechts im Textfeld der fertige Code. Dieser könnte so aussehen:
<!– Place this tag where you want the +1 button to render. –>
<div class=“g-plusone“ data-annotation=“inline“ data-width=“300″></div><!– Place this tag after the last +1 button tag. –>
<script type=“text/javascript“>
window.___gcfg = {lang: ‚de‘};(function() {
var po = document.createElement(’script‘); po.type = ‚text/javascript‘; po.async = true;
po.src = ‚https://apis.google.com/js/plusone.js‘;
var s = document.getElementsByTagName(’script‘)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Den oberen <div>-Tag kann man nun kopieren und platziert ihn an eine beliebige Stelle auf der eigenen Webseite. Unterhalb muss man noch den zweiten Teil (Javascript Code) in den HTML-Quelltext einfügen. Ich empfehle den zweiten Teil kurz vor dem schließenden <body>-Tag einzufügen (vor </body>).
Wo man den Empfehlen-Button in die Webseite einbindet, ist einem selbst überlassen. Je auffälliger im sichtbaren Bereich, desto höher ist die Wahrscheinlichkeit, dass er gesehen und schließlich von einem Nutzer geklickt wird. Social Media ist wichtig und sollte nicht vernachlässigt werden.
