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&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.
|
|
|
| Vous appréciez cet article? N'hésitez pas à le partager sur Twitter et Facebook |
|
Merci pour l’astuce, on espérons que ce genre d’articles continuent.
Cool!
et utilisé.
Merci Christophe.
::
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 ;)
Je publierai également une version PHP avec cache prochainement, histoire de ne pas alourdir le chargement du blog ;)
Plutôt malin!
Hey chouette cette astuce ! Par hasard tu n’aurais pas la même avec feedburner ? ;-)
@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…)
@chrislefevre
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 ;
}
@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/
Merci Christophe ;)
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
Merci @ Christophe et @ Weetabix
[...] Intégrer un Twitter-counter sexy à votre blog. [...]
Merci beaucoup pour l’astuce :) Marche t-elle sur wordpress 2.8 ?
@chrislefevre
Oui Farfadette, ça marche partout tant que la page est en HTML et que tu es sur un navigateur supportant le javascript (99,9%).
[...] Via Techtrends [...]