Google +1-Button XHTML-valide

Zwar werden von sozialen Netzwerken immer eine Vielzahl an verschiedenen Codes zur Einbindung ihrer Buttons bereitgestellt, diese sind jedoch normalerweise nicht XHTML-valide.
Mit etwas Trickserei ist es jedoch möglich, sie XHTML-valide zu bekommen.

Im Fall des +1-Button für das Netzwerk Google+ ist zwar die Standardversion des Buttons XHTML-valide, allerdings nur, solange man keine eigenen Einstellungen vornimmt. Sobald man aber z.B. die Größe des Buttons ändern will, ist er nicht mehr valide.
Zwar gibt es in der Dokumentation auch die Möglichkeit, mit einer Klasse zu arbeiten, was jedoch auch nur in der Standardversion valide ist. Sobald Parameter wie data-size hinzukommen, ist es nur noch HTML5-valide, XHTML jedoch erlaubt solche Parameter nicht.

Nun zur Trickserei:
Dafür muss zuerst einmal folgender Code in den <head>-Bereich der Webseite eingefügt werden:

HTML-Quellcode

  1. <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  2. { lang: 'de', parsetags: 'explicit' }
  3. </script>
An der Stelle im Quellcode, an dem dann der Button erscheinen soll, genügt folgender Code:

HTML-Quellcode

  1. <div id="plusone-div"></div>
  2. <script type="text/javascript">
  3. //<![CDATA[
  4. gapi.plusone.render
  5. (
  6. 'plusone-div',
  7. {
  8. "size": "standard",
  9. "count": "true"
  10. }
  11. );
  12. //]]>
  13. </script>
Alles anzeigen
Hier kann man dann auch noch die einzelnen Parameter angeben, wie sie in der Dokumentation beschrieben sind. Wichtig ist, dass man dem <div> nicht die Klasse g-plusone gibt, da sonst die Standardfunktionen geladen werden, welche die eigenen Einstellungen unwirksam machen.
Über den Autor
Ich bin Webentwickler in Stuttgart und administriere Server seit vielen Jahren. In diesem Blog erstelle ich hauptsächlich Tutorials für andere Webentwickler, Webdesigner und Serveradministratoren.
-------------------------------------------------------------------------------------------------------------------------------------
I’m a web developer in Stuttgart, Germany, and server administrator since many years. This blog mainly contains a tutorial set for other web developer, web designer and server administrators.

378 mal gelesen

Kommentare 0

Es wurden keine Einträge gefunden.

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen