Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment afficher les tweets récents dans WordPress (étape par étape)

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

Voulez-vous afficher vos tweets récents dans WordPress ?

L’intégration de X/Twitter à votre site WordPress permet d’augmenter l’engagement des utilisateurs/utilisatrices. Les internautes de votre blog peuvent facilement découvrir vos tweets, ce qui peut également vous aider à obtenir de nouveaux followers sur Twitter.

Dans cet article, nous allons vous afficher comment afficher les tweets récents dans WordPress.

How to Display Recent Tweets in WordPress

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.

Clicking Add New Page in WordPress admin area

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.

Pasting a Twitter URL to the block editor

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.

Publishing a page with a Twitter Feed

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 :

An example of a page with a Twitter Feed made with the built-in Twitter block

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.

Adding a Twitter widget in WordPress

À 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é ».

Embedding a Twitter profile in a WordPress widget area

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 :

Example of a Twitter widget in a WordPress sidebar

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 ».

Activating Smash Balloon's Custom Twitter Feeds Pro license key

Il vous suffit maintenant d’aller dans Flux Twitter  » Tous les flux.

Cliquez ensuite sur le bouton « + Ajouter une nouvelle ».

Adding a new Twitter Feed with Smash Balloon

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.

Connecting the user's email address with Smash Balloon

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 ».

Creating a User Timeline Twitter Feed with Smash Balloon

Sur l’écran suivant, vous pouvez saisir la poignée Twitter que vous souhaitez intégrer à votre site WordPress.

Cliquez ensuite à nouveau sur « Suivant ».

Choosing a Twitter Feed source in Smash Balloon

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 ».

Choosing a Smash Balloon Twitter Feed template

À 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 ».

The Twitter Feed editing interface in Smash Balloon

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.

Customizing the Twitter Feed layout in Smash Balloon

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.

Customizing the Twitter Feed Load More Button in Smash Balloon

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.

Customizing the Twitter Feed settings in Smash Balloon

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.

Customizing the filters to display the Twitter Feed in Smash Balloon

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.

The Twitter Embed Feed popup in Smash Balloon

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 « .

Selecting a page to embed the Twitter Feed in using Smash Balloon

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.

Selecting the Smash Balloon Twitter Feed block in the block editor

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 ».

Inserting a shortcode in the Smash Balloon Twitter Feed block

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 :

An example of the Twitter Feed made with Smash Balloon

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 ».

Adding the Twitter Feed Smash Balloon widget in the widget editor

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.

Inserting the Smash Balloon Twitter Feed shortcode in the widget editor

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 :

Example of the Twitter Feed widget made with Smash Balloon

Méthode 3 : Afficher les derniers tweets dans WordPress avec Twitter Publish (Sans extension)

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.

Inserting a Twitter URL in the Twitter Publish website

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.

Twitter Publish's display options

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.

Customizing the Twitter Feed made with Twitter Publish

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 ».

Clicking Update in the Twitter Publish website

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.

Copying a Twitter Publish embed code

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é.

Selecting the Custom HTML block in the block editor

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.

Pasting the Twitter Publish HTML code in the block editor

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 :

An example of Twitter Feed made with the Twitter Publish website

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.

Customize TikTok feed layout

Il suffit de consulter les tutoriels ci-dessous pour savoir comment afficher différents flux sociaux 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 ultime pour l’optimisation pour les moteurs de recherche (SEO) de WordPress ou notre choix d’experts des meilleures extensions de réseaux sociaux WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

32 commentairesLaisser une réponse

  1. Syed Balkhi says

    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!

  2. Kate says

    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 says

      If it’s not embedding properly, you would want to try adding the twitter embed block and placing the url there.

      Administrateur

  3. Glenn says

    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

  4. Greg McGee says

    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.

  5. gertrude says

    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 says

      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

  6. K.T. Lynch says

    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 says

      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

  7. Ines TR says

    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.

  8. Douglas Vautour says

    Thanks a lot! All of the twitter widgets I found wanted way too much information! I feel better getting it from the source.

  9. Nancy Closson says

    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

  10. Bill Hutchison says

    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.

  11. Joan says

    I have a question:

    Is it possible to personalize the twitter widget weight? With the old twitter code was possible.

    Thanks

  12. Chris Race says

    Thanks for this article! Was looking for a new widget as my old one stopped working – and found this simple solution. Great!

  13. Rickard says

    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?

  14. Julien Maury says

    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 says

      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?

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.