Tripe de la journée, réaliser une infobulle récapitulant mes tweets lors du survole de la souris du logo Twitter en haut de mon site. Donc pour voir en action cette infobulle osez passer votre souris sur le logo Twitter en haut de cette page

Tout d’abord je me suis rendu sur le site ‘add-twitter-to-your-blog-step-by-step/‘, car cette personne a développé un script JS permettant de récupérer les tweets d’un utilisateur de twitter.

Pour commencer j’ai donc, comme indiquer par le tuto, placer cette ligne dans mon header pour appeler la dernière version du code JS ‘GetTwitters’.

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

Ensuite à l’endroit voulu (à peu près ^^) je place ma div dans laquelle je veux faire apparaître mes tweets. Donc moi je voulais :

//C'est cette balise li que je vais survoler et qui va me faire apparaître la bulle

<ul>
	<li><a title="Me suivre sur twitter" href="http://twitter.com/aZeratOriginal"><img src="./img/twitter.gif" alt="" /></a></li>
</ul>

//Je créais une div qui affichera les dernières tweets

<div id="tweet">Veuillez patienter le temps que les 5 derniers tweets se chargent <img src="./img/indicator.gif" alt="" /> Si vous ne pouvez attendre allez directement me suivre sur <a href="http://twitter.com/azeratOriginal">ma page Twitter</a></div>

Bon après ça, il faut s’occuper du style de la div tweet

#tweet{
visibility: hidden;
background: #2b2c2e url(images/twitter-fond.png) no-repeat right;
border-radius: 15px 15px 15px 15px;
color: #FFFFFF;
height: 115px;
width:325px;
padding: 15px;
overflow : auto;
}
#tweet li{
padding-bottom:10px;
}
#tweet li a{
color: #0192D0;
}

Après juste après la div tweet on place ce code JavaScript :

//Gestion de l'affichage de mon infobulle
$("li.twitter").mouseover(function() {
$("#tweet").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});
});
$("#tweet").mouseleave(function() {
$("#tweet").css({visibility : "hidden"});
});

//La fonction getTwitters
getTwitters('tweet', {
id: 'aZeratOriginal',
count: 5,
enableLinks: true,
ignoreReplies: true,
clearContents: true,
template: '<img src="%user_profile_image_url%" width="12" height="12"/> "%text%" <a href="http://twitter.com/%user_screen_name%/statuses/%id_str%/">%time%</a>'
});