Un bouton de partage Google+ valide W3C

Google
© Robert Scoble

Google propose aux développeurs une API complète leur permettant d’intégrer des fonctionnalités plutôt utiles sur leur site web comme l’implémentation de la carte interactive de Google Google Maps, ou encore l’utilisation des Google Adsense dans le but d’obtenir une rémunération sur son site, etc. Depuis la création du réseau social de Google, Google +, un répertoire est consacré aux intégrations liées à cet espace communautaire. Cette page se trouve à l’adresse suivante : Google Developpers. C’est dans ce cadre qu’il est possible d’introduire le bouton de partage G+ sur les pages de son site, une caractéristique qui ne manquera pas de vous rappeler le fameux Like de Facebook. Google nous laisse d’ailleurs un large choix de configuration concernant celui-ci : sa taille, les annotations à fournir ou encore la présence ou non d’un compte représentant le nombre d’utilisateurs ayant apprécié le contenu. Le code le plus simple qu’il soit concernant l’ajout du bouton est le suivant :

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>

Comme vous pouvez vous en apercevoir, il s’agit d’une insertion très simple, qui requiert l’intervention d’un script JavaScript administré chez Google. A la balise <g:plusone></g:plusone>, on peut rajouter des attributs tels que size : à renseigner de la propriété small, medium ou tall ; ou encore href qui lui récupère l’url du lien concerné et count suivi de la valeur true ou false pour indiquer la présence ou non du nombre de partage. C’est un code repris tout bêtement par plusieurs plugins WordPress et par un ensemble de tutoriels que vous trouverez en ligne. Mais, cette méthode présente un petit inconvénient : le code fourni n’est pas valide W3C. Si l’on souhaite être plus rigoureux quant à la standardisation du code HTML, on utilisera un code similaire à celui situé en exemple ci-dessous.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class="g-plusone" data-size="standard" data-count="true" data-href="http://onechapteraday.fr"></div>

En HTML5, il est coutumier d’avoir des balises possédant des attributs data-*. Cette syntaxe est prévue pour préciser des informations importantes aux moteurs de recherche notamment, mais aussi aux aplicatifs web capables de comprendre ces données. On peut ainsi spécifier de manière précise le type de données que l’on possède à l’intérieur d’une balise quelconque, et avoir une utilisation particulière de celle-ci par le biais de JavaScript par exemple. Cet article écrit par Chris Bewick vous donnera quelques éléments supplémentaires pour mieux appréhender cet outil. En bref, cette deuxième méthode vous permettra de respecter les normes W3C.

2 réflexions sur « Un bouton de partage Google+ valide W3C »

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *