Le bouton Facebook j’aime pour WordPress, valide xhtml par le W3C

Je ne comprends pas pourquoi les éditeurs continuent à nous fournir des codes qui ne sont pas valident xhtml. Que ce soit Facebook, Youtube ou n’importe quel service web, les codes à copier sont toujours du grand n’importe quoi en termes de validation.

Pourtant avoir un site compatible W3C est important pour un tas de raisons, ne serait-ce que pour le référencement.

Donc ici je dois souvent les remanier pour les rendre valides. C’est au tour du fameux bouton j’aime de Facebook.

J’ai trouvé un début de piste sur le site Allemand ka-mediendesign et j’ai amélioré le code pour le rendre compatible avec WordPress.
Mais cette technique peut s’appliquer à n’importe quel site dynamique.

D’abord téléchargez ce bout de code et placez sur votre site dans un répertoire.

Ensuite dans votre footer
Juste avant la balise de fermeture</html>

Insérez le code suivant :

<script type="text/javascript"
src="CHEMIN-DE-VOTRE-SCRIPT/fbObjectValidationV2.js"></script>
    <div id="fb-root"></div>
    <script type="text/javascript">
      window.fbAsyncInit = function() {
        FB.init({appId: 'VOTRE-ID-FACEBOOK', 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);
      }());
    </script>

Il faut juste personnaliser CHEMIN-DE-VOTRE-SCRIPT qui correspond au répertoire ou vous avez placé le script téléchargé précédemment.

VOTRE-ID-FACEBOOK correspond à votre id facebook que vous pouvez retrouver sur la page profile de votre compte.

Eventuellement vous pouvez modifier la langue : fr-FR pour la France, en_EN pour l’anglais et ainsi de suite.

Il ne vous reste plus qu’à placer le bouton Facebook où vous voulez sur votre site (généralement dans le fichier index.php et single.php, à côté de votre titre, ou à côté des liens pour rajouter des commentaires.

Le code pour le bouton :

<!-- FBML <fb:like layout="standard" show_faces="false"
colorscheme="light" href="<?php the_permalink() ?>"></fb:like> FBML -->

<?php the_permalink() ?> est un code WordPress pour désigner l’URL de votre page, si vous utilisez un autre moteur de blog ou un site statique pensez à modifier cette ligne.

 

Et voilà. Vous avez un bouton facebook j’aime qui est valide strict xhtml.

Vous avez un soucis en copiant les codes, vous pouvez les  télécharger au format texte.

Vous êtes ici : Le blog de Denis » Geekeries et gadgets » Le bouton Facebook j’aime pour WordPress, valide xhtml par le W3C

35 commentaires pour “Le bouton Facebook j’aime pour WordPress, valide xhtml par le W3C”

Je vais tester sur Dotclear et je reviens, ça pourrait toujours servir à d’autres ! Et puis je clique sur j’aime aussi !

Gravatar Louisianne

Merci ;-)

Gravatar L-tz

Je n’aime pas Facebook ;-)

Gravatar Maan

Louisianne > Sur dotclear, tu dois juste modifier ce bout de code : par celui de Doctclear, me rappelle plus mais Gilles saura le faire.

L-tz > De rien, j’ai préférer attendre le bon moment pour utiliser le bouton like.

Maan> C’est vrai que tu es le grand absent sur facebook, dommage.

Gravatar Denis

Intéressant! Merci! :)
Mais j’ai bien peur que ce soit un peu du chinois pour moi ^^

Gravatar petite parisienne

En effet j’avais déjà essayé avec le lien de Eric Ltz, mais il faut un code Dotclear !
Pas sur que Gilles sache, je verrais ça la semaine prochaine !

Gravatar Louisianne

Merci beaucoup pour ses explications ! :-)

Je me suis servi de tes bouts de code pour un site en XHTML transitional que je suis en train de faire et j’ai corrigé toutes mes fautes pour être parfaitement valide.

Donc du côté du script aucun souci.

Mais du côté de ça :

Forcément, ça ne valide pas… Même en suivant ton exemple :

<!– FBML FBML –>

Pourrais tu me dire ce que je fais mal ? :-)

Dernière petite chose : je viens d’y passer des heures, et il n’y a absolument rien à faire. Je n’arrive pas à faire en sorte que le pris en chargé par le bouton soit affiché correctement sur Facebook… Semblerait qu’il y ait un souci d’UTF8. C’est une piste, mais en tout cas c’est pénible et tous les accents spéciaux ne passent pas…

Si vous aviez une idée ?…

Merci beaucoup ! ^^

Gravatar Guillaume

PS : des parties de mon commentaire ne sont pas passés, désolé si ce n’est pas très clair…

Je voulais dire que la partie entre «  » semble ignorée comme elle est en commentaire…

Et bien sûr, le code commençant par fb:like n’est pas valide…

Enfin, pour mon problème d’accent, je voulais parler du « title » qui n’est pas pris correctement en charge (alors qu’il s’affiche correctement sur mon site, et que ma base de données est bien en UTF8…).

Gravatar Guillaume

Louisianne > Ce script est valide aussi pour Dotclear, il faut juste remplacer qui est une fonction wordpress par l’équivalent sous Dotclear.

