Google+ Badge in die Webseite integrieren

Seit dem Start der Google+ Pages ist das Google Plus Badge generierbar und konnte bereits als kleine Buttons auf der eigenen Webseite eingebunden werden. Vor wenigen Tagen sind nun auch die großen Badges online gegangen, welche zuvor nur als Preview verfügbar waren. Wie du Google+ Badge in deine Webseite integrieren kannst und warum der Badge auf manchen Webseiten nicht angezeigt werden kann erfährst du in den nächsten Zeilen.

Google Plus Badge auf Webseite einbinden

Die beiden großen Badges waren bisher nur im Preview verfügbar und konnten nicht generiert werden. Mit der Veröffentlichung wurden auch gleich zwei Änderungen durchgeführt, denn der Badge verfügt jetzt über einen Button mit dem man die Google+ Seite sofort einkreisen kann. Und weiterhin gibt es einen Google +1 Button, der bei einer Verknüpfung mit Google+ nicht mehr die Klicks auf die Goolge+ Seite zählt, sondern die eigentlichen bekommenen +1 der eigentlichen Webseiten.

Google+ Badge für Webseite erstellen

Bevor man einen Google+ Badge generieren kann muss man eine Google+ Seite in 5 Schritten erstellen. Ist die Seite erstmal richtig konfiguriert kann man den Google+ Badge Generator aufrufen und hat mit wenigen Klick eine fertige Integrationsmöglichkeit für seine Webseite. Mann muss im Generator lediglich seine Seiten ID eingeben und die Größe des Buttons auswählen und schon hat man den Code für seinen Google+ Badge. Die Seiten ID findet man indem man in Google+ zur gewünschten Seite wählt und die nach plus.google.com/b/ angezeigt Nummer kopier und anschließend im Generator einfügt. Wer sich den Generator ersparen möchte kann sich auch gerne diese beiden Codes kopieren und einfach Seiten ID und Größe anpassen:

<!-- Place this tag in the <head> of your document-->
<link href="https://plus.google.com/101677130783451925442" rel="publisher" /><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>

Diesen Code dort einfügen, wo auch das Google+ Badge erscheinen soll, verfügbare Size Werte sind: badge und smallbadge.

<!-- Place this tag where you want the badge to render-->
<g:plus href="https://plus.google.com/101677130783451925442" size="badge"></g:plus>

Warum wird das Google+ Badge nicht angezeigt?

Bei einer Google+ Badge Integration hatte ich ein Problem festgestellt, denn obwohl ich beide Codeschnipsel richtig eingefügt hatte wurde trotzdem kein  Google+ Badge angezeigt. Und wie so oft liegt die Lösung eines Problems in den WordPress Plugins. Schuld daran ist das PHP Skript CSS-JS-Booster, welches automatisch versucht CSS und Javascript zu kombinieren. Da es dafür keine separaten Einstellungen gibt in denen man bestimmte Skripte, wie beispielsweise das Google+ Badge Skript, zu deaktivieren hilft nur eines: Plugin deaktivieren und Skript löschen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.