Créer un widget Twitter personnalisé sans plugin

On m'a demandé plusieurs fois quel plugin WordPress j'utilisais pour générer la liste "Flux Twitter" dans le pied de page de mon site. En fait, je n'utilise aucun plugin, c'est un extrait de Javascript de Twitter qui affiche une liste de mes tweets récents que j'ai stylisé avec du CSS. Dans ce tutoriel, je vais vous montrer :

• Le code HTML et Javascript nécessaire pour récupérer les derniers tweets
• Un aperçu du balisage HTML et des sélecteurs CSS associés
• Deux exemples de widgets Twitter personnalisés que j'ai moi-même utilisés

Lisez la suite pour voir le reste du tutoriel...

Le HTML et le Javascript

Twitter fournissait autrefois ce code sur son site, mais pour une raison quelconque, il l'a supprimé au profit de ces widgets beaucoup moins flexibles. Vous aurez besoin de deux morceaux de code.

Tout d'abord, placez le code suivant là où vous souhaitez que la liste apparaisse :

<ul id="twitter_update_list"><li>Twitter feed loading</li></ul>

Remarque : Le <li>Flux Twitter en cours de chargement</li> ne fait pas partie du code original fourni par Twitter, mais il est requis pour que le HTML soit valide. Il peut également fournir un message utile pendant le chargement du flux, car cela peut prendre quelques secondes par une journée lente.

Deuxièmement, vous devrez placer les lignes de Javascript suivantes aussi près que possible de la balise </body>.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>

J'ai actuellement ce code juste au-dessus de mon code Google Analytics. Vous devriez garder ces lignes de Javascript aussi bas que possible sur la page, car si Twitter ne se charge pas, tout ce qui se trouve en dessous de ce code sera bloqué (ce qui n'est pas très grave s'il est déjà en bas).

Aperçu du balisage HTML et des sélecteurs CSS

Maintenant, vous ne pouvez pas voir le balisage HTML que le widget Twitter génère sans utiliser quelque chose comme la barre d'outils de développement Web. Heureusement pour vous, je l'ai fait pour vous. Voici un exemple de liste avec un seul tweet.

<ul id="twitter_update_list">
<li><span>RT @<a href="http://twitter.com/Screenr">Screenr</a>: Cool Screenr update: Now your screencasts publish twice as fast. <a href="http://screenr.com/aDp">http://screenr.com/aDp</a></span> <a style="font-size: 85%;" href="http://twitter.com/themelab/statuses/14229492866">46 minutes ago</a></li>
</ul>

• #twitter_update_list – Sélectionne la liste entière
• #twitter_update_list li – Sélectionne les éléments de liste individuels
• #twitter_update_list li span – Sélectionne la partie « tweet » de l’élément de liste, pas le lien « il y a X temps ».
• #twitter_update_list li span a – Sélectionne le lien dans la partie « tweet » de l’élément de liste.
• #twitter_update_list a[style="font-size: 85%;"] – Sélectionne le lien « il y a X temps », d’une manière un peu astucieuse (voir la note ci-dessous).

Note : Comme il y a un style en ligne dans le lien « il y a X temps » qui définit la taille de la police à 85 %, il est quelque peu difficile de le remplacer sans un code astucieux. Je l’ai déjà utilisé pour réinitialiser la taille de la police à celle du reste de la liste :

#twitter_update_list a[style="font-size: 85%;"] { font-size: 1em !important; }

Cela ne fonctionne probablement pas dans les premières versions d’IE à cause de la partie « !important ». Vous pouvez également utiliser display: block; pour déplacer ce lien à la ligne suivante.

Exemple en direct

Pour un exemple en direct, consultez le pied de page de Theme Lab. Ou si vous lisez ceci dans votre lecteur de flux ou un site de scraping non autorisé, consultez la capture d'écran ci-dessous.

Voici le code que j’utilise pour la liste :

#twitter_update_list {
	font-size: 13px;
	line-height: 21px;
	list-style: none;
	}
#twitter_update_list li {
	background: url('images/twitter-divider.gif') bottom left repeat-x;
	padding-bottom: 7px;
	margin-bottom: 9px;
	}
#twitter_update_list span, #twitter_update_list span a {
	color: #ababab;
	text-decoration: none;
	}
#twitter_update_list a {
	color: #6f7276;
	}

• La première ligne sélectionne la liste entière. Elle définit la taille de la police, la hauteur de ligne et s’assure qu’aucun point de puce n’apparaît.
• La deuxième ligne fait répéter une petite image de 2×1 sous chaque élément de liste comme une sorte de séparateur. Le rembourrage définit l’espace entre le tweet et le bord supérieur du séparateur. La marge définit l’espace entre le bord inférieur du séparateur et le tweet suivant.
• La troisième ligne définit la couleur du tweet, y compris les liens, et s’assure qu’aucune ligne n’apparaît sous les liens.
• La dernière ligne définit la couleur du lien « il y a X temps ».

Et voilà ! Si je devais changer une chose, je différencierais d’une manière ou d’une autre les liens dans le tweet, et j’ajouterais peut-être des effets de survol sur les liens également.

Ceci peut être utilisé sur n'importe quel site

Contrairement à tous les autres articles comment faire XYZ sans plugin, aucun code WordPress réel n'est utilisé dans ce tutoriel.

Comme cela n'utilise aucun code WordPress, il n'est pas classé dans la collection Tutoriels WordPress. Il peut être utilisé sur à peu près n'importe quel type de site, en supposant que vous puissiez modifier le code source HTML et CSS.

Si vous souhaitez l'utiliser dans WordPress, je vous suggère de modifier manuellement les fichiers de votre thème pour insérer les deux lignes de Javascript dans le pied de page de votre site, ou même de l'accrocher à votre hook wp_footer().

Quant au widget lui-même, vous pouvez soit coller le code dans un widget texte, soit le coder manuellement dans votre barre latérale (ou ailleurs).

Conclusion

J'espère que vous avez tous aimé le tutoriel, j'adorerais connaître vos réflexions dans les commentaires. Si vous avez des demandes de conseils rapides sur WordPress ou CSS, n'hésitez pas à me le faire savoir. Cela pourrait être présenté dans un futur article Tutorial Tuesday sur Theme Lab !