Afficher mes tweets sur mon site avec JavaScript
Dans la première partie, on a vu comment afficher ses tweets sur son site ou son blog se fait avec un script PHP. Ce script, permettant d'afficher les tweets de tout compte sur Twitter permet de se construire un aggrégateur pour se tenir informé.
Mais il est possible de faire encore plus simple grâce aux outils que Twitter a décidé d'offrir aux blogueurs pour leur simplifier la tâche.
Mise à jour 2013: L'API a évolué et il faut un code d'authentification pour accéder au service. Le code ci-dessous ne fonctionne plus. On peut la remplacer avec une API externe comme Twitter Fetcher. Pour un certain temps tout au moins.
Comment cela fonctionne
Ajouter un conteneur dont l'ID soit reconnue par le code de Twitter:
<fieldset id="tweets"><legend>Tweets</legend>
<div id="twitter_update_list"></div>
</fieldset>
Le type de conteneur est juste un exemple, ce qui est important c'est l'ID: twitter_update_list qui est utilisé par la fonction twitterCallback2 du script blogger.js.
Ajouter deux lignes JavaScript à votre page Web, après le code du conteneur, de préférence en fin de page:
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/scriptol.json?callback=twitterCallback2&count=8"> </script>
Remplacer "scriptol.json" par le nom de votre compte, avec l'extension json.
Modifier éventuellement le nombre de messages à afficher avec count=n où est le le nombre.
Ce code est conçu par Twitter pour ne pas spammer leur site et ne récupérer le contenu qu'à intervalles régulier et non pas avec chaque visite d'un internaute sur votre page!
Démonstration
Le code CSS
Le conteneur externe et la légende:
#tweets
{
border: 4px double green;
max-width:700px;
padding:16px;
} #tweets legend {
color:green;
}
La liste des tweets:
#twitter_update_list li
{
list-style-type:none;
color:black;
}
Dans cet exemple, on crée un cadre avec double bordure, et une liste sans puces.