Depuis hier, c’est l’effervescence autour du réseaux social de Google le fameux +1 et son nouveau bouton de partage. Et oui, encore un bouton que l’on pourrait rechigner à installer s’il ne s’agissait pas de Google qui trust quand même l’essentiel de notre trafic.
Mais une fois de plus, le bouton plus un, comme le bouton Twitter ou Facebook n’est pas valide XHTML. C’est quand même incroyable que les géants du web ne prennent jamais en compte la validation.
Voici une petite astuce que j’ai développé pour rendre votre code valide de façon strict grâce a du Javascript et la fonction getElementById.
Par défaut voici le code proposé par Google :
<!– Placez cette balise dans la section <head> ou juste avant la balise de fermeture </body> –>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'fr'}
</script>
<!– Placez cette balise à l’endroit où vous souhaitez que le bouton +1 s’affiche –>
<g:plusone></g:plusone>
Qu’il faut remplacer par ceci :
Dans la partie HEAD de la page on ne change rien à ce que propose Google. Pour WordPress il suffit generalement de l’inclure dans le fichier header.php
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'fr'}
</script>
Là ou vous voulez inclure votre bouton + 1 il suffit de rajouter ce code :
<div class="g-plusone" id="plusonevalide-<?php the_ID(); ?>"></div>
<script type="text/javascript">
var Validplusun=document.getElementById("plusonevalide-<?php the_ID(); ?>");
Validplusun.setAttribute("data-href","<?php the_permalink()?>");
</script>
Explications :
<div class="g-plusone"></div>
remplace
<g:plusone></g:plusone>
Pour être valide, vous pouvez inclure dans votre page single.php.
Par contre dans votre page index.php il vous faudra passer des paramètres supplémentaires (le data-href) pour pouvoir récupérer l’url de votre article et non pas de la page.
Vous pouvez changer l’ID plusonevalide par ce que vous voulez, par contre il faut que l’ID soit unique donc je lui rajoute l’ID de mon article (plusonevalide-<?php the_ID(); ?>), si vous avez un blog autre que WordPress, il suffit de rajouter la fonction qui affichera un identifiant unique.
Voilà, c’est tout simple et cela fonctionne aussi pour le bouton Twitter par exemple. Si vous voulez un bouton Facebook valide, c’est pas ici.
Si cela ne fonctionne pas vous pouvez placer le code dans le footer, comme moi par exemple car il y a une incompatibilité avec le code du bouton Facebook.
Par contre le bouton Google +1 n’est pas visible depuis un Iphone, avec ce code ou avec le code classique.
Merci pour l’astuce. Mais pour moi, la question que je me pose en ce moment concerne plus le temps de chargement de la page avec tous ces boutons… :/
L-tz > C’est clair que cela a un impact négatif. D’un côté Google préconise des pages de chargement plus rapides pour le référencement et d’un autre côté son bouton Plus 1 est plutôt lent. Mais comme c’est Google, tout le monde préfère tester son bouton au cas où cela changerait quelque chose au référencement….
Bref, je suis comme tout le monde, je fais des tests mais je crois que je vais finir par tout virer.
Depuis l’implantation du bouton j’aime de Facebook je n’ai pas plus de traffic.
Ca commence à être moche, on perd en lisibilité et en commentaires et ça ralenti beaucoup les pages.
Wait encore un peu and see.
Comprends pas ? C’est « +1″ pour quoi, vers où ? C’est utilisé pour ou par quel compte ou appli ?
En fait c’est juste pour savoir, si je clique, où et sous quelle identité je suis « fiché » ou « tracé » !
Legweak > Avec ton compte Gmail. Quand quelqu’un fait une recherche parmi tes amis, ils voient que tu suggères ce lien. Et surtout avec le réseau social plus one : https://plus.google.com/.
C’est ne fait une nouvelle façon de rechercher, les liens que tes amis aiment vont être mis en valeur.
Super!
Mais je ne vois pas comment passer la taille du bouton que je veux en small (paramêtre size= »small » dans le code de la balise
On peut ?
Merci
Eric > Oui, tu rajoutes un paramètre dans ton code comme cela :
ValidPlusun.setAttribute(« size », »small »);
Hmm. pas réussi
Merci mais je ne vois pas comment.
ca, ca ma parait pas possible:
Validplusun.setAttribute(« data-href », »" « size », »small »);
et ca :
ValidPlusun.setAttribute(« size », »small »);
Validplusun.setAttribute(« data-href », »" );
ne marche pas plus.
Avec JQuery ca me paraitrit peut-être plus clair mais là..
J’ai transcris en jQ, mais sans plus de succès: que du GROS bouton
/* <![CDATA[ */
jQuery.noConflict();
jQuery(document).ready(function() {
var Validplusun = jQuery('#plusonevalide-');
jQuery(Validplusun).attr({
'data-href': '',
size: 'small'
});
});
/* ]]> */
Eric > Essaye ça plutôt :
ValidPlusun.setAttribute(« data-size », »small »);
il fallait mettre data-size, j’ai testé, ça fonctionne.
Merci
C’est effectivement ca.
je ne te savais pas si fort en langue étrangère ! amitié !
Eric > De rien
Dan > C’est un peu mon métier
cool !
Je vais regarder ça ^^ (sans aucune certitude de m’en sortir d’ailleurs 
)
Bonjour,
J’ai réussi à insérer le code Google Plus. Mon code est valide HTML 5, mais lorsque je clique sur le bouton, le texte partagé n’est pas formaté correctement, il ne comprend pas des espaces lorsque j’ai mis du texte en gras dans mes pages ou bien il prend le title ou le texte alternatif de mon image.
Est-ce que vous avez une idée d’où peut venir le problème ?.
D’avance merci pour votre aide.
Bonjour,
Savez vous pourquoi sur ma HP, lors d un loop sur mes articles je me retrouve avec {lang =’fr’} au lieu du logo??