Comment afficher un flux Twitter dans un widget sur WordPress ?


On m’a récemment demandé comment afficher ses derniers tweets dans un widget sur WordPress. J’ai donc décidé d’écrire un rapide tutoriel car on peut tout à fait mettre un flux Twitter dans la sidebar de son blog sans avoir recours à un plugin.

Twitter fournit un service gratuit intitulé « Twitter for Websites » qui propose tout un panel d’outils à intégrer sur son site pour permettre à ses visiteurs de suivre un compte ou un sujet. Je vais vous montrer comment l’utiliser.

Si vous avez un blog WordPress.com (blog gratuit hébergé par WordPress), vous ne pourrez pas suivre ce tutoriel mais il existe une solution encore plus simple pour afficher vos tweets sur WordPress, je vous en parle en fin d’article !

Récupérer le flux de vos derniers tweets sur Twitter

La première étape se déroule sur le site Twitter Publish. Choisissez le type d’information que vous voulez afficher parmi les choix disponibles (un tweet unique, un flux basé sur un hashtag précis, une liste… ou ce qui nous intéresse ici : un profil).

Création d'une timeline Twitter intégrée
Création d’une timeline Twitter intégrée

Une fois que vous avez indiqué l’URL complète du profil concerné, vous pouvez choisir entre deux modes d’affichage :

  • Un mode « embedded timeline » pour afficher un flux des derniers tweets ;
  • Ou un mode « Twitter Buttons » pour inciter les utilisateurs à suivre ou mentionner un profil précis à l’aide d’un simple bouton.

Pour créer un flux Twitter dans un widget sur WordPress, nous allons opter pour « embedded timeline ».

Affichage du widget Twitter
Affichage du widget Twitter

Vous obtenez immédiatement un code prêt à l’emploi que nous pouvons directement intégrer sur un blog WordPress. Mais Twitter offre aussi la possibilité de le personnaliser, en cliquant sur « set customization options ».

Code du flux Twitter
Code du flux Twitter

Le bouton permet de définir quelques options : une hauteur fixe (« height »), une largeur fixe (« width »), un univers graphique sombre (« dark ») ou clair (« light »), la couleur des liens exprimées en notation hexadécimale (vous pouvez utiliser ce type d’outil pour trouver l’équivalent hexadécimal de votre couleur préférée). Vous pouvez enfin imposer une langue par défaut à votre widget Twitter.

Options du widget Twitter
Options du widget Twitter

Je vous conseille de laisser la largeur s’ajuster automatiquement, histoire que votre widget Twitter s’adapte à toutes les tailles d’écran. Cliquez ensuite sur le bouton « Update » pour enregistrer les paramètres et copiez le code fourni par Twitter.

Intégrer le code dans un widget Twitter sur WordPress

Dans l’administration de WordPress, accédez au menu Apparence > Widgets et ajoutez un nouveau widget de type « HTML Personnalisé » à l’endroit où vous voulez faire apparaître votre flux Twitter, par exemple dans la sidebar de votre blog.

Widget HTML personnalisé
Widget HTML personnalisé

Copiez-y le code fourni par Twitter et donnez un titre à votre widget si vous le souhaitez.

Copiez le code du widget Twitter
Copiez le code du widget Twitter

Vous n’avez plus qu’à enregistrer et vous voilà avec un widget Twitter affichant vos derniers tweets dans la sidebar :

Widget Twitter pour WordPress
Widget Twitter pour WordPress

La seule chose à savoir concernant ce type de widget, c’est qu’il implique de charger un fichier depuis le site de Twitter. C’est ce fichier (un script) qui permet au widget de fonctionner et de mettre à jour les derniers tweets.

Mais par définition, charger un fichier supplémentaire depuis un site tiers affecte – un peu – le temps de chargement d’une page. C’est un peu comme si on vous faisait porter un sac en plus en randonnée, vous marcherez un peu moins vite ;) Il est donc préférable de ne pas multiplier les widgets.

Installer un widget Twitter sur WordPress.com

Sur WordPress.com, on vous facilite l’installation d’un widget Twitter. Allez dans le menu Apparence > Widget lorsque vous vous trouvez sur le Tableau de Bord WordPress et choisissez le widget « Timeline Twitter ».

Widget Timeline Twitter
Widget Timeline Twitter

Ajoutez-le à l’endroit de votre choix. Vous disposez ensuite d’options de personnalisation : je vous conseille de laisser le champ « Largeur maximale » vide, WordPress ajustera automatiquement le widget à la largeur de la sidebar. Vous pouvez définir la hauteur de votre widget (en pixels), le nombre de tweets à afficher… Choisissez ensuite le type de widget « Profil » et indiquez votre nom d’utilisateur Twitter.

Le widget propose ensuite des cases à cocher pour retirer l’en-tête et le pied de page du widget si vous le souhaitez, ou encore pour cacher les bordures, la barre de défilement et rendre le fond transparent.

Aperçu du widget sur la version gratuite de WordPress
Aperçu du widget sur la version gratuite de WordPress

Enfin, vous pouvez choisir les couleurs des liens et de la bordure du widget. Les couleurs sont exprimées en notation hexadécimale, c’est une manière de « traduire » la couleur en code. Il existe des outils en ligne pour convertir très simplement la couleur de votre choix en hexadécimal.

Vous obtenez un widget Twitter exactement comme les blogueurs qui ont installé WordPress chez un hébergeur.


Poster un commentaire

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

4 commentaires sur “Comment afficher un flux Twitter dans un widget sur WordPress ?

Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.