Tutorial plugin JQuery : Tweetable pour afficher le flux d’un membre Twitter

tweetable

Le plugin JQuery Tweetable permet d’afficher le flux de tweets d’un membre de Twitter ultra-facilement ! En effet pour cela il suffit simplement de créer un <div> vide en lui donnant un id (ici l’id est égal à « tweetable ») :

1
<div id="tweetable"></div>

Il faut ensuite importer le framework JQuery ainsi que le plugin dans la page HTML souhaité :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tweetable.js"></script>

Et enfin, il faut initialiser le plugin en sélectionnant le div voulu et en passant en option le nom d’utilisateur :

1
2
3
4
5
6
7
$(document).ready( function () {
		$('#tweetable').tweetable({ // on applique le plugin tweetable le bloc ayant pour id "tweetable"
                           username: 'arnaudk', // le nom d'utilisateur du flux Twitter à afficher
                           time: true,  // pour afficher ou non la date des tweets (date en anglais)
                           limit: 20 // nombre de tweets à afficher
                });
});

En bonus on peut ajouter quelques styles au code généré par le plugin JQuery :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#tweetable li {
	font-size:13px;
	background:url(images/twitter.png) no-repeat left ;
	padding-left:20px;
	margin-left:10px;
	margin-top:8px;
	list-style-type:none;
	border-bottom:1px dotted #333;
}
 
#tweetable .hash { 
        color:#0066CC; 
} 
 
#tweetable .reply { 
        color:#0066CC; 
}

Comme d’hab, j’ai préparé une petite démo avec le flux de mon Twitter (arnaudk). A noter que le plugin a été fait par theodin et est dispo en téléchargement sur son blog !
voir la demo de tweetable

Ce contenu a été publié dans JQuery, avec comme mot(s)-clé(s) , , . Vous pouvez le mettre en favoris avec ce permalien.

4 reponses a Tutorial plugin JQuery : Tweetable pour afficher le flux d’un membre Twitter

  1. raf dit :

    aaaaah ça m’avait manqué twitter 🙂

  2. KubX dit :

    Super pratique mais en terme de contenu pour le référencement, ce n’est pas l’idéal puisqu’en affichant le code source, on se rend compte que la div est vide. Je me demande si Google sait interpréter jQuery ?

  3. arnaud dit :

    Je ne crois pas que Google sait interpréter le JQuery pour voir le contenu généré dynamiquement…

    Mais utiliser Twitter pour du référencement je ne crois pas que ce soit le mieux !

  4. Ping : » Tutorial plugin JQuery : Delectable pour afficher les derniers bookmarks Delicious // JQuery, PHP, html, design… // arnaud-k : un blog de geek

Laisser un commentaire

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