jTwitter – Récupération des données Twitter via JQuery et Twitter API
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 :
[pastacode lang= »markup » manual= »%3Cbody%3E%0A%0A%3Cdiv%20id%3D%22profile%22%3E%0A%0A%20%20%20%20%3Cform%20action%3D%22index.php%22%20method%3D%22post%22%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3Cinput%20name%3D%22url%22%20type%3D%22text%22%20class%3D%22url%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%3C%2Fform%3E%0A%20%20%20%20%0A%20%20%20%20%3Cdiv%20id%3D%22avatar%22%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%0A%20%20%20%20%3Cdiv%20id%3D%22texte%22%3E%0A%20%20%20%20%09%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%0A%3C%2Fdiv%3E%0A%0A%3C%2Fbody%3E » message= » » highlight= » » provider= »manual »/]
Dans le head, nous allons appeler les informations et les insérer aux éléments que nous venons de créer :
[pastacode lang= »javascript » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%3C!–%0A%24(document).ready(function()%7B%0A%0A%09%2F%2F%20Requ%C3%AAte%20de%20r%C3%A9cup%20de%20donn%C3%A9es%20pour%20%22LudiKreation%22%0A%09%24.jTwitter(‘LudiKreation’%2C%201%2C%20function(userdata)%7B%0A%09%20%20%2F%2FCallback%20functn%20with%20the%20user%20data%20as%20shown%20above%0A%09%20%20%24(‘%23profile%20input.url’).val(userdata%5B0%5D.user.url)%3B%0A%09%20%20%24(‘%23profile%20%23avatar’).html(‘%3Cimg%20src%3D%22’%20%2B%20userdata%5B0%5D.user.profile_image_url%20%2B%20’%22%20alt%3D%22%22%20%2F%3E’)%3B%0A%09%09%24(‘%23profile%20%23texte’).html(userdata%5B0%5D.text)%3B%0A%09%0A%09%7D)%3B%0A%09%0A%7D)%3B%0A%2F%2F–%3E%0A%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]
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 :
[pastacode lang= »javascript » manual= »(%5B%7B%0A%22geo%22%3Anull%2C%0A%22source%22%3A%22twitterfeed%22%2C%0A%22in_reply_to_user_id%22%3Anull%2C%0A%22in_reply_to_status_id%22%3Anull%2C%0A%22truncated%22%3Afalse%2C%0A%22created_at%22%3A%22Fri%20Oct%2030%2015%3A14%3A34%20%2B0000%202009%22%2C%0A%22favorited%22%3Afalse%2C%0A%22user%22%3A%7B%0A%22time_zone%22%3A%22Greenland%22%2C%0A%22friends_count%22%3A50%2C%0A%22profile_image_url%22%3A%22http%3A%2F%2Fa1.twimg.com%2Fprofile_images%2F479596516%2Flk_normal.png%22%2C%0A%22description%22%3A%22Pour%20un%20Web%20Ludique%20-%20Retrouvez%20aussi%20http%3A%2F%2Fblog.ludikreation.com%22%2C%0A%22following%22%3Anull%2C%0A%22profile_text_color%22%3A%22140e0e%22%2C%0A%22notifications%22%3Anull%2C%0A%22profile_background_image_url%22%3A%22http%3A%2F%2Fa3.twimg.com%2Fprofile_background_images%2F46649733%2Ftwitter_bg.png%22%2C%0A%22favourites_count%22%3A0%2C%0A%22screen_name%22%3A%22LudiKreation%22%2C%0A%22profile_link_color%22%3A%220099ff%22%2C%0A%22statuses_count%22%3A21%2C%0A%22profile_background_tile%22%3Afalse%2C%0A%22url%22%3A%22http%3A%2F%2Fwww.ludikreation.com%22%2C%0A%22created_at%22%3A%22Mon%20Oct%2019%2012%3A53%3A06%20%2B0000%202009%22%2C%0A%22profile_background_color%22%3A%22067296%22%2C%0A%22geo_enabled%22%3Afalse%2C%0A%22profile_sidebar_fill_color%22%3A%22ffffff%22%2C%0A%22protected%22%3Afalse%2C%0A%22verified%22%3Afalse%2C%0A%22location%22%3A%22Lyon%22%2C%0A%22name%22%3A%22Ludik%20Te%40m%22%2C%0A%22profile_sidebar_border_color%22%3A%22067296%22%2C%0A%22followers_count%22%3A18%2C%0A%22id%22%3A83592336%2C%0A%22utc_offset%22%3A-10800%0A%7D%2C%0A%22in_reply_to_screen_name%22%3Anull%2C%0A%22id%22%3A5289462852%2C%0A%22text%22%3A%22Tutoriel%20%E2%80%93%20Initiation%20aux%20templates%20en%20php%20http%3A%2F%2Fbit.ly%2Fpx5NZ%5Cn%20-%20L’actu%20ludiBlog%22%0A%7D%5D)%3B » message= » » highlight= » » provider= »manual »/]
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…
1 janvier 2011
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.
1 janvier 2011
Bonjour ZanZan,
Et bienvenue sur ce blog.
L’auteur du plugin nous donne un bon exemple de l’utilisation du plugin ici : http://custom-drupal.com/jquery-demo/jtwitter/
Je pense que ça devrait répondre à ta question 😉
2 mars 2016
Je vais aller explorer le site que vous présentez.