Guillaume > Il faut laisser les commentaires <!– pour encadrer la balise FLB, curieusement si tout est ok, ton bouton apparaitra. Je te l'accorde, c'est curieux mais ça fonctionne.
Si le bouton ne s'affiche pas, c'est que tu t'es trompé quelque part.
Vérifie bien le chemin de tpn script fbObjectValidationV2.js, tu t'es peut être planté là.

Pour le chemin, je ne comprends pas trop ta question.

Gravatar Denis

Ben justement : si je le mets pas en commentaire, le bouton s’affiche (donc c’est qu’à priori il n’y a pas d’erreur sur le reste ?) et inversement si je mets les <!–, il ne s'affiche pas…

Et "pour le chemin", je ne vois pas à quelle partie de mon commentaire tu fais référence. Mon autre souci est un problème d'encodage ASCII / UTF8, je me demandais si quelqu'un d'autre avait déjà été confronté à ça.

Merci d'avoir pris le temps de me répondre !

Gravatar Guillaume

Guillaume > Si tu ne mets pas les < — –> ton bouton apparait mais il est invalide xhtml, Regardes le source de cette page, tu verras.
Quand à l’encodage, aucune idée.

Gravatar Denis

Je sais bien que ce n’est pas valide, d’ailleurs c’est exactement ce que je disais un peu plus haut à ce sujet : « Forcément, ça ne valide pas… » (mais comme certaines parties de mon commentaire n’ont pas été publiées, je veux bien comprendre que ce n’était pas clair).

Bref, ce que j’essaye juste d’expliquer c’est que lorsque je mets les sur mon site, le bouton n’apparaît juste pas du tout. Visiblement, c’est un souci isolé puisque personne d’autre ne semble y avoir été confronté.

Tant pis !

Gravatar Guillaume

Rhalala… il fallait lire « lorsque je mets les sur mon site »…

Gravatar Guillaume

Bon euh… c’est un poil tendu de poster des commentaires un minimum clair lorsque certaines parties sont ignorées… J’abandonne ! :D

Gravatar Guillaume

Guillaume > WordPress bloque les code php dans les commentaires, simple raison de sécurité.

Gravatar Denis

Gravatar llaumgui

Merci beaucoup pour cet article, qui m’a permis de rendre de nouveau valide mon site ;)

Gravatar Reaves

marche pas chez moi :( Tant pis, je reprend le vieux code pas valide !

Gravatar L-tz

L-tz> Curieux, la manip est pourtant simple pour toi. Tu devrais vérifier le chemin vers le fichier fbObjectValidationV2.js, c’est surement ça le problème.

Gravatar Denis

De mon côté je me suis contentée d’adopter un plugin WordPress pour le bouton Facebook. Ca fonctionne immédiatement, même si je ne sais pas si c’est valide W3C !

;-)

Gravatar Un Monde Ailleurs

Marie-Ange > Non, le plug in n’est pas valide, c’est pour cette raison que je dépose cette astuce.

Gravatar Denis

comment se fait-il que sur toute les pages ou se trouve le bouton like facebook, la barre jaune popup demande au utilisateur de télécharger « logins_status.php ». ??

Comme sur cette page d’ailleurs.

J’ai rechercher partout sur le net et je ne trouve pas la solution.

Merci d’avance

Gravatar joe

joe > Quel est ton navigateur et ton système d’exploitation ?

Gravatar Denis

internet explorer 7 sous windows XP

Gravatar joe

J’ai vu ça, je vais regarder, c’est curieux. Faut utiliser Firefox ou Chrome ;)

Gravatar Denis

Le code pour validation W3C :

// <![CDATA[
document.write(' <iframe votre code j'aime facebook ');
// ]]>

Gravatar Monsieur

Entre les balises script javascript :

Gravatar Monsieur

ah merci Denis, je me suis enfin mise le nez dedans et je m’arrache les cheveux à modifier tous les plugins. Au moins grâce à toi je vais gagner du temps !
Des bises

Gravatar Sophie Ménart

Au fait, j’aime bien ton thème par Denis ;-)

Gravatar Sophie Ménart

Je me disais : pas mal cet article, moi qui galère depuis un bout de temps avec FB Like. Mais après test j’ai 15 nouvelles erreurs en XHTML Strict. Je vais pas chercher plus loin, je garde Sociable qui est un très bon plugin de partage et qui ne se limite pas à facebook.

Gravatar Eloka

Eloka > Curieux chez moi toutes les pages sont valides. Vous avez dû rater une étape.

Gravatar Denis

Et bien en fait, des 15 je suis repassé à trois. Toutes mes excuses. Mais en placant le code « juste avant la balise de fermeture « , j’ai toujours trois erreurs. Tant pis, j’ai du rater un truc mais je ne vois pas quoi.

Gravatar Eloka

Bjr,
Mon éditeur de site est fastiste et je n’y arrive pas non plus… un tuyau ???
Merci à vous

Gravatar kani

Désolé les balises ne passent pas…
Rectification :

Ensuite dans votre footer
Juste avant la balise de fermeture body
Insérez le code suivant

Et non html… Ca marche et il n’y a plus d’erreurs !

Gravatar Tahitian-geek

Je vais tester ça, merci bien pour cette astuce :)

Gravatar Marco

Laisser un commentaire

Mon photos blog et mon univers visuel Mes photos

Flux Rss

Flux rss des articles

Réseaux sociaux