Intégrer un Twitter-counter sexy à votre blog

Je ne sais pas pour vous, mais moi, je ne suis pas fan des « chicklets »  que l’ont place sur son blog pour afficher votre nombre d’abonnés Feedburner ou Twitter. C’est tout carré  et ça s’intègre mal.

Aujourd’hui, je vous propose de customiser à votre façon votre affichage du nombre de twitter-followers (personnes qui vous suivent sur Twitter). Pour cela, on va récupérer ce chiffre avec Json.

Pour ceux qui ne connaissent pas, Json est un format d’échange de donnée comme le XML et le CSV mais avec un énorme avantage, les données sont déjà formatées en tableau exploitable par javascript.

Pour JavaScript, c’est une révolution puisqu’elle est permet de ne pas passer par un proxy sur le serveur pour communiquer avec un site distant, contrairement à Ajax, ensuite, la récupération des données est super simple.

Voici le code à intégrer dans le Template de votre blog.

<script type="text/javascript">
function twitterCounter(twitters) {
var usercount = twitters[0].user.followers_count
document.getElementById('twitter_counter').innerHTML = usercount;
}
</script>
<span id="twitter_counter"></span>
<script type="text/javascript"
src="http://twitter.com/statuses/user_timeline/Bleebot.json?callback=twitterCounter&amp;count=1">
</script>

Il faut évidement remplacer le « Bleebot » par votre identifiant Twitter.

Ce code va afficher  votre nombre de followers que vous pourrez customiser en CSS par exemple comme ceci.

#twitter_counter {
font-size: 22px;
color: #08ADEF;
}

Bien sur vous pouvez intégrer votre Twitter counter dans un lien ou dans une phrase comme vous pouvez le voir dans sur ma sidebar.

Vous avez l’astuce, il ne vous reste plus qu’à être créatif.

la diffusion d’annonces sur ce site relève de ma responsabilité et ne représente pas les positions d'une entreprise pour laquelle je travaille

Rédigé par Christophe Lefevre