Tuto-FR : SPIP - Créer un include pour afficher son twitter en JSON
Voici quelques lignes de code pour faire apparaître les derniers messages d'un compte twitter et comment l'inclure dans SPIP.
Récupérer vos derniers tweets grâce à Jquery et Json
Il y a quelques temps j'ai mis en place un include de twitter sur mon site et je voulais mettre le code en ligne. Mais vient juste d'apparaître un plugin (voir aussi) pour SPIP qui le fait très bien.
Je vous propose cependant mon code.
Tout d'abord le Jquery qui vient chercher les informations sur le compte twitter (remplacer votrecompte par le nom de votre compte twitter - rpp=5 indique de prendre les 5 derniers messages et vous pouvez le changer). Vous remarquerez que la ligne tweets.append permet de recréer les liens sur le compte, sur les comptes cités ainsi que les liens.
<script type="text/javascript">
$(document).ready(function(){
var url="http://search.twitter.com/search.json?q=from%3Avotrecompte&rpp=5&callback=?";
var tweets=$('<ul id="tweets">').appendTo("#tweetscontainer");
$.getJSON(url,function(data){
$.each(data.results,function(i,item){
tweets.append('<li>'+item.text.replace(/(\w+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+)/gi, '<a href="$1">$1</a>').replace(/[\@]+([A-Za-z0-9-_]+)/gi, '<a href="http://twitter.com/$1">@$1</a>')+'</li>');
})
})
});
</script>
La partie html est assez simple mais il faut bien remettre les mêmes "ID" que dans le code Jquery (ici #tweetscontainer !).
Pour ma part, j'ai mis ce code dans un fichier html que je nomme par exemple inc-twitter.html et je le place où je veux grâce à un include : <INCLURE{fond=inc-twitter}>.<div id="tweetscontainer"><a href="http://twitter.com/votrecompte"><img src="logo/votrecompte.png" alt="sur twitter" width="73" height="73" /></a><h5>sur twitter</h5></div>
Publié le mardi, août 11 2009 par @matiasgrenn