Comment intégrer des flux Responsive X (Twitter) à votre site web
Accueil Blog Comment intégrer des flux Responsive X (Twitter) à votre site web

Comment intégrer des flux Responsive X (Twitter) à votre site web

Comment intégrer des fils Twitter réactifs dans votre site Web

Vous souhaitez afficher des contenus intégrés X (Twitter) adaptatifs pour susciter l'intérêt des visiteurs de votre site web ?

Si vous souhaitez capter l'attention de tous les visiteurs de votre site web, une solution simple consiste à intégrer des publications X (Twitter) adaptatives.

Mais ajouter soi-même des éléments intégrés X (Twitter) adaptatifs peut s'avérer compliqué, surtout si l'on n'a pas l'habitude de manipuler du code.

Dans cet article, nous allons vous expliquer comment intégrer des flux X (Twitter) adaptatifs à votre site web.

Mais avant toute chose, voyons les différentes façons de rendre vos éléments intégrés X (Twitter) adaptatifs.

Vous pouvez également découvrir comment intégrer un fil d'actualité X (Twitter) adaptatif à votre site.

Comment intégrer des éléments « Responsive X » (Twitter) sur votre site

Pour intégrer du contenu provenant de X (Twitter) tout en vous assurant que les publications X s'adaptent à différentes tailles d'écran, deux options s'offrent à vous :

  • Méthode manuelle : Générez un code d'intégration, modifiez le code pour le rendre réactif et ajoutez-le à votre site.
  • Méthode automatique : utilisez un plugin de réseaux sociaux capable d'afficher automatiquement les fils d'actualité X (Twitter) adaptés aux appareils mobiles.

Si vous optez pour la méthode manuelle, vous devrez ouvrir dans votre navigateur le générateur officiel de code d'intégration X (Twitter) : publish.twitter.com.

intégrer manuellement des messages sur Twitter

Une fois que vous avez généré le code HTML d'intégration, ouvrez à nouveau votre site web et insérez le code d'intégration.

Malheureusement, vos publications X risquent de ne pas s'adapter à chaque fois si vous utilisez la méthode manuelle. Pour résoudre ce problème, vous pouvez ajouter ce code CSS.

.twitter-timeline {
    width: 100vw !important;
}

Et si vous souhaitez personnaliser vos publications sur X (Twitter) à l'aide d'iFrames, vous devrez modifier encore davantage le code manuellement ou faire appel à un développeur.

Comme vous pouvez le constater, l'intégration de contenu X (Twitter) adaptatif peut s'avérer fastidieuse et compliquée si vous utilisez cette méthode. 

Qu'est-ce qui est mieux : les intégrations via iFrame ou via X (Twitter) ?

Même si certaines personnes utilisent des iFrames pour afficher du contenu provenant de X (Twitter), cela peut en réalité nuire à votre site web à bien des égards.

Les iFrames n'étant pas réactives par défaut, vous devrez modifier manuellement le code pour les rendre compatibles avec les mobiles.

twitter iframe manually embed

Par conséquent, il se peut que les visiteurs utilisant des appareils mobiles ne puissent pas afficher correctement vos publications sur X.

De plus, les moteurs de recherche comme Google ne peuvent pas lire le contenu des iFrames, ce qui peut nuire au référencement.

La bonne nouvelle, c'est que vous pouvez utiliser une méthode automatique pour intégrer facilement des publications « responsive » de X (Twitter). Vous pouvez utiliser un plugin WordPress capable de se connecter à X (Twitter) via son API et de regrouper les publications de X sur votre site.

Voyons cette méthode ci-dessous.

La méthode la plus simple pour intégrer du contenu « Responsive X » (Twitter)

Si vous cherchez le moyen le plus simple d'intégrer du contenu X (Twitter), la meilleure solution consiste à essayer un plugin tel que X (Twitter) Feed Pro.

plugin twitter smash balloon

Grâce à X (Twitter) Feed Pro, vous pouvez créer, personnaliser et intégrer en toute simplicité des flux X (Twitter) adaptatifs sur votre site web, sans avoir besoin de HTML, de JavaScript, de CSS personnalisé ni d'aucun autre code.

