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).
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".
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".
Le bouton permet de définir quelques options : une hauteur fixe ("height"), une largeur fixe ("width"), un univers graphique sombre ("dark") ou clair ("light"). Vous pouvez enfin imposer une langue par défaut à votre 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.
Copiez-y le code fourni par Twitter et donnez un titre à votre widget si vous le souhaitez.
Vous n'avez plus qu'à enregistrer et vous voilà avec un widget Twitter affichant vos derniers tweets dans la sidebar :
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 > Widgets lorsque vous vous trouvez sur le Tableau de Bord WordPress et choisissez le widget "Fil d'actualité 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.
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.
Bonjour Marlène,
Merci pour cet article très facile à suivre. J’utilise ce petit bout de code HTML depuis quelques années sur mon propre blog et je n’ai pas eu de souci jusqu’à présent. Depuis quelques jours pourtant, l’aperçu de mon fil Twitter n’apparaît plus (bien que je n’ai pas retouché au code). Est-ce que cela t’est déjà arrivé ?
Bonjour, je n’affiche plus le flux Twitter mais non, ça ne m’est jamais arrivé quand je l’utilisais. Ca vaut peut-être le coup de reprendre la procédure via le site de Twitter au cas où ils auraient modifié quelque chose dans le code qui cause le problème. Sinon, il faut peut-être chercher une modification apportée à ton propre site qui pourrait causer une incompatibilité (plugin de cache, etc).
Merci beaucoup Marlène pour ces précieux conseils
Merci pour le commentaire Pierre !
Super ! Merci beaucoup cet article m’aura bien aidé !
Merci pour le message Alexandre !
Merci pour cet article très bien construit comme d’habitude !
Merci Laurent !
Merci pour cet article. J’apprends toujours pleins de choses utiles en lisant vos articles.
Tant mieux alors ;)
Merci pour cet article sur le widget Twitter qui peux être très utile !
Ça peut servir indeed ;)