Twitter.js, récupérez et affichez vos derniers tweets

Voici une librairie JavaScript signée Remy Sharp qui permet l’importation automatique de ses derniers tweets sur son site ! Petite merveille de simplicité, ce script s’utilise comme un plugin jQuery : on appelle une fonction qui prend en paramètres plusieurs options à configurer pour récupérer le tweet, le nom de l’auteur, l’avatar, la date du tweet, etc…

Utilisation de la librairie JavaScript

On commence par inclure la librairie JavaScript de Remy Sharp.

<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"></script>

On appelle la fonction getTwitters de la manière suivante. « tweet » est le nom de la div dans laquelle va s’afficher le tweet. On indique plusieurs paramètres dont l’ « id » qui correspond à l’identifiant Twitter et « template » qui prend en charge des variables qui correspondent à toutes les informations du tweet (contenu, auteur, avatar, date, etc).

getTwitters('tweet', { 
    id: 'rem', 
    count: 5, 
    enableLinks: true, 
    ignoreReplies: true, 
    clearContents: true,
    template: '"%text%" <a href="http://twitter.com/%user_screen_name%/statuses/%id_str%/">%time%</a>'
});

Puis on crée une div « tweet ». A noter que vous pouvez mettre du contenu HTML dans cette div, par exemple un message ou une barre de chargement, qui s’affichera temporairement et disparaitra lorsque le script aura chargé les tweets (grâce à l’option « clearContents »).

<div id="tweet">
  <p>Please wait while my tweets load <img src="/images/indicator.gif" /></p>
  <p><a href="http://twitter.com/rem">If you can't wait - check out what I've been twittering</a></p>
</div>

Et voilà, c’est terminé. On a bien récupéré les 5 derniers tweets.

Les options

Voici les principales options.

  • id : votre identifiant Twitter.
  • count : nombre de tweets (par défaut à 1).
  • enableLinks : true ou false – analyse le tweet pour rendre les liens cliquables, y compris les @replies et les #hashtags (par défaut à true).
  • ignoreReplies : true ou false – ignore les réponses (tweets commençant par @).
  • clearContents : true ou false – si vous mettez du contenu dans la div « tweet », celui-ci sera supprimé (par défaut à true).
  • template : le modèle HTML d’affichage du tweet et les variables de récupération (voir ci-dessous)

Les variables

Voici les principales variables. Elles doivent être placées dans la variable « template » entourées du symbole %.

  • text : le tweet
  • idstr : l’id du tweet
  • time : la date du tweet
  • user_screen_name : l’auteur du tweet
  • user_profile_image_url : l’avatar de l’auteur

Toutes les options et variables du script sont à découvrir sur le site de Remy Sharp. Simple, rapide et efficace !

Requis : navigateur compatible CSS3
Démonstration : http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/
Licence : libre

Commentaires

  • Guillaume

    Merci pour ce tuto, je me demande comment mettre la « date » en français ?

    • Je ne vois pas d’autre solution que de traduire la date directement dans le script.

  • David

    Bonjour merci pour tout ca, j’aurai aimer savoir si on trouvais ce genre de script mais kui recupere les tweets de plusieurs #comptes d’amis pour les afficher sur un site web en dur ? merci d’avance

  • Bonsai Entretien

    Merci bien, je vais l’utiliser pour mon nouveau site : Bonsai Entretien

  • fabrice

    bonjour la version de l’api (1.0) twitter qu’utilise ce widget est obsolète par conséquent le widget ne fonctionne plus, pensez vous faire une mise à jour de ce widget ? d’avance merci !

    • Je doute que ce script soit mis à jour par son auteur. Il vaut mieux utiliser un script plus récent ou utiliser directement l’API Twitter.