Il vous suffit de suivre ce guide simple en trois étapes pour obtenir un superbe fil d'actualité X (Twitter) prêt à l'emploi. Vous pouvez intégrer un fil d'actualité X (Twitter), un hashtag, des résultats de recherche, votre fil d'actualité personnel et bien plus encore.

home timeline for twitter

Comme X (Twitter) Feed Pro reprend automatiquement le design de votre site web, votre contenu X (Twitter) s'harmonisera parfaitement avec l'identité visuelle de votre marque dès sa mise en place.

Vous pouvez ensuite personnaliser encore davantage votre fil X (Twitter) en choisissant un modèle prédéfini que vous souhaitez importer.

Pour davantage de personnalisation, le plugin est doté d'un éditeur visuel qui vous permet de définir la mise en page, les couleurs, le nombre d'articles « X », le style de l'en-tête, les boutons « Charger plus » et bien plus encore.

De plus, vous pouvez suivre toutes vos modifications grâce à l'aperçu en direct.

éditeur de flux en direct pour twitter

Le plugin dispose d'un système de mise en cache intelligent qui enregistre une copie de votre contenu X (Twitter). Ainsi, votre site peut afficher cette copie enregistrée aux visiteurs au lieu de charger vos publications X à chaque fois.

Par conséquent, votre site se charge beaucoup plus rapidement. Et avec un site web plus rapide, vous bénéficiez également d'un meilleur référencement.

Fonctionnalité du ballon de poche smart cache smash

Comme X (Twitter) Feed Pro enregistre une copie de sauvegarde, vos publications X intégrées resteront en ligne même si X (Twitter) est temporairement indisponible.

En somme, c'est le meilleur plugin de flux X (Twitter) qui existe et une solution fantastique si vous souhaitez intégrer des contenus X (Twitter) adaptatifs.

Prêt à intégrer des flux X (Twitter) adaptatifs ? N'hésitez pas à vous procurer dès aujourd'hui votre exemplaire de X (Twitter) Feed Pro!

Voyons maintenant comment vous pouvez utiliser ce plugin pour ajouter à votre site des éléments X (Twitter) intégrés et adaptatifs.

Comment intégrer un fil d'actualité X (Twitter) adaptatif sur votre site

Pour commencer à ajouter des éléments intégrés X (Twitter) adaptatifs, il vous suffit de suivre les instructions étape par étape ci-dessous :

Étape 1 : Installer et activer X (Twitter) Feed Pro

Pour commencer, vous pouvez télécharger le plugin X (Twitter) Feed Pro ici. Une fois le plugin téléchargé, installez-le et activez-le sur votre site WordPress pour continuer.

Pour plus d'informations, vous pouvez consulter ce guide convivial sur l'installation des plugins WordPress.

Une fois cette étape terminée, vous pouvez passer à l'étape 2 et créer un fil X (Twitter) adaptatif.

Étape 2 : Créer un flux X (Twitter)

Comme le plugin propose un processus guidé très simple, vous pouvez créer un nouveau fil d'actualité X (Twitter) en quelques clics seulement.

Commencez par ouvrir votre tableau de bord d'administration, puis accédez au menu « Flux X (Twitter) » » « Tous les flux » avant de cliquer sur le bouton « Ajouter un nouvel élément » situé en haut de la page.

ajouter un nouveau flux twitter personnalisé

Ensuite, le plugin vous demandera de choisir le type d'intégrations X (Twitter) que vous souhaitez afficher sur votre site web. Vous avez le choix entre 6 options, chacune affichant des publications X provenant d'une source différente.

  • Historique de l'utilisateur : sélectionnez les profils X (Twitter) dont vous souhaitez intégrer les publications X
  • Hashtag : sélectionnez des hashtags spécifiques, puis intégrez les publications X associées à ce hashtag
  • Fil d'actualité : Intégrer X publications provenant du fil d'actualité de votre compte
  • Recherche : choisissez des mots-clés et intégrez les résultats de recherche X (Twitter) sur votre site
  • Mentions : Afficher X publications qui mentionnent le compte X (Twitter) de votre marque
  • Listes : afficher le contenu de la liste X (Twitter) que vous avez sélectionnée

Vous pouvez même sélectionner plusieurs options si vous souhaitez regrouper différents types de flux dans un seul flux (Twitter).

