Blog

Les boutons J’aime et Tweeter valides XHTML sur WordPress

Aujourd’hui, partager ses contenus sur les réseaux sociaux tels que Facebook ou Twitter est devenu incontournable et pour cause, ces réseaux représentent une énorme source de trafic qu’aucun blogueur ne saurait et ne devrait négliger. Cependant, quand on est dans le milieu du Web, qu’on l’aime (oui, oui) et qu’on le voudrait chaque jour plus beau et plus propre (oui, oui, oui), on est un peu déçu de constater que les boutons « J’aime » et « Tweeter » fournis sur les sites officiels de ces réseaux ne sont pas en accord avec les recommandations du W3C et ne permettent pas une validation XHTML des pages de notre joli blog WordPress. :-(
C’est là qu’on se gratte un peu la tête, qu’on se rappelle que Google est notre ami et qu’on cherche une manière différente de les utiliser tout en gardant la validation du W3C. Et à force de creuser on finit toujours par trouver ! En effet, c’est ainsi un article sur le blog blog.miranda.or.at qui m’a apporté la solution et je vous retransmets donc toutes ces infos ici en français, en espérant qu’elles vous soient aussi utiles qu’à moi. ;-)

Il s’agit d’utiliser une fonction Javascript, la première chose à faire est donc de trouver votre fichier functions.php accessible via votre administration WordPress (menu Apparence, sous-menu Éditeur) et d’y insérer ce code :

/**
 * create JavaScript to inject asynchronous and XHTML compliant
 * facebook "like" and Twitter "tweet" buttons
 * @params:
 *  $l: article permalink to share
 *  $fb:    if true, generate facebook button
 *  $tw:    if true, generate tweet button
 */
function async_like_and_tweet($l, $fb = true, $tw = true)
{
    echo '<script type="text/javascript">
    //<![CDATA[
    ';
    if($fb)
        echo '(function() {
        var target = document.createElement(\'SCRIPT\');
        var anchor = document.getElementsByTagName(\'SCRIPT\')[0];

        document.write(\'<fb:like style="padding:0;margin:0;min-height:21px;" href="',$l,'" layout="button_count" show_faces="false" action="recommend" font="verdana"></fb:like>\');
        target.src= \'http://connect.facebook.net/fr_FR/all.js#xfbml=1\';
        target.type = \'text/javascript\';
        anchor.parentNode.insertBefore(target, anchor);
        })();';

    if($tw)
        echo '(function() {
        var target = document.createElement(\'SCRIPT\')
        var anchor = document.getElementsByTagName(\'SCRIPT\')[0];

        document.write(\'<a href="http://twitter.com/share" style="border:none;" class="twitter-share-button" data-count="horizontal" data-url="',$l,'" data-via="VOTREPSEUDOTWITTER" data-lang="fr">Tweet</a>\');
        target.src = \'http://platform.twitter.com/widgets.js\';
        target.type = "text/javascript";
        target.async = true;
        anchor.parentNode.insertBefore(target, anchor);
    })();
    ';

    echo '//]]>
       </script>';
}

Ensuite, cette fonction vous permettant d’afficher un des 2 boutons ou les 2 à la fois, selon votre choix, placez une de ces lignes de code à l’endroit où vous voulez que les boutons apparaissent (par exemple dans votre fichier single.php) :

// par défaut, si vous souhaitez afficher les deux boutons
<?php async_like_and_tweet(get_permalink($post->ID)); ?>

// si vous souhaitez uniquement voir le bouton Facebook
<?php async_like_and_tweet(get_permalink($post->ID), true, false); ?>

// si vous souhaitez uniquement voir le bouton Twitter
<?php async_like_and_tweet(get_permalink($post->ID), false); ?>

Il ne vous reste plus qu’à personnaliser ces boutons selon vos souhaits.
Si vous souhaitez lire « J’aime » et non pas « Recommander » dans le bouton Facebook, il vous suffit de remplacer « recommend » par « like » dans la balise fb:like. Vous pouvez également changer l’apparence du bouton (layout). Vous trouverez toutes les infos nécessaires sur la page officielle Facebook dédiée au bouton « Like ».
Quant au bouton Twitter, n’oubliez pas de modifier le code « VOTREPSEUDOTWITTER » avec votre propre pseudo Twitter. ;-) Et pour ce qui est de sa personnalisation, vous avez également tout ce qu’il vous faut sur la page officielle Twitter dédiée au bouton « Tweeter ».

Enfin, si le positionnement de ces deux boutons entre eux n’était pas parfait, sachez que vous pouvez ajouter ces quelques lignes dans votre feuille de style (style.css) :

.twitter-share-button {
    max-height:24px !important;
    min-height:24px !important;
    border:0 !important;
}

Et n’oubliez pas que les 24px indiqués correspondent à un type de bouton Facebook et qu’il faudra ajuster cette donnée selon les dimensions de celui que vous aurez choisi et que vous pourrez également ajouter une propriété margin. ;-)