Quantcast
Channel: Navigation privée sur internet
Viewing all articles
Browse latest Browse all 6

Google +1 : chargement asynchrone + validation W3C

$
0
0

Pour les nombreux utilisateurs du moteur de recherche Google, l’arrivée du récent bouton +1 (plusone) dans les résultats de recherche n’est pas passé inaperçu.

Ce même bouton est en train de fleurir un peu partout sur les sites Web car en plus de conseiller et partager du contenu à son entourage, ce bouton a la vertue d’améliorer le classement du site Web en question dans les résultats de recherche Google.

Pour connaître les principaux boutons sociaux à mettre en place sur votre site, cet article vous sera utile.

Utilisation classique

  • Chargement du script de façon synchrone
<!-- Placez cette balise dans la section <head> ou juste avant la balise de fermeture </body> -->
&lt;script type="text/javascript" src="https://apis.google.com/js/plusone.js"&gt;
    {lang: 'fr'}
&lt;/script&gt;
  • Placement du bouton en utilisant une balise spécifique à Google
<!-- Placez cette balise à l'endroit où vous souhaitez que le bouton +1 s'affiche -->
&lt;g:plusone size="medium" href="http://magicsupremacy.com"&gt;&lt;/g:plusone&gt;

Utilisation améliorée

  • Chargement du script de façon asynchrone pour ne pas ralentir l’affichage des pages de vote site Web
&lt;script&gt;
  	(function() {
		var gp = document.createElement('script');
		gp.type = 'text/javascript';
		gp.async = true;
		gp.src = 'https://apis.google.com/js/plusone.js';
		gp.textContent = "{lang: 'fr'}";
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(gp, s);
	})();
&lt;/script&gt;
  • Placement du bouton en utilisant les balises standard HTML pour qu’il soit valide W3C (Doctype HTML5)
&lt;div class="g-plusone" id="gplusone"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
	var gplusone = document.getElementById("gplusone");
	gplusone.setAttribute("data-size", "medium");
	gplusone.setAttribute("data-count", "true");
	gplusone.setAttribute("data-href", "http://magicsupremacy.com");
&lt;/script&gt;
C’est sûr qu’au lieu de 2 lignes il nous en faut à présent 10 mais pour les puristes de la validation W3C et de la vitesse d’affichage des pages, ce n’est pas grand chose et très simple à mettre en place.

Viewing all articles
Browse latest Browse all 6

Latest Images





Latest Images