[TUTO] Rendre le bouton J'aime Facebook valide W3C

[JordanBelfort]

Bonjour à tous,

 

C'est terrible que facebook génère des boutons J'aime qui ne sont pas valides W3C, alors que c'est important pour le référencement d'un site qu'il soit valide W3C. Pour cela je viens de publier une solution afin que vous puissiez rendre le bouton J'aime de Facebook valide W3C sur vos boutiques.

J'ai trouvé ça utile de vous le partager car toutes les boutiques que j'ai pu voir avec un bouton Facebook ne sont pas valides W3C.

 

 

Ça peut paraitre fou que Facebook ne soit pas capable de générer un bouton J'aime valide W3C sans utiliser l'iframe, pourtant c'est important pour le référencement que votre site soit valide W3C. Je vais donc vous expliquer comment procéder afin de valider votre <strong>bouton J'aime de Facebook valide W3C</strong>.

 

Vous devez d'abord placer un fichier javascript dans un répertoire de votre FTP, appelez le par exemple fbvalidXHTML.js dont le code est le suivant :

 

"use strict";var getElementsByClassName=document.getElementsByClassName?function(className,scope){return Array.prototype.slice.call((scope||document).getElementsByClassName(className));}:document.evaluate?function(className,scope){scope=scope||document;var re=[],xpathResult,ele,scopeDocument=!scope.ownerDocument?scope:scope.ownerDocument,searchClassNames=getElementsByClassName.quirksCheck(className.trim(),scope).split(" "),searchClassName=searchClassNames[0],searchClassNameLength=searchClassNames.length;if(scopeDocument.compatMode==="BackCompat"){xpathResult=scopeDocument.evaluate(".//*[contains(concat(' ', translate(@class, 'ABCDEFGHIJKLMNOPQRSTUVWYXZ', 'abcdefghijklmnopqrstuvwyxz'), ' '), ' "+searchClassName+" ')]",scope,null,0,null);}else{xpathResult=scopeDocument.evaluate(".//*[contains(concat(' ', @class, ' '), ' "+searchClassName+" ')]",scope,null,0,null);} if(searchClassNameLength>1){var eleClassNames,classNameLength,i;while((ele=xpathResult.iterateNext())){classNameLength=1;eleClassNames=getElementsByClassName.quirksCheck(ele.className,scope).split(" ");check:for(i=1;searchClassName=searchClassNames;i++){if(eleClassNames.indexOf(searchClassName)>-1){classNameLength++;if(classNameLength===searchClassNameLength){re.push(ele);break check;[spam-filter][spam-filter]}else{while((ele=xpathResult.iterateNext())){re.push(ele);[spam-filter] return re;}:function(className,scope){scope=scope||document;var re=[],ele,eleClassNames,i=0,elements=scope.getElementsByTagName("*"),searchClassNames=getElementsByClassName.quirksCheck(className.trim(),scope).split(" "),searchClassName=searchClassNames[0],searchClassNameLength=searchClassNames.length;if(searchClassNameLength>1){var classNameLength,j;for(;ele=elements;i++){eleClassNames=getElementsByClassName.quirksCheck(ele.className,scope).split(" ");classNameLength=0;check:for(j=0;searchClassName=searchClassNames[j];j++){if(eleClassNames.indexOf(searchClassName)>-1){classNameLength++;if(classNameLength===searchClassNameLength){re.push(ele);break check;[spam-filter][spam-filter]}else{for(;ele=elements;i++){eleClassNames=getElementsByClassName.quirksCheck(ele.className,scope).split(" ");if(eleClassNames.indexOf(searchClassName)>-1){re.push(ele);[spam-filter]} return re;};getElementsByClassName.quirksCheck=function(className,scope){return(!scope.ownerDocument?scope:scope.ownerDocument).compatMode==="BackCompat"?className.toLowerCase():className;};if(typeof Array.prototype.indexOf==="undefined"){Array.prototype.indexOf=function(val){for(var i=0,len=this.length,ele;i

 

var fbVObject = getElementsByClassName("fbreplace");

for(i = 0; i < fbVObject.length; i++) {

var fbRObject = fbVObject.innerHTML;

var fbRObject = fbRObject.replace(/<!-- FBML /g, ""); var fbRObject = fbRObject.replace(/ FBML -->/g, "");

fbVObject.innerHTML = fbRObject;

}

 

window.fbAsyncInit = function() {

FB.init({appId: 'ATTENTION DE BIEN METTRE VOTRE IDENTIFIANT FACEBOOK ICI', status: true, cookie: true,

xfbml: true});

};

(function() {

var e = document.createElement('script'); e.async = true;

e.src = document.location.protocol +

'//connect.facebook.net/fr_FR/all.js';

document.getElementById('fb-root').appendChild(e);

}());

 

Où vous devez remplacer "ATTENTION DE BIEN METTRE VOTRE IDENTIFIANT FACEBOOK ICI" par l'identifiant de votre application Facebook, si vous ne savez pas où le trouver, "Google is your friend"

 

Ensuite <strong>juste avant</strong> votre balise </body>, vous mettrez le code suivant :

<script src="LE BON CHEMIN OU SE TROUVE LE FICHIER/fbvalidXHTML.js" type="text/javascript" ></script>

En remplaçant avec le bon chemin de votre répertoire évidemment !

 

Et <strong>enfin</strong> à l'endroit où vous voulez rajouter votre bouton j'aime valide W3C placer le code suivant :

 

<!-- START bouton Fesse Bouc "j'aime" valid Xhtml -->
<div id="fb-root">
<span class="fbreplace">
<!-- FBML <fb:like></fb:like> FBML -->
</span>
</div>
<!-- END bouton Fesse Bouc "j'aime" valid Xhtml -->

 

Et voilà essayez de valider votre bouton par le validateur W3C et surtout de vérifier qu'il fonctionne correctement.

[patrmich]

Bonjour,

 

Merci pour votre topic très intéressant.

 

J'utilise Prestashop 1.4.7.0

 

1- Est-il possible d'ajouter le bouton le bouton Facebook j'aime, sans avoir de page ou d'identifiant Facebook ?

 

2- Comment ajouter le code (<script src="LE BON CHEMIN OU SE TROUVE LE FICHIER/fbvalidXHTML.js" type="text/javascript" ></script>) avant la balise body, c'est à dire dans le head des pages product ?

 

3- Pour ajouter le bouton à l'endroit souhaité, je suppose qu'il faut modifier le fichier product.tpl.

 

4- Le script que vous proposez se charge-t-il en mode asynchrone ?

 

Merci par avance pour toute réponse.

 

Cordialement,

 

Patrick