Il y a quelques temps j’avais déjà fait un petit tuto qui expliquait comment mettre en place un widget Twitter sur votre site, mais le code ne fonctionnait plus.

Alors, j’ai réalisé une V2 de ce widget qui fonctionne à nouveau très bien, avec un design plutôt simple et minimaliste.

Comment ça fonctionne ?

Il faut copier/coller le code présent dans “index.html” sur votre propre site. Il y a une partie à mettre dans votre “head” “/head”, c’est la partie JavaScript :

<script 
 src="twitter.min.js" type="text/javascript">
	</script>
<script type="text/javascript" charset="utf-8">
getTwitters('tweet', { 
  id: 'johnsgraphisme', 
  count: 3, 
  enableLinks: true, 
  ignoreReplies: true, 
  clearContents: true,
  template: '%text% <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'
});
</script>

Et une partie contenant les “div” à mettre dans votre “body” “/body”, à l’endroit où vous voulez voir apparaître le widget :

<div id="container">
        <ul id="twitter_update_list">  <div id="tweet"></div></ul>
        <div id="bottom">
            <a href="http://www.twitter.com/johnsgraphisme">
                <img src="images/follow.png" alt="follow me" class="follow-me" />
            </a>
        </div>
    </div>

Je dois modifier quoi dans les fichiers ?

Dans la partie Javascript il faut modifier une chose, c’est “id: ‘johnsgraphisme'” qui correspond à votre ID de compte Twitter. Ensuite les autres choses sont des options, le nombre de tweets, le fait de faire apparaître les RT, etc…

Ensuite dans la partie HTML, là où il y a les “div”, il est nécessaire de modifier “a href=”http://www.twitter.com/johnsgraphisme”” qui correspond une fois de plus à votre compte Twitter.

Ensuite si vous le souhaitez, allez faire un tour dans “twitterlib.js“qui permet de gérer le temps, les “1 heure déjà”.

La démo des widgets :

Démo du widget de 150px : 150px.html
Démo du widget de 250px : 250px.html

Vous pouvez bien sûr adapter le widget aux dimensions que vous souhaitez, aux dimensions de votre sidebar, de votre footer, etc…

Télécharger les fichiers :

J’ai réuni tous les fichiers dans un ZIP afin de vous faciliter la chose, il suffit de les télécharger et de bien les mettre en place sur votre serveur. Si vous faites un article sur ces widget, n’oubliez pas de citer la source non plus.

Widget-Twitter-V2.zip