Pour continuer, sélectionnez le type de flux X (Twitter) de votre choix, puis cliquez sur le bouton « Suivant ».

choisir le hashtag twitter feed

Dans notre exemple, nous allons utiliser un flux de hashtags pour afficher des éléments intégrés X (Twitter) adaptatifs.

Maintenant que votre fil d'actualité X (Twitter) est créé, vous pouvez le relier à votre compte X (Twitter) à l'étape 3.

Étape 3 : Connectez votre compte X (Twitter)

Pour afficher des contenus intégrés adaptatifs sur votre site, le plugin va désormais se connecter à votre compte X (Twitter).

Pour ce faire, cliquez d'abord sur le bouton Connecter .

connecter un compte twitter à wordpress

Ensuite, X (Twitter) Feed Pro vous demandera un accès en lecture seule à votre compte. Le plugin pourra alors utiliser cet accès pour consulter les informations de X (Twitter), mais il ne pourra apporter aucune modification à votre compte.

Par conséquent, le plugin X (Twitter) Feed Pro est totalement sûr.

Pour ce faire, il suffit de cliquer sur le bouton Autoriser l'application.

authorize twitter read only access.jpg

Une fois cette opération effectuée, X (Twitter) Feed Pro ouvrira votre site web afin que vous puissiez ajouter une source pour votre fil X (Twitter).

Une source correspond au profil X (Twitter), à un hashtag, à un terme de recherche, à une liste ou à tout autre élément que vous souhaitez intégrer à votre site.

Pour continuer, entrez la source dans la fenêtre contextuelle et cliquez sur Suivant.

sélectionnez les hashtags de votre fil twitter

Pour ce fil d'actualité responsive sur X (Twitter), nous utilisons le hashtag « KEEB_PD » comme source.

Maintenant que vous avez connecté votre flux à X (Twitter) et ajouté votre source, il est temps de le personnaliser.

Étape 4 : Personnalisez vos éléments intégrés Responsive X (Twitter)

Pour vous aider à configurer rapidement l'affichage des publications X adaptatives sur votre site, vous pouvez importer un modèle prédéfini.

Voici les modèles d'alimentation que vous pouvez sélectionner :

  • Défaut
  • Maçonnerie
  • Carrousel simple
  • Cartes simples
  • Carrousel de présentation
  • Derniers messages X
  • Widget

Cliquez sur Suivant une fois que vous avez choisi le modèle de flux que vous préférez.

choisir un modèle de flux

Vous êtes désormais prêt à personnaliser votre fil d'actualité X (Twitter) à l'aide de l'éditeur de fil d'actualité en direct. Sur le côté gauche, vous trouverez les options de personnalisation permettant de modifier la mise en page de votre fil d'actualité, le design de l'en-tête, l'option « lightbox », la palette de couleurs et bien plus encore.

Vous pouvez également utiliser les options de modération disponibles dans les paramètres du flux pour sélectionner les publications X qui s'affichent sur votre site.

Le plugin dispose d'un simple aperçu en temps réel sur la droite pour vous aider à suivre vos modifications.

éditeur de flux en direct twitter feed pro visual preview

Pour commencer, vous pouvez modifier la mise en page des publications X sur votre site web.

Pour cela, recherchez l'option Feed Layout sur la gauche et cliquez dessus.

choisir l'option de mise en page du flux créer un flux twitter

Ensuite, X (Twitter) Feed Pro vous proposera trois mises en page parmi lesquelles vous pourrez choisir : « Liste » , « Carrousel » et « Maçonnerie ».

Voyons-les ci-dessous :

options de mise en page des flux agrégateur twitter

Si vous souhaitez afficher X publications d'une manière similaire à celle du site officiel de X (Twitter), vous pouvez opter pour la mise en page sous forme de liste .

De plus, votre fil d'actualité X (Twitter) sera ainsi clairement visible sur votre page web.

list layout twitter feed pro

Si vous souhaitez utiliser des colonnes pour afficher des éléments intégrés X (Twitter), vous pouvez utiliser la mise en page « masonry ».

Cette mise en page vous permet d'afficher un grand nombre de publications X à la fois.

maçonnerie agencement flux twitter

