Mettre en place un widget Twitter, comment ça se passe?

Twitter prenant de plus en plus d’importance dans les réseaux sociaux, il devient essentiel aujourd’hui de promouvoir votre blog avec cet outil. Et rien de tel qu’un petit widget vous permettant de mettre en valeurs vos derniers tweets pour attirer de nouveaux followers.

John’s Graphisme nous propose un excellent tutoriel pour réaliser ce fameux widget, et je vous invite à se rendre sur son blog pour y trouver les différents exemples et sources de ce widget !

3 Choses à modifier pour le faire fonctionner avec votre compte Twitter :

1 – Dans la partie Twitter, il faut modifier « pseudoTwitter » 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.

Le code :

[html]
<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/fuegin">
<img src="images/follow.png" alt="follow me" />
</a>
</div>

<!– TWITTER –>
<script src="twitter.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/pseudoTwitter.json?callback=twitterCallback&amp;count=2" type="text/javascript"></script>
<!– FIN TWITTER –>
</div>
<!– FIN CONTENU –>
</body>
[/html]

Le fichier style.css

[css]
body {margin:0px;font-family:georgia;line-height:22px;font-size:12px;}
h1 {text-align:center;}
#container {width:373px;margin:0 auto;}
a img {border:none;}

ul#twitter_update_list {width:250px;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:#e8f3f9;padding:7px 10px;color:#104663;}
ul#twitter_update_list .divisor {height:1px;background:#ccd6db;border-bottom:1px solid #ebf7fd;margin:0.75em 0.75em 0 0.75em;}
ul#twitter_update_list .data {color:#9b3204;}
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:#d04e00;text-decoration:none;}
ul#twitter_update_list a:hover, ul#twitter_update_list a:active {color:#fd6b00;text-decoration:underline;}
#bottom {width:250px;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 25px;
}

[/css]

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.

Source: John’s Graphisme

2 réflexions au sujet de « Mettre en place un widget Twitter, comment ça se passe? »

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *