Comment rendre son bouton FaceBook, Twitter, Buzz valide W3C

Publié le 26 mai 2011 - Developpement Web. Tags :

J’ai vraiment du mal à comprendre pourquoi la plupart des services de partage sociaux proposent encore et toujours des codes non valides W3C. Que ce soit FaceBook, Tweeter, Buzz et j’en passe, le code généré par défaut se fiche ouvertement du respect des standards! Bien sûr, certaines plateformes (pas toutes) proposent également des alternatives fonctionnant via des iframes, c’est déjà mieux que rien, mais ce n’est évidemment pas idéal.

Voici donc un petit tutorial pour apprendre à rendre vos boutons Twitter, FaceBook and co. valides W3C.

Prenons l’exemple de Twitter, vous pouvez créer un bouton via cette page. Si vous ne touchez à rien le code produit est le suivant :

<a href="http://twitter.com/share" data-count="vertical">Tweet</a>

Par défaut donc, Twitter vous ajoute un attribut « data-count= » complètement invalide W3C. Le problème, c’est que cette simple erreur suffit à ruiner la validation de votre site…
Heureusement, une parade existe, et la bonne nouvelle, c’est qu’elle fonctionne plus ou moins partout!

L’idée est de définir votre bouton par un ID, et de passer les attributs invalides via javascript, de cette façon :

<a href="http://twitter.com/share" class="twitter-share-button" id="TwitterShareButton">Tweet</a>
<script type="text/javascript">
var ValidMe=document.getElementById("TwitterShareButton");
ValidMe.setAttribute("data-count","vertical");
</script>

Petites explications :

  • Le bouton est définit par un identifiant, l’ID (bien sûr, pensez à définir un ID différent par bouton si vous en avez plusieurs), dans notre cas « TwitterShareButton »
  • On déclare une variable javascript « ValidMe » afin de pouvoir manipuler notre l’ID (via getElementById())
  • On ajoute ensuite notre attribut accompagné de sa valeur (setAttribute(« VotreAttribut », »ValeurAttribut »)

L’avantage, c’est que vous pouvez par la même occasion ajouter une multitude d’attributs annexes (type « data-via », etc.) selon vos besoins.
Le résultat est identique au code original, sauf que cette fois, c’est valide!


Articles sur ce thème :