Si vous optez pour la mise en page « carrousel », vous pourrez afficher vos publications X sous la forme d'un diaporama interactif X (Twitter).

Vos visiteurs disposeront d'un autre moyen de s'engager sur votre site.

carousel layout twitter

Une fois que vous avez sélectionné une disposition de flux, cliquez sur le bouton Enregistrer.

Cliquez ensuite sur le bouton « Personnaliser » pour continuer à personnaliser l'apparence de votre fil d'actualité X (Twitter).

retour au menu principal éditeur de flux en direct

Cette fois-ci, vous pouvez choisir les couleurs de votre fil d'actualité X (Twitter) adaptatif.

Tout d'abord, cliquez sur l'option Schéma de couleurs .

choisir le schéma de couleurs option twitter feed

X (Twitter) Feed Pro propose 4 palettes de couleurs que vous pouvez essayer :

  • Hériter du thème : copier les couleurs de votre thème WordPress pour vos X articles
  • Clair : Couleur de police foncée sur fond clair
  • Sombre : Fond sombre et police de couleur claire
  • Personnalisé : Sélectionnez manuellement toutes vos couleurs

Pour continuer, sélectionnez votre palette de couleurs, puis cliquez sur Enregistrer.

options de couleurs pour votre flux twitter

Vous souhaitez personnaliser encore davantage vos intégrations X (Twitter) ? Vous pouvez utiliser les autres boutons pour définir le style de votre en-tête, le design des boutons, le nombre de publications X, la taille du fil d'actualité et bien plus encore.

Enfin, cliquez sur « Enregistrer » pour valider la nouvelle mise en page de votre fil d'actualité X (Twitter).

À l'étape 5, vous pouvez enfin intégrer ce fil d'actualité X (Twitter) à votre site WordPress à l'aide de ce plugin.

Étape 5 : Ajouter des éléments intégrés Responsive X (Twitter) sur votre site web

Grâce à X (Twitter) Feed Pro, vous disposez de deux méthodes pour intégrer du contenu X (Twitter) à votre site web :

  • Ajouter des éléments intégrés X (Twitter) adaptatifs sur une page web
  • Ajouter des éléments intégrés X (Twitter) adaptatifs dans la barre latérale ou le pied de page du site web

Ajouter des éléments intégrés Responsive X (Twitter) à une page Web

Ce plugin étant très intuitif, vous pouvez commencer à intégrer votre fil d'actualité X (Twitter) directement depuis l'éditeur de fil d'actualité en temps réel.

Tout d'abord, cliquez sur le bouton Embed en haut de l'éditeur.

éditeur de flux en direct bouton d'intégration twitter

Une fois cette opération effectuée, le plugin affichera une fenêtre contextuelle présentant les différentes façons d'intégrer des flux X (Twitter).

Cliquez sur le bouton Ajouter à une page de la fenêtre contextuelle pour continuer.

ajouter à une page

Vous pouvez maintenant choisir la page WordPress où vous souhaitez afficher le flux.

Après avoir sélectionné la page dans la fenêtre contextuelle, cliquez sur le bouton Ajouter pour continuer.

ajouter un flux twitter à une nouvelle page

Une fois que vous avez fait cela, le plugin ouvrira la page dans l'éditeur WordPress afin que vous puissiez intégrer votre flux.

Ensuite, ajoutez un nouveau bloc de contenu en cliquant sur l'icône plus (+).

ajouter un nouveau bloc wordpress

À l'aide de la barre de recherche située en haut de la page, recherchez le bloc « Flux Twitter », puis cliquez sur le bloc « Flux X (Twitter) » situé en dessous.

Vous verrez alors votre contenu intégré X (Twitter) s'afficher dans l'éditeur WordPress.

intégrer un flux twitter sur votre site wordpress

Enfin, cliquez sur le bouton « Mettre à jour » et votre fil d'actualité X (Twitter) sera en ligne.

Si vous ouvrez votre page Web, vous pourrez voir à quoi ressemblent vos éléments intégrés X (Twitter) adaptatifs.

exemple de flux twitter sur un site web

Comme vous pouvez le constater, X (Twitter) Feed Pro vous permet d’afficher très facilement sur votre site web du contenu X (Twitter) adapté aux appareils mobiles.

