Après avoir dirigé WPBeginner pendant plus d’une décennie, nous avons appris que la construction d’une communauté forte est la clé d’un blog réussi. Nous devons notre succès à nos lecteurs fidèles, et nous sommes toujours à la recherche de nouvelles façons de nous connecter avec eux.
Un excellent moyen de créer une communauté est d’afficher vos tweets récents sur votre site WordPress. Cela permet de garder votre site frais et permet aux internautes de voir ce que vous faites sur les réseaux sociaux.
Nous avons essayé de nombreuses façons d’afficher les tweets sur les sites WordPress, et nous allons partager nos trois meilleures méthodes pour faire exactement cela. Toutes ces méthodes sont adaptées aux débutants, de sorte que vous serez en mesure d’ajouter facilement votre flux Twitter à votre site.
Pourquoi afficher les tweets récents sur votre site WordPress ?
X/Twitter est l’une des plateformes de réseaux sociaux les plus populaires sur le marché. L’affichage des tweets récents sur votre site WordPress peut améliorer votre présence en ligne et votre engagement de plusieurs façons.
Pour commencer, lorsque les utilisateurs/utilisatrices visitent votre site et voient votre flux de réseaux sociaux, ils peuvent être suffisamment intrigués pour cliquer sur votre compte Twitter et vous suivre, augmentant ainsi votre portée.
De plus, les tweets peuvent servir de mise à jour en temps réel de ce qui se passe sur votre site ou dans votre entreprise. Cela peut encourager l’engagement de votre public, car il peut interagir directement avec vos tweets.
Les tweets récents peuvent également servir de preuve sociale sur votre site WordPress. Vous pouvez retweeter des avis positifs ou des personnes recommandant vos produits, ce qui aide à établir la confiance avec les abonnés/abonnés ou les clients/clientes.
Dans cette optique, examinons les différentes méthodes d’affichage des tweets récents sur votre site WordPress. Vous pouvez utiliser les liens rapides ci-dessous pour passer à une méthode spécifique :
Méthode 1 : Contenu embarqué manuellement des tweets dans l’éditeur de blocs Gutenberg (Aucune extension).
La première méthode pour afficher vos tweets récents dans WordPress est d’embarquer manuellement votre profil Twitter ou votre chronologie sur votre page WordPress, votre publication ou votre widget (pour les utilisateurs/utilisatrices du thème classique).
Tout comme l’ajout d’une vidéo sur YouTube, WordPress permet d’embarquer facilement du contenu Twitter, comme un simple tweet ou une chronologie. Sa fonctionnalité oEmbed permet de transformer automatiquement l’URL d’un contenu en code d’intégration lorsqu’elle est collée dans l’éditeur/éditrices de blocs.
Tout d’abord, vous devez trouver et copier l’URL du profil Twitter ou du tweet que vous souhaitez embarquer.
Par exemple, l’URL du profil Twitter de WPBeginner est https://twitter.com/wpbeginner.
En revanche, l’URL d’un seul tweet ressemble à ceci : https://twitter.com/wpbeginner/status/1604852592827326464
Ensuite, il suffit de suivre l’une des méthodes ci-dessous :
Afficher les tweets récents dans une publication ou une page WordPress
Tout d’abord, connectez-vous à votre Tableau de bord WordPress et ouvrez l’éditeur de blocs d’une publication ou d’une page WordPress.
Si vous souhaitez créer une nouvelle publication ou une nouvelle page, vous pouvez le faire en allant dans Posts/Pages » Add New.
Ensuite, il suffit de coller l’URL du profil Twitter que vous avez copié plus tôt dans la zone « Tapez / pour choisir un bloc ».
Vous pouvez le voir ci-dessous.
Une fois que vous avez fait cela, le bloc se transforme immédiatement en un bloc de chronologie Twitter affichant les tweets récents de ce compte particulier.
Dans la colonne latérale des réglages du bloc, vous pouvez choisir de redimensionner le bloc pour les appareils plus petits afin qu’il soit plus responsive pour la vue mobile.
En outre, n’hésitez pas à ajouter d’autres blocs à la page ou à la publication pour encourager les utilisateurs/utilisatrices à suivre votre compte Twitter.
Une fois cela fait, il suffit de cliquer sur « Mettre à jour » ou « Publier » pour que les modifications soient directes.
Cette méthode ajoute vos tweets récents à l’intérieur d’une boîte avec un Diaporama vertical. La boîte contient les 20 tweets les plus récents et le bouton « Voir plus sur Twitter » à la fin.
Voici à quoi ressemble notre chronologie sur Twitter :
Si vous utilisez un thème WordPress en bloc, vous pouvez également utiliser cette même méthode pour intégrer un flux Twitter dans l’éditeur du site complet et afficher les tweets récents dans une composition ou un élément de modèle.
Vous pouvez en savoir plus à ce sujet dans notre guide terminé sur l’édition complète de site WordPress.
Afficher les Tweets récents dans une zone de widget WordPress
Si vous utilisez un thème WordPress classique et que vous souhaitez afficher vos derniers tweets dans une zone de widgets (comme une colonne latérale), il vous suffit de suivre les étapes suivantes.
Tout d’abord, allez dans Apparence » Widgets. Ensuite, cliquez sur le bouton » + Ajouter une nouvelle » dans votre zone de widgets sélectionnée et sélectionnez le widget Twitter.
À partir de là, il suffit de coller l’URL du compte Twitter ou de la publication dans le champ approprié.
Cliquez ensuite sur « Contenu embarqué ».
Vous pouvez ensuite mettre à jour vos widgets et prévisualiser le widget Tweets en direct sur votre site.
Voici comment la chronologie apparaît dans notre colonne latérale WordPress :
Méthode 2 : Afficher les tweets récents à l’aide d’une extension de flux Twitter (recommandé)
La deuxième méthode pour ajouter des tweets récents à votre site WordPress consiste à utiliser une extension Twitter. La raison pour laquelle nous recommandons cette méthode est qu’elle offre beaucoup plus d’options de personnalisation que la méthode précédente, vous permettant d’ajuster le flux à la conception de votre page.
Pour cela, nous allons utiliser Smash Balloon Custom Twitter Feeds. Cette extension aide à créer de beaux flux sociaux de différents types. Vous pouvez afficher des tweets basés sur des hashtags, des termes de recherche, des mentions, des chronologies, et plus encore.
Note : Bien qu’il existe une extension Custom Twitter Feeds gratuite, cet article utilisera la version Custom Twitter Feed Pro. Elle est dotée de fonctionnalités beaucoup plus avant, comme le filtrage de la chronologie et la combinaison de plusieurs flux Twitter en un seul.
Vous devrez d’abord installer et activer l’extension WordPress. Une fois qu’il est activé, allez dans votre zone d’administration WordPress, naviguez vers Twitter Feed » Réglages, et collez votre clé de licence dans le champ approprié.
Ensuite, vous devez activer la licence et cliquer sur « Enregistrer les modifications ».
Il vous suffit maintenant d’aller dans Flux Twitter » Tous les flux.
Cliquez ensuite sur le bouton « + Ajouter une nouvelle ».
Si c’est la première fois que vous ajoutez un flux Twitter à l’aide de Smash Balloon, il vous sera demandé de vérifier votre adresse e-mail.
Il vous suffit de cliquer sur le bouton « Connecter » et de suivre les instructions à l’écran.
Une fois que vous aurez terminé, vous reviendrez à la page de l’extension Custom Twitter Feeds et il vous sera demandé de sélectionner un type de flux.
Avec les Custom Twitter Feeds, vous pouvez choisir d’embarquer un flux de chronologie d’utilisateur, un flux de hashtag ou un flux de recherche. Pour les besoins de cet exemple, nous utiliserons la première option. Une fois que vous avez fait votre choix, il vous suffit de cliquer sur « Suivant ».
Sur l’écran suivant, vous pouvez saisir la poignée Twitter que vous souhaitez intégrer à votre site WordPress.
Cliquez ensuite à nouveau sur « Suivant ».
Choisissons maintenant un modèle de flux Twitter. Vous avez le choix entre 7 modèles, et vous pourrez toujours le modifier ultérieurement si vous pensez qu’il ne convient pas à la conception de votre page.
Après avoir fait votre choix, cliquez sur « Suivant ».
À ce stade, vous devriez arriver à l’interface de modification du flux Twitter. Vous verrez une Prévisualisation directe sur le côté droit de la page et un panneau de gauche où vous pouvez configurer l’apparence du flux.
Il y a deux onglets : « Personnaliser » et « Réglages ».
Commençons par la personnalisation. Si vous choisissez l’option « Mise en page du flux », vous pouvez choisir parmi les mises en page disponibles (liste, masonry ou carrousel), définir le nombre de tweets à afficher, modifier la hauteur du flux, etc.
Note : En raison des limitations de l’API, Smash Balloon peut uniquement afficher de 1 à 30 tweets dans un premier temps, mais davantage s’accumuleront au fil du temps.
Une fois ces réglages effectués, il vous suffit de cliquer sur le bouton « Personnaliser » en haut de la page pour revenir au menu principal.
Vous pouvez également activer le bouton Charger plus, qui apparaîtra sous les tweets affichés. C’est une fonctionnalité très pratique si vous avez des tonnes de tweets mais que vous ne pouvez pas tous les afficher sur la même page.
Il vous suffit de cliquer sur l’option « Load More Button », puis sur le bouton « Enable ». Vous pouvez ensuite personnaliser l’apparence du bouton.
Si vous passez à l’onglet » Réglages « , vous pouvez alors voir des options pour ajouter plus de sources de flux, appliquer des filtres de tweet et utiliser des fonctionnalités avancées (comme l’ajout de CSS personnalisés).
Vous pouvez également cliquer sur le bouton « Clear Feed Cache » pour retirer la mise en cache du flux précédent. La prochaine fois que l’extension devra afficher votre flux Twitter, elle devra récupérer les derniers tweets sur les serveurs de X/Twitter au lieu d’utiliser les anciennes données mises en cache.
Essayons d’ajouter des filtres à vos tweets en cliquant sur l’option » Filtres « .
Ici, vous pouvez choisir d’inclure les réponses et les retweets, d’afficher les tweets en fonction des mots autorisés ou bloqués, ou de masquer des tweets spécifiques.
Lorsque vous êtes satisfait de l’aspect du flux Twitter, vous pouvez cliquer sur le bouton « Enregistrer ».
Pour ajouter le Flux Twitter à votre page ou à votre widget, il vous suffit de cliquer sur le bouton « Contenu embarqué » en haut à droite.
Après cela, une fenêtre surgissante s’affichera, vous indiquant comment afficher le Flux Twitter : avec un code court, un bloc ou un widget.
Quelle que soit la méthode choisie, la première chose à faire est de copier le code court car vous en aurez besoin.
Ensuite, si vous souhaitez intégrer le flux Twitter à une page, cliquez sur le bouton « + Ajouter à une page ».
Une fois que vous avez fait cela, vous pouvez sélectionner une page existante de votre site WordPress et cliquer sur » Ajouter « .
Vous serez alors dirigé vers l’éditeur de blocs WordPress de la page choisie.
Cliquez sur le bouton d’ajout de module « + » n’importe où sur la page et sélectionnez le bloc Flux Twitter.
Le flux Twitter que vous avez créé précédemment ne s’affichera peut-être pas tout de suite.
Si cela vous arrive, il vous suffit de coller le code court dans le champ « Réglages du code court » dans la colonne latérale des réglages du bloc.
Cliquez ensuite sur « Appliquer les modifications ».
Une fois cette opération effectuée, vous pouvez cliquer sur « Mettre à jour » pour que les modifications soient prises en compte.
Voici à quoi ressemble le flux Twitter sur notre site de démonstration :
Si vous souhaitez afficher votre Flux Twitter dans une zone de widget, il vous suffit de cliquer sur l’option » + Ajouter à un widget « . Vous serez ensuite redirigé vers les éditeurs/éditrices de widgets.
Ensuite, il suffit de trouver et de sélectionner le widget « Twitter Feed ».
Comme pour la méthode précédente, il suffit de coller le code court dans la colonne latérale des Réglages du bloc et de cliquer sur » Appliquer les modifications « .
Vous verrez alors votre flux Twitter nouvellement créé dans la Prévisualisation en direct.
Enfin, cliquez sur « Mettre à jour » pour que les modifications soient définitives.
Vous pouvez ensuite visiter votre site direct pour voir à quoi ressemble le flux :
Méthode 3 : Afficher les derniers tweets dans WordPress avec Twitter Publish (Aucune extension + HTML)
La dernière méthode vous permet d’ajouter des publications récentes sur Twitter à l’aide de la fonctionnalité de publication sur Twitter.
Twitter Publish vous permet de créer facilement le code embarqué pour différents types de contenu Twitter, notamment un tweet, une vidéo, une chronologie ou un bouton (comme un bouton Suivre ou Partager).
Cette méthode vous autorise à personnaliser l’apparence de l’élément embarqué avant de l’ajouter à votre blog ou site WordPress. Elle n’est pas aussi puissante que la deuxième méthode, mais elle mérite d’être mentionnée car elle est gratuite.
Pour ce tutoriel, nous allons vous afficher comment utiliser Twitter Publish pour embarquer une chronologie. Tout d’abord, vous devez vous rendre sur le site Twitter Publish, puis coller l’URL de votre profil Twitter dans le champ « What would you like to embed ? » (Que voulez-vous intégrer ?).
Une fois que c’est fait, cliquez sur l’icône de la flèche.
Ensuite, il vous sera demandé de choisir une option d’affichage : Chronologie Embarquée ou Boutons X/Twitter.
Choisissez l’option « Contenu embarqué », car vous souhaitez afficher votre chronologie Twitter avec les tweets récents.
Lorsque vous sélectionnez l’option d’affichage, le code d’intégration de vos tweets récents est créé instantanément. Vous pouvez cliquer sur « Copier le code » pour intégrer immédiatement le code HTML personnalisé.
Vous pouvez également cliquer sur « Définir les options de personnalisation » pour personnaliser l’aspect de la chronologie Embarquée.
Ici, vous pouvez personnaliser la hauteur et la largeur de la chronologie, choisir un mode clair ou foncé, et activer une traducteur/traductrice pour les tweets si nécessaire.
Vous pouvez voir à quoi ressemblera l’élément Embarqué sous les Réglages. Une fois que vous avez terminé, il vous suffit de cliquer sur « Mettre à jour ».
Le code embarqué inclura désormais les réglages de personnalisation que vous avez choisis pour la chronologie.
Cliquez simplement sur « Copier le code » pour continuer.
Maintenant, retournez dans votre Tableau de bord WordPress et ouvrez l’éditeur de blocs pour une page, une publication ou une zone de widgets.
Ensuite, il suffit de cliquer sur le bouton d’ajout de bloc « + » n’importe où dans l’éditeur et de sélectionner le widget ou le bloc HTML personnalisé.
Maintenant, allez-y et collez le code embarqué de tout à l’heure dans le champ.
Une fois cela fait, vous pouvez cliquer sur le bouton « Prévisualisation » pour voir à quoi ressemble le flux.
Ensuite, n’hésitez pas à ajouter d’autres éléments à la page, à la publication ou à la zone de widgets. Il ne vous reste plus qu’à mettre à jour ou à publier.
Voici à quoi ressemble notre site de démonstration :
Astuce bonus : Ajouter plus de flux de réseaux sociaux à WordPress
Vous gérez d’autres plateformes de réseaux sociaux pour votre marque ou votre entreprise ? Si c’est le cas, vous pourriez vouloir afficher d’autres flux sociaux que Twitter sur votre site.
En affichant différents flux sociaux sur votre site WordPress, vous pouvez faire savoir aux internautes sur quelles plateformes ils peuvent vous suivre, augmentant ainsi votre nombre d’abonnés.
Afficher vos flux sociaux présente également un avantage majeur par rapport aux boutons d’icônes sociales habituels. Elle peut afficher aux internautes le contenu qu’ils manqueraient s’ils ne vous suivaient pas sur vos réseaux sociaux, créant ainsi une « peur de manquer ».
Avec Smash Balloon, vous pouvez afficher et personnaliser toutes sortes de flux de réseaux sociaux sur votre site WordPress. Ainsi, tous les flux s’accordent bien avec le thème que vous utilisez.
Il suffit de consulter les tutoriels ci-dessous pour savoir comment afficher différents flux sociaux dans WordPress :
- Outil de personnalisation Facebook Feed dans WordPress
- Comment créer un flux de photos Instagram personnalisé dans WordPress ?
- Comment afficher les dernières vidéos de la chaîne YouTube dans WordPress
- Comment Contenu embarqué des vidéos TikTok dans WordPress (Méthodes faciles)
- Comment afficher les Avis de Google, Facebook et Yelp dans WordPress
Nous espérons que cet article vous a aidé à apprendre comment afficher les tweets récents sur WordPress. Vous pouvez également consulter notre guide sur la façon de publier automatiquement de nouvelles photos Instagram sur WordPress ou notre choix d’experts des meilleures extensions de réseaux sociaux WordPress.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Kate
Hi, I was following the first set of instructions, but when I paste my Twitter URL in the text box nothing happens. I don’t know if it matters that I have Divi Builder enabled on my wordpress site?
WPBeginner Support
If it’s not embedding properly, you would want to try adding the twitter embed block and placing the url there.
Administrateur
Glenn
This seems to be an older article…I’m wondering how I can show my timeline..not my tweets but the people I follow. The Twitter Widgets page only shows Search, not my timeline or a list.
Thank you.
Glenn
Minhazul Islam
Is there any plugin to do the same task?
Greg McGee
I have successfully created a twitter feed on my wordpress site. Yaaay!!! Now the bad news. It disappears after 3 seconds. Booo!!! Where can I change the parameter that sets this limit? It is hiding from me very well. But I’m not all that smart, either.
Gopal sharma
This is the best tutorial i found ever..
onya icha
on mobile all my tweets displays and make my website to look funny .pls how can i solve this problem
Simeon Opeyemi
Thanks. it worked for me!
gertrude
I added this but apart from a link to my tweeter it doesn’t do anything. I have wordpress 3.8.1 and activated the default theme, then switched back to the one I am using. Still nothing. If there is any way you guys can help it would be great. Thanks
WPBeginner Support
Trying switching off all plugins and then test, particularly if you are using any Twitter related plugin. If this does not work, then you need to break the widget code into two pieces. Paste the javascript part starting from the <script> in your theme’s header.php, and the link part in a text widget.
Administrateur
K.T. Lynch
For some reason the closing HTML tags are stripped out once I press save. This is appearing on my WP Sidebar:
Tweets de @lynchkt !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+ »://platform.twitter.com/widgets.js »;fjs.parentNode.insertBefore(js,fjs);}}(document, »script », »twitter-wjs »);
The « Tweets de @lynchkt » is a hyperlink but otherwise it’s not working.
WPBeginner Support
This could happen for many reasons. If you are using WordPress 3.8 then try to update to 3.8.1. Try switching to a default theme temporarily and see if you still get this error.
Administrateur
Ines TR
Hello!
I just see a buncg of words in my blog page after pasting the widget , why?
I saved it and tried several times but can´t fix the problem.
Abdul
How do I get it on a wp page?
WPBeginner Support
you can paste the same code in WordPress pages as well as posts.
Administrateur
Douglas Vautour
Thanks a lot! All of the twitter widgets I found wanted way too much information! I feel better getting it from the source.
Ann
Hi!
Thank you for sharing this. My regular Twitter widgets just weren’t working!
Nancy Closson
I am looking for a widget that allows you to select tweets from one twitter account rather than show all or recent tweets. Is this customization possible and is that what you describe with the favorites list? thanks you
WPBeginner Support
yes this customization is possible but with these widgets. The favorites widget will show the tweets you have marked as favorites.
Administrateur
gaston
very useful!!
solved it in a buzz!
thanks!
Shana Manuel
Wow! This took me 5 minutes to set up and I’m a total novice! Thanks for this article.
Founterior
It works just fine !!!
patty
Sweet. Thanks for this!
Bill Hutchison
Thank you for this. I have used widgets for this in the past but have been generally unsatisfied with the results. The seems to be the best solution for including Twitter in the sidebar.
Thanks again.
Joan
I have a question:
Is it possible to personalize the twitter widget weight? With the old twitter code was possible.
Thanks
Chris Race
Thanks for this article! Was looking for a new widget as my old one stopped working – and found this simple solution. Great!
Rickard
I don’t know, but every single solution I’ve tried to use is messing with the admin panel more often than anyone can find ok.
Is there anyway to fight the « waiting for platform.twitter.com » which breaks many functions in the WP-admin-panel?
I guess this happens because of a overload on platform.twitter.com(?) and pages in the wp-admin-panel will continue loading forever…
Might there be a way to set a time limit for the call, and if not found ignore it?
Editorial Staff
This should have no impact on your WordPress admin panel. You are adding this in the widgets which only loads in the front-end of your website.
Administrateur
Julien Maury
I cannot agree more. There is another great thing with widget, they use streams (see streaming APIs) so you can display A LOT of tweets without worrying about rate limits.
And if you want to get a special feature you’ll add data-chrome= »noheader,nofooter,noborders,transparent » in the link. These new parameters allow you to make widgets « design friendly ».
Gordon Chambers
Hi,
I’ve been trying the above but when I click save it changes the value added in the ID box to a shortened number. I have tried to add both my twitter accounts and it does the same?
Julien Maury
That’s weird. Check the quotes – they have to be real quotes not like in this comment section.