Google+ Button Html5 konform einbetten

Samstag, 21. Januar, 2012

Hinweis:

Dieser Inhalt ist veraltet. Google Plus exitiert nicht mehr.

Um den G+ Button einzubetten, sieht Google das Laden eines Javascripts vom Google-Server und diesen Tag vor:

<!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation="inline"></g:plusone>

Nur ist das nicht konform mit der HTML-Syntax, auch nicht mit HTML5. Macht man einen Testlauf mit einem Validator, so wird diese Zeile angemahnt.

Bei der Darstellung der Seite wird der Tag “g:plusone” vom Browser nicht als gültig erkannt und daher ignoriert. Erst wenn Javascript ins Spiel kommt, dann wird der ungültige Tag mit dem HTML-Code der Schaltfläche ersetzt.

Ja, dann kann man den Tag auch mit Javascript schreiben:

(1) In das Dokument schreiben

<script type="text/javascript">
  document.write('<g:plusone annotation="inline"></g:plusone>');
</script>

Das freut den Validator. Das Aber: Javascript-Aktionen mit document.write sind schlecht für die Webseiten-Performance im Browser.

(2) Tag in einem Platzhalter einsetzen

Daher noch eine andere Variante:
Man erzeugt ein leeres Span-Tag und gibt dem eine ID. Mit Javascript wird das Tag befüllt:

<span id="plusonebutton"></span>
<script type="text/javascript">
  document.getElementById("plusonebutton").innerHTML='<g:plusone></g:plusone>';
</script>

Die Zeile mit document.getElementById kann mit geladenem jQuery noch wie folgt einfacher geschrieben werden:

$("#plusonebutton").html('<g:plusone></g:plusone>');

Damit hat man zunächst einmal den Sourcecode für den Validator bereinigt.

Wenn es Google nun noch schaffen den Plusone Button so anzubieten, dass die Protokolle http und https nicht gemixt werden, dann könnte man auch mit der Ausgabe im Webbrowser zufrieden sein.

2012-01-21-plusone-ignoriert-protokoll.jpg

Links:

  • Seite inaktiv: http://www.google.com/webmasters/+1/button/ (Google: plusone-button)