Sur ce, voyons maintenant une autre façon d'intégrer des fils d'actualité X (Twitter).

Ajouter des éléments intégrés Responsive X (Twitter) dans la barre latérale ou le pied de page du site web

Une autre option consiste à utiliser un widget X (Twitter) pour afficher des publications X adaptatives dans la barre latérale ou le pied de page de votre site web.

Comme pour la méthode précédente, vous pouvez cette fois utiliser l'éditeur en direct.

Si vous souhaitez rouvrir un flux dans l'éditeur de flux en direct, commencez par ouvrir le menu « Flux X (Twitter) » → « Tous les flux » depuis votre tableau de bord WordPress.

Une fois que vous avez fait cela, cliquez sur le fil d'actualité « X » (Twitter) que vous souhaitez intégrer.

Ouvrir le flux twitter des hashtags

Comme vous pouvez le constater, il est très facile de rouvrir un fil X (Twitter) dans l'éditeur de fil d'actualité.

Cliquez ensuite sur le bouton " Embed" en haut de la page pour commencer.

éditeur de flux en direct bouton d'intégration twitter

Vous pouvez désormais utiliser la fenêtre contextuelle pour créer un nouveau widget X (Twitter) permettant d'afficher des publications X adaptatives.

Cliquez ensuite sur le bouton Ajouter à un widget dans la fenêtre contextuelle.

ajouter le flux twitter au widget

Le plugin va maintenant ouvrir la page des widgets de votre site, où vous pourrez ajouter votre widget de flux X (Twitter).

Une fois sur cette page, vous pourrez choisir l'emplacement de vos publications X.

Si vous souhaitez afficher des éléments intégrés X (Twitter) adaptatifs dans la barre latérale, cliquez sur le panneau « Barre latérale ».

ouvrir le panneau latéral

Vous pouvez également cliquer sur « Pied de page » pour afficher X articles dans le pied de page de votre site web.

Pour cet exemple, nous utiliserons une barre latérale WordPress.

ouvrir le panneau de bas de page

Pour ajouter un nouveau widget, cliquez sur l'icône plus (+) en bas.

Une fois cette opération effectuée, sélectionnez le widget « Flux X (Twitter) » parmi les options disponibles pour continuer.

ajouter un widget twitter à wordpress

Vous pouvez désormais terminer l'intégration de votre fil d'actualité X (Twitter) en cliquant sur le bouton « Mettre à jour ».

En un clin d'œil, vous pouvez afficher un flux d'éléments X (Twitter) intégrés et adaptatifs dans votre barre latérale ou votre pied de page.

intégrer un flux twitter dans la barre latérale de wordpress

Et voilà !

Comme vous pouvez le constater, l'ajout d'éléments intégrés X (Twitter) adaptatifs à votre site peut être un jeu d'enfant grâce à X (Twitter) Feed Pro.

Vous pouvez désormais afficher des publications X pertinentes pour maintenir l'intérêt des visiteurs, augmenter le nombre de vos abonnés sur X (Twitter), booster vos conversions, et bien plus encore.

Vous souhaitez intégrer des flux X (Twitter) adaptatifs ? Cliquez ici pour obtenir X (Twitter) Feed Pro pour votre site!

Pendant que vous êtes ici, n'oubliez pas de consulter cette liste des meilleures façons de gagner de l'argent sur X (Twitter).

Si vous avez trouvé cet article utile, pourquoi ne pas nous suivre sur Facebook et X (Twitter) pour obtenir davantage de conseils et d'astuces informatifs sur les réseaux sociaux ?

avatar de l'auteur
Sajjan Sharma Rédacteur principal
Sajjan écrit sur WordPress, le marketing des médias sociaux et les entreprises en ligne depuis plus de 10 ans. Ses intérêts professionnels s'étendent au marketing d'influence, à la curation de contenu et aux stratégies de marketing numérique.

Ajouter un commentaire

Nous sommes heureux que vous ayez choisi de laisser un commentaire. N'oubliez pas que tous les commentaires sont modérés conformément à notre politique de confidentialité et que tous les liens ne sont pas suivis. N'utilisez PAS de mots-clés dans le champ du nom. Engageons une conversation personnelle et constructive.