Quantcast
Channel: LudiBlog - Le blog de LudiKreation - Conception web et référencement » Callback
Viewing all articles
Browse latest Browse all 3

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

$
0
0
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":"<a href=\"http://twitterfeed.com\" rel=\"nofollow\">twitterfeed</a>",
    "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 http://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 &#8211; 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…


Viewing all articles
Browse latest Browse all 3

Latest Images

Trending Articles





Latest Images