Espéré, attendu, arrivé

Sur ce blog comme beaucoup d’autres vous avez sûrement remarqué le bouton pour Tweeter les articles, autrement dit pour les partager sur Twitter. Jusqu’à maintenant aucun de ces boutons n’étaient distribués par Twitter.

Ce dernier a livré aujourd’hui son script pour insérer les boutons et ainsi permettre aux lecteurs de Retweeter (Partager) facilement du contenu.

Fourni dans différents formats ce bouton pourra informer ou non du nombre de fois qu’un article a été Tweeter. A noter la possibilité de recommander, à la fin du tweet, la personne à suivre.

Une bonne nouvelle qui va faire plaisir à plus d’un.

Mais une question que vous vous posez sûrement, avant l’ajout d’une extension officielle WordPress : Comment l’insérer dans votre thème WordPress ?

Intégration dans WordPress

Récupération du code officiel sur Twitter

Il suffit de se rendre sur cette page et de faire les sélections qui vous conviennent pour définir les éléments visibles pour votre bouton :

• Type du bouton (Compteur vertical, Compteur Horizontal, Sans Compteur)
• Le texte du Tweet
• L’URL à retweeter, si ce n’est pas celle qui concerne le bouton en question
• Enfin, la langue du bouton

Et puis si cela ne vous convient pas Twitter a pensé à vous ! Vous pourrez ainsi vous lancer dans la création d’un bouton personnalisé, à l’aide de l’API de partage.

Dans mon cas voici le code que j’ai récupéré :

<br />
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="lryo17" data-lang="fr">Tweet</a><br />
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><br />

Ajout du code dans le design du blog

Maintenant la question que vous vous posez est : Comment mettre ce bouton dans votre thème ?

Plusieurs solutions s’offrent à vous :
Note : Je ne peux garantir que vous trouviez les mêmes lignes de code suivantes, mais elles devraient en être proches. De plus vous devrez adapter les valeurs data.

• Intégration dans la page de votre article : Éditer le fichier single.php et ajouter votre code comme ceci :

  <br />
  …<br />
  <div style="clear: both;"></div><br />
  <?php the_content(); ?><br />
  <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="lryo17" data-lang="fr">Tweet</a><br />
  <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><br />
  <div style="clear: both;"></div><br />
  …<br />

• Intégration dans la liste des articles de la page d’accueil : Éditer le fichier default.php et ajouter votre code comme ceci :

  <br />
  …<br />
   <?php the_content_limit(350, ‘Suite’); ?><br />
  <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="lryo17" data-lang="fr">Tweet</a><br />
  <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><br />
  <div style="clear: both;"></div><br />
  …<br />

En ce qui me concerne, j’ai ajouté le bouton Tweet seulement dans le détail de l’article; de plus j’utilise l’extension Yet Another Related Posts affichant les articles similaires : il était intéressant de placer le bouton avant la liste de ceux-ci. Pour cela j’ai édité le fichier yarpp-template-example.php et inséré le code suivant :

Note : J’en ai profité pour ajouter le bouton partage de Facebook de la même manière.

<br />
<div id="postsocialmedia"><br />
  <div style="width: 65px; float: left; padding-right: 10px"><br />
  <a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="lryo17" data-lang="fr"><br />
    <span>Partager sur Twitter<span><br />
  </a><br />
  <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><br />
  </div><br />
  <div style="height:20px;"><br />
  <a name="fb_share" type="button" href="http://www.facebook.com/sharer.php"><br />
    <span>Partager sur Facebook</span><br />
  </a><br />
  <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script><br />
  <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script><br />
  </div><br />
  <div class="clear"></div><br />
</div><br />
<h3>Articles similaires</h3><br />
…<br />

Et avec un peu de CSS voici ce que l’on obtient :

Pour ceux qui utilisent le bouton de TweetMeme, Twitter explique sur son blog que les deux firmes travaillent de façon rapprochée et qu’à terme le bouton de TweetMeme fusionnera avec le bouton officiel Tweet.

Enfin a noter que l’activation du bouton est déjà possible pour tous les blogs WordPress en ligne.

Source