Update je vous invite à lire cet article pour la V2 de ce Widget Twitter : RESSOURCE – UN WIDGET TWITTER AVEC VOS DERNIERS TWEETS

Vous êtes beaucoup à avoir un compte Twitter, ce qui est normal car de nos jours il est difficile de passer à côté de ce réseau social qui prend de l’ampleur tous les jours. Je vais vous expliquer comment mettre en place un widget avec vos derniers tweets. Vous pourrez le modifier comme vous voulez par la suite, car la source de mon fichier est en téléchargement à la fin de l’article. Dans la source de téléchargement, il y a deux exemples à télécharger, une version en 250px et une autre en 150px.

Le code

Le code qui suit est à mettre à l’endroit ou vous souhaitez voir apparaître le widget en question, et une autre partie de ce code est destinée à aller dans le “head”.
Que devez-vous modifier dans ce code ?
1 – Dans la partie Twitter, il faut modifier “monpseudotwitter” et mettre votre pseudo.
2 – ” &count=2 ” vous pouvez modifier le chiffre, qui correspond au nombre de tweets.
3 – Dans la “div bottom”, il faut également mettre votre pseudo Twitter.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Widget pour timeline twitter</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
 
<body>
    <!-- DEBUT CONTENU -->
    <div id="container">
 
        <ul id="twitter_update_list"></ul>
 
        <div id="bottom">
            <a href="http://www.twitter.com/johnsgraphisme">
                <img src="images/follow.png" alt="follow me" class="follow-me" />
            </a>
        </div>
 
        <!-- TWITTER -->
        <script src="twitter.js" type="text/javascript"></script>
        <script src="http://twitter.com/statuses/user_timeline/monpseudotwitter.json?callback=twitterCallback&amp;count=2" type="text/javascript"></script>
        <!-- FIN TWITTER -->
    </div>
    <!-- FIN CONTENU -->
</body>

Le CSS

Le CSS en dessous correspond à la version 150px.

body {margin:0px;font-family:georgia;line-height:18px;font-size:10px;}
#container {width:150px;margin:0 auto;}
a img {border:none;}
a { outline:none;}
 
ul#twitter_update_list {width:150px;background:url('images/haut.png') no-repeat top left;margin:0 auto;padding:139px 32px 0 0;}
ul#twitter_update_list li {list-style-type:none;background:#3399CC;padding:7px 10px;color:#104663;}
ul#twitter_update_list .divisor {height:1px;background:#35A3DB;border-bottom:1px solid #2B8CBD;margin:0.75em 0.75em 0 0.75em;}
ul#twitter_update_list .data {color:#ADD47A;}
ul#twitter_update_list .data:before {content:">>";}
ul#twitter_update_list .data:after {content:"";}
ul#twitter_update_list a:link, ul#twitter_update_list a:visited {color:#FFF;text-decoration:none;}
ul#twitter_update_list a:hover, ul#twitter_update_list a:active {color:#FFF;text-decoration:underline;}
#bottom {width:150px;height:44px;background:url('images/bas.png') no-repeat top left;margin:0 auto;padding:0px 32px 0 0;}
img.follow-me {
	margin:0 0 0px 0px;
}

Il faut enregistrer ce fichier sous “style.css” et mettre en place les différents fichiers (y compris le twitter.js présent dans la source) et images sur votre serveur. Le CSS n’est pas bien compliqué à comprendre, mais si vous avez la moindre questions, n’hésitez pas.

DEMO 150px: Widget-Twitter
DEMO 250px: Widget-Twitter
TELECHARGER LA SOURCE : Widget-twitter.zip