Le moins que je puisse dire en introduction c’est que pour pouvoir écrire ce post et vous présenter ce qu’il contient, mes pauvres neurones auront passé leur dimanche entier à suer ! J’espère que vous l’apprécierez donc à sa juste valeur ;).

Avant tout, quelques mots à propos de cette fameuse fonction « tweet this ».

Le principe est de placer à la fin de chaque post d’un blog, une image ou un texte donnant la possibilité au lecteur de poster un tweet avec un lien vers ce post. L’idée étant que tout cela se fasse en un clic.

L’avantage est évident : vous pouvez générer un trafic viral vers votre article donc vers votre blog. En effet, le tweet sera vu, certains suivront le lien et parmi ces derniers certains tweeteront à nouveau le post et ainsi de suite. La machine est en route…

C’est une façon très intéressante d’utiliser Twitter pour générer du trafic viral gratuit et qui peut de loin dépasser la seule portée d’un blog. Par exemple, cette fonction peut être utiliser sur un compte myspace, facebook ou tout simplement sur votre site web.

Alors vous êtes peut-être en train de vous dire « bah, c’est classique, c’est ce que propose sharethis.com pour ne citer que lui ». Oui, c’est vrai, sauf que je ne suis pas fan de ce genre de systèmes qui imposent l’ouverture d’une popup, leur logo, sans parler de la pub qui traine souvent. Le gros avantage étant quand même qu’ils proposent tous les réseaux sociaux.

Non, je voulais pouvoir ne mettre qu’une image ou un lien de mon choix à la fin de mes posts permettant à mes lecteurs de poster facilement sur Twitter (on est quand même sur guide-twitter.com, non ? J ) en un clic et sans pub, un lien vers le post en question. Le tout en maîtrisant le processus, sans pop-up, sans qu’on demande au lecteur son mot de passe… bref tout un programme…

Enfin, au départ, je pensais que je trouverais facilement mais non… pas moyen de mettre la main sur quelque chose de convenable pour Blogger (à moins que je ne sois une « chèvre » mais j’ai pris le temps de chercher croyez-moi).

Il existe un plugin pour les blogs sous WordPress mais pas moyen de trouver comment l’intégrer sous Blogger. C’est en mixant pas mal de sources que j’ai fini par réussir à trouver la solution. Non sans efforts, ce super dimanche en témoigne.

Mais je me rends compte que j’ai oublié une donnée essentielle : il faut impérativement raccourcir l’url du lien vers le post, AVANT de tweeter. Et oui, Twitter raccourcit automatiquement les url mais si le titre du post et l’url dépassent les 140 caractères (pas difficile) il n’est plus possible d’envoyer le tweet.

Sans cette contrainte importante, une solution simple est de placer dans le code HTML du blog l’instruction suivante :

<a expr:href='"http://twitter.com/home?status=Je viens de lire : " + data:post.title + " sur : " + data:post.url' title='Tweetez ce post'><img src='http://lienversvotreimage.png'/></a>

Les champs en gras étant ceux que vous pouvez modifier à votre convenance. Cela fonctionne à merveille mais dès que l’ensemble devient trop long : problème !

J’en arrive donc à comment faire pour intégrer cette fonction sur Blogger :

1) connectez-vous sur votre compte Blogger. Allez dans l’onglet « mise en page », cliquez sur « modifier le code HTML » et n’oubliez pas de cocher la case « développer des modèles de gadgets ».

2) Principe de précaution toujours sage : sauvegardez votre modèle en cliquant sur « Télécharger le modèle dans son intégralité ». Comme ça en cas de souci vous pouvez revenir à la case départ.

3) Maintenant l’étape pénible : trouver l’endroit du code où placer ce que je vais vous donner. Je vous propose de mettre l’image en premier dans le pied de chaque post. Pour cela il vous faut trouver la ligne :

<div class='post-footer'>

juste avant

<div class='post-footer-line post-footer-line-1'>

4) Juste après <div class='post-footer'> copiez alors cette portion de code :

<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=guidetwitter&amp;apiKey=R_5bb9654240f98c2b24f735fb8bd8fecf' type='text/javascript'/> <script charset='utf-8' src='http://twitter.plus-heureux.com/scripts/tweetez.js?v=1.01' type='text/javascript'/> <a expr:onclick='&quot;return TweetAndTrack.open(this, \&quot;&quot; + data:post.url + &quot;\&quot;);&quot;' href='#'> <span style='display:none;'>A lire : <data:post.title/> </span> <img src='http://twitter.plus-heureux.com/images/twittez.png'/></a>

5) Enregistrez le modèle et affichez votre blog.

Si tout s’est bien passé vous devriez voir la même image qu’en bas de ce post sur chacun des messages de votre blog.

Quelques explications :

Pour raccourcir les url, ce code utilise l’API de http://bit.ly/. C’est l’objet du premier <script>. Si vous ne souhaitez pas passer par mon compte, il vous suffit d’en créer un sur http://bit.ly/ et de remplacer guidetwitter par votre pseudo et R_5bb9654240f98c2b24f735fb8bd8fecf par votre clef bit.ly.

Si vous voulez modifier la construction du message c’est dans la dernière instruction que ça se passe :

<a expr:onclick='"return TweetAndTrack.open(this, \"" + data:post.url + "\");"' href='#'><span style='display:none;'>Intéressant : <data:post.title/> </span><img src='http://twitter.plus-heureux.com/images/twittez.png'/></a>

Ce qui est en gras peut être modifié ou supprimé. « Intéressant : » se place en tête de tweet et le lien correspond à l’image que vous souhaitez afficher.

Vous pouvez utiliser la petite image que j’ai réalisée moi-même mais s’il vous plaît, mettez là sur votre serveur pour ne pas utiliser ma bande passante. Vous pouvez aussi ajouter du texte ou supprimer l’image. Par exemple :

<a expr:onclick='"return TweetAndTrack.open(this, \"" + data:post.url + "\");"' href='#'><span style='display:none;'>Intéressant : <data:post.title/> </span>Votre texte !</a>

Voilà, j’espère que grâce à tout ça vous pourrez profiter de cette super fonctionnalité et possibilité que nous permet Twitter. Je vous ferai surement un tutoriel vidéo sur cette astuce importante très prochainement. En cas de soucis, n’hésitez pas à laisser un commentaire.

N’hésitez pas à tweeter ce post ;) !