jTwitter – Récupération des données Twitter via JQuery et Twitter API

jTwitter

jTwitter

Je vous présente un petit plugin JQuery découvert notamment via Twitter et une des sources que je suis de près. Comme je l’ai dit, c’est un petit plugin JQuery, ce dernier va vous permettre de récupérer facilement des informations issues du célèbre site Twitter. Ce plugin va chercher les informations grâce à l’API fournie par Twitter et au format json, puis les récupère afin que vous les traitiez.

Voici son utilisation

Bien entendu, je vous passe l’appel du script jTwitter et de jQuery que vous pouvez télécharger ici.

Créez vous un petit document pour tester le plugin, par exemple :

<body>

<div id="profile">

    <form action="index.php" method="post">
        
        <input name="url" type="text" class="url" />
        
    </form>
    
    <div id="avatar">
        
    </div>
    
    <div id="texte">
    	
    </div>
    
</div>

</body>

 

Dans le head, nous allons appeler les informations et les insérer aux éléments que nous venons de créer :

<script type="text/javascript">
<!--
$(document).ready(function(){

	// Requête de récup de données pour "LudiKreation"
	$.jTwitter('LudiKreation', 1, function(userdata){
	  //Callback functn with the user data as shown above
	  $('#profile input.url').val(userdata[0].user.url);
	  $('#profile #avatar').html('<img src="' + userdata[0].user.profile_image_url + '" alt="" />');
		$('#profile #texte').html(userdata[0].text);
	
	});
	
});
//-->
</script>

 

Donc voici le déroulement et les attributs à passer :
En premier, on indique l’identifiant Twitter de l’utilisateur concerné (ici LudiKreation). Ensuite, le nombre d’éléments en sortie (nombre de post) ici 1. Puis pour finir une fonction de callback appelée à l’issue du traitement (le principe du callback^^).

Que se passe-t-il au final ?
On a rempli l’input text avec l’url du site de l’user.
On a inséré dans la première div, l’avatar de l’user.
Puis on insère dans la dernière div, le dernier tweet de l’user.

A savoir que l’API fourni une multitude d’information. Par exemple, pour LudiKreation :

([{
"geo":null,
"source":"twitterfeed",
"in_reply_to_user_id":null,
"in_reply_to_status_id":null,
"truncated":false,
"created_at":"Fri Oct 30 15:14:34 +0000 2009",
"favorited":false,
"user":{
"time_zone":"Greenland",
"friends_count":50,
"profile_image_url":"http://a1.twimg.com/profile_images/479596516/lk_normal.png",
"description":"Pour un Web Ludique - Retrouvez aussi https://blog.ludikreation.com",
"following":null,
"profile_text_color":"140e0e",
"notifications":null,
"profile_background_image_url":"http://a3.twimg.com/profile_background_images/46649733/twitter_bg.png",
"favourites_count":0,
"screen_name":"LudiKreation",
"profile_link_color":"0099ff",
"statuses_count":21,
"profile_background_tile":false,
"url":"http://www.ludikreation.com",
"created_at":"Mon Oct 19 12:53:06 +0000 2009",
"profile_background_color":"067296",
"geo_enabled":false,
"profile_sidebar_fill_color":"ffffff",
"protected":false,
"verified":false,
"location":"Lyon",
"name":"Ludik Te@m",
"profile_sidebar_border_color":"067296",
"followers_count":18,
"id":83592336,
"utc_offset":-10800
},
"in_reply_to_screen_name":null,
"id":5289462852,
"text":"Tutoriel – Initiation aux templates en php http://bit.ly/px5NZ\n - L'actu ludiBlog"
}]);

Normalement, l’exemple du dessus devrait vous donner les indications nécessaires pour récupérer ces info. Mais si vous avez des questions n’hésitez pas à me les poser 😉

API Twitter : http://apiwiki.twitter.com
JQuery : http://jquery.com
jTwitter : http://plugins.jquery.com/project/jtwitter

Bon code…

Author: Franck Pertegas

Share This Post On

3 Comments

  1. Bonjour,

    Je souhaite pouvoir récupérer des données de compte Twitter, mais je n’arrive pas à faire fonctionner votre exemple avec JQuery et l’API Twitter.
    Pourtant, tel que vous l’expliquez, cela semble facile et rapide.
    Pouvez-vous m’indiquer clairement les différents fichiers nécessaires, leurs formats, et le résumé de leurs contenus… J’ai dû rater quelque chose.
    J’ai juste compris qu’il y avait du javascript et de l’html.
    Je suis allé voir l’appel des scripts, mais j’ai pas tout compris.
    Merci de m’éclairer, et bonne continuation.

    Post a Reply

Trackbacks/Pingbacks

  1. 50 Plugins jQuery pour vos sites web ! | LudiBlog - [...] vous en parle ici Un plugin JQuery qui va vous permettre de récupérer facilement des informations issues de [...]
  2. Liste de tous les plugins jQuery testés sur le blog | LudiBlog - [...] communautaires / Outils API / Jeux jQuery AutoSuggest Plugin pp3Diso jTwitter jQuery QRCode GMap gComplete [...]

Submit a Comment

Votre adresse e-mail ne sera pas publiée.