Techtrends

Intégrer un Twitter-counter sexy à votre blog

Publié le 10 juin 2009 par Christophe Lefevre

Astuces

twittercounterbitmapJe 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.



A lire également

Partager

Vous appréciez cet article?
N'hésitez pas à le partager sur Twitter et Facebook

16 réactions

  1. Merci pour l’astuce, on espérons que ce genre d’articles continuent.

  2. Cool!

    et utilisé.

    Merci Christophe.

    ::

  3. Sympa en effet :) Tu pourras nous en dire plus sur json à l’occasion et notamment sur les limitations que tu évoques avec Ajax et les proxy ? Merci ;)

  4. Je publierai également une version PHP avec cache prochainement, histoire de ne pas alourdir le chargement du blog ;)

  5. Plutôt malin!

  6. Hey chouette cette astuce ! Par hasard tu n’aurais pas la même avec feedburner ? ;-)

  7. @degseb: çà existe aussi pr feedburner, je ne l’ai pas sous la main mais tu devrais trouver ç facilement sur le web en cherchant ! ( enfin je pense…)

  8. Weetabix, degseb: Pour Feedburner, j’ai ça dans mes tiroirs

    < ?php
    $cache = md5('rssfluxfeedburner');
    $expire = time() -3600*24 ; // valable 4 heure
    if(file_exists($cache) && filemtime($cache) > $expire )
    {
    readfile($cache);
    }
    else
    {
    ob_start();
    function get_content($url)
    {
    $ch = curl_init();
    curl_setopt ($ch, CURLOPT_URL, $url);
    ob_start();
    curl_exec ($ch);
    curl_close ($ch);
    $string = ob_get_contents();
    ob_end_clean();
    return $string;
    }
    $subject = get_content ( »https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=bleebot »);
    $pattern = ‘/circulation= »([0-9]+) »/’;
    preg_match($pattern, $subject, $matches);
    $feed_count = $matches[1];
    echo $feed_count;
    $pagecache = ob_get_contents();
    ob_end_clean();
    file_put_contents($cache, $pagecache) ;
    echo $pagecache ;
    }

  9. @degseb et @christophe: plus rapide que moi christophe, normal tu es chez toi sur ce blog ! voilà pour ma part, le truc auquel je pensais, je mets le lien du site concerné en l’occurence l’excellent Geekeries.fr ( dont je ne suis pas le propriétaire !! ):
    http://www.geekeries.fr/articles/afficher-le-nombre-dabonnes-de-votre-flux-feedburner/

  10. Merci Christophe ;)

  11. eh eh merci, cela peut être plus fun effectivement ;)

    pour compléter, la méthode utilisée ici s’appelle du JSON-P, pour arriver à faire du cross-domain grâce à une fonction de callback : http://en.wikipedia.org/wiki/JSONP#JSONP

  12. Merci @ Christophe et @ Weetabix

  13. [...] Intégrer un Twitter-counter sexy à votre blog. [...]

  14. Merci beaucoup pour l’astuce :) Marche t-elle sur wordpress 2.8 ?

  15. Oui Farfadette, ça marche partout tant que la page est en HTML et que tu es sur un navigateur supportant le javascript (99,9%).

Delicious this Facebook this Tweet this Buzz this