Comment intégrer des widgets Responsive X (Twitter) sur votre site web

Vous avez collé le code d'intégration de Twitter sur votre site. Sur ordinateur, ça s'affiche très bien. Puis vous jetez un œil sur votre téléphone.

Maintenant, c'est le bazar. Le flux déborde de l'écran, ou bien il reste coincé dans une étroite boîte de 500 px avec de l'espace vide tout autour. Vous essayez donc une petite modification CSS. Ça marche pendant une journée, puis ça ne fonctionne plus.

Si cela vous semble familier, vous n’êtes pas le seul. C’est l’un des problèmes les plus courants liés aux publications intégrées de Twitter (désormais X), et la plupart des « solutions » proposées en ligne ne sont que des astuces de fortune datant de 2012 qui ne fonctionnent plus depuis des années.

J'ai épluché les forums de développeurs, testé les solutions de contournement CSS et cherché à comprendre pourquoi elles échouaient systématiquement. Il s'avère que c'est le propre code JavaScript de Twitter qui vous met des bâtons dans les roues. Il existe une méthode bien plus simple qui vous évite toute cette galère.

Voici donc deux façons de rendre un fil Twitter adaptatif. Tout d'abord, la méthode manuelle via CSS. Ensuite, la méthode par plugin, qui est adaptative dès son installation, ne nécessite aucun code et ne posera pas de problème lors de la prochaine mise à jour de X.

Dans cet article :

• Réponse rapide : Comment intégrer un fil Twitter adaptatif
  • Pourquoi les modifications de largeur dans votre CSS ne sont-elles pas prises en compte ?
• La méthode la plus rapide pour rendre les éléments intégrés X (Twitter) adaptatifs
• Comment intégrer des widgets Responsive X (Twitter) sur votre site (méthode simple)
  • Étape 1 : Installer le plugin Twitter Feed Pro
  • Étape 2 : Créer un nouveau widget
  • Étape 3 : Connectez votre compte X (Twitter)
  • Étape 4 : Personnalisez vos éléments intégrés X (Twitter)
  • Étape 5 : Ajouter des éléments intégrés Responsive X (Twitter) à WordPress
  • Ajouter des éléments intégrés X/Twitter à votre page Web
  • Ajouter des éléments intégrés X/Twitter dans la barre latérale ou le pied de page de votre site web

Réponse rapide : Comment intégrer un fil Twitter adaptatif

Vous manquez de temps ? Voici la réponse avant le tutoriel complet.

Il existe deux façons de rendre un élément intégré Twitter adaptatif. La première est manuelle. Il suffit d'encadrer l'iframe de Twitter dans un conteneur, puis de le forcer à width: 100%, et contrer ses styles intégrés à l'aide du CSS et des requêtes de média.

Cela fonctionne, mais sa mise en place et sa maintenance prennent beaucoup de temps. De plus, cela a tendance à ne plus fonctionner lorsque X met à jour son code d'intégration.

La deuxième méthode consiste à utiliser un plugin. Celui-ci affiche le flux dans le code de votre thème, ce qui le rend responsive par défaut. Pas de code, pas de media queries, pas de conflit de redéfinition.

Pour ceux qui ne savent pas coder, le plugin est la solution idéale. Mon choix se porte sur Twitter Feed Pro, qui évite d'avoir à coder et rend vos intégrations adaptatives dès l'installation.

Ces deux approches vous permettent finalement d'obtenir un flux réactif, mais la différence réside dans le temps que vous y consacrez et dans l'ampleur de la maintenance que vous vous engagez à assurer.

Voici comment les deux se comparent.

	CSS manuel	Twitter Feed Pro
Codage requis	Oui	Aucun
Compatible avec les mises à jour X	Non	Oui
Il est temps de s'installer	Plus de 30 minutes	Environ 5 minutes

Pourquoi les modifications de largeur dans votre CSS ne sont-elles pas prises en compte ?

Vous réglez la largeur sur 100 %, vous enregistrez, puis vous actualisez la page. Rien ne change. Alors, qu'est-ce qui continue à passer outre vos modifications ?

Le code JavaScript propre à Twitter. Il réapplique les styles intégrés une fois la page chargée, ce qui fait que votre CSS est effacé à chaque fois.

C'est là que beaucoup de gens se trompent. L'élément intégré ne vous appartient pas vraiment. Il s'agit d'un iframe, une petite fenêtre donnant accès aux serveurs de Twitter, et vous n'avez aucun contrôle sur son contenu.

La méthode la plus rapide pour rendre les éléments intégrés X (Twitter) adaptatifs

Si vous recherchez la meilleure solution, vous pouvez utiliser le plugin Twitter Feed Pro et éviter tous ces problèmes.

Grâce au plugin n° 1 pour WordPress dédié aux flux Twitter, vous pourrez créer, personnaliser et intégrer du contenu X/Twitter en quelques clics seulement.

Toutes vos intégrations seront automatiquement adaptatives ; elles s'afficheront donc correctement, que l'utilisateur navigue sur un téléphone, une tablette ou un ordinateur de bureau.

Contrairement à la méthode manuelle, Twitter Feed Pro n'utilise pas non plus d'iFrame. Il récupère vos publications et les intègre correctement à votre site web.

Voici en quoi cela change la donne :

• Il est adaptatif par défaut. Le flux est généré à partir du code de votre thème ; il s'adapte donc à votre mise en page au lieu de rester figé dans une zone fixe de 500 px.
• Il n'y a pas de conflit de surécriture. L'absence d'iframe signifie que le code JavaScript de Twitter ne peut pas intervenir pour réinitialiser vos styles.
• Il n'y a pas de problème de hauteur. En l'absence d'iframe dont il faudrait deviner la taille, la hauteur du flux correspond toujours à celle de son contenu.

De plus, vous disposez d'un contrôle total sur la mise en page de vos contenus intégrés X/Twitter. Vous pouvez même choisir d'importer un modèle prédéfini pour une personnalisation rapide et facile.

Grâce à l'éditeur de flux en direct, vous pourrez personnaliser vos intégrations dans les moindres détails, sans avoir besoin de HTML, de CSS personnalisé ni d'aucun autre type de code.

Vous êtes d'ailleurs en bonne compagnie. Les plugins Smash Balloon équipent plus de 1,75 million de sites web actifs et affichent une note de 4,9 étoiles sur 5.

Prêt à intégrer du contenu X (Twitter) adaptatif ? Téléchargez Twitter Feed Pro ici.

Sur ce, voyons maintenant comment rendre les widgets X (Twitter) adaptatifs de la manière la plus simple possible grâce à ce plugin.

Comment intégrer des widgets Responsive X (Twitter) sur votre site (méthode simple)

Si vous suivez les instructions étape par étape ci-dessous, vous pourrez disposer sur votre site web d'un flux de contenus intégrés adaptés aux appareils mobiles.

C'est parti !

Étape 1 : Installer le plugin Twitter Feed Pro

Vous pouvez commencer par télécharger votre copie de Twitter Feed Pro ici. Une fois que vous avez le fichier du plugin, installez-le et activez-le sur votre ordinateur.

Si vous voulez un petit rappel sur la façon de procéder, nous avons un tutoriel pour débutants sur l'installation d'un plugin WordPress.

Étape 2 : Créer un nouveau widget

Comme le plugin propose un processus guidé en trois étapes, vous n'aurez aucun mal à créer un nouveau widget pour afficher des contenus intégrés adaptatifs.

Tout d'abord, ouvrez le menu Twitter Feed " All Feeds " dans votre tableau de bord d'administration et cliquez sur le bouton Add New.

Vous pouvez ensuite choisir le type de widget Twitter que vous souhaitez intégrer. Vous avez le choix entre 4 options différentes :

• Timeline de l'utilisateur : Sélectionnez un compte Twitter et intégrez-y les tweets.
• Hashtag : Affiche les liens Twitter avec les hashtags que vous avez choisis.
• Recherche : Choisissez un terme de recherche et intégrez les tweets correspondants.
• Listes : Sélectionnez une liste Twitter et intégrez tous les tweets qui s'y trouvent.

Une fois que vous avez sélectionné le type de widget souhaité, cliquez sur le bouton Suivant.

Pour notre exemple, nous allons sélectionner un type de widget hashtag .

Étape 3 : Connectez votre compte X (Twitter)

Une fois votre compte X connecté, votre widget pourra commencer à afficher des contenus intégrés adaptatifs sur votre site.

Prêt à commencer ? Tout d'abord, cliquez sur le bouton Connecter dans la fenêtre contextuelle.

Cela vous redirigera depuis votre site web vers www.x.com dans votre navigateur. À ce stade, vous pourrez accorder au plugin un accès en lecture seule à votre compte.

Smash Balloon étant totalement sécurisé, Twitter Feed Pro peut consulter vos informations, mais ne disposera d'aucune autorisation pour apporter des modifications grâce à cet accès.

Pour continuer, cliquez sur le bouton Autoriser l'application ici.

En cliquant sur ce lien, vous retournerez sur votre site WordPress.

Ici, vous pouvez sélectionner la source de vos contenus intégrés. Selon le type de widget, il peut s'agir d'un identifiant X (Twitter), d'un hashtag, d'un terme de recherche, etc.

Pour l'instant, nous allons saisir le hashtag "KEEB_PD" dans la fenêtre contextuelle et afficher tous les tweets contenant ce hashtag.

Pour continuer, vous pouvez entrer votre source et cliquer sur Suivant.

Voilà, vous venez d'ajouter une nouvelle source à votre widget. À l'avenir, vous pourrez réutiliser cette source d'un simple clic chaque fois que vous créerez de nouveaux widgets X (Twitter).

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

L'un des grands avantages de Twitter Feed Pro, c'est que ce plugin rend automatiquement les éléments intégrés adaptatifs et reproduit le design de votre site web.

En outre, vous disposez d'une collection de modèles préconstruits que vous pouvez importer pour votre widget :

• Défaut
• Cartes de maçonnerie
• Carrousel simple
• Cartes simples
• Carrousel de présentation
• Derniers Tweets
• Widget

Il vous suffit de sélectionner le modèle que vous souhaitez utiliser et de cliquer sur Suivant.

Une fois le modèle importé, Twitter Feed Pro ouvrira l'éditeur de flux en direct, dans lequel vous pourrez personnaliser en détail vos éléments intégrés adaptés aux appareils mobiles.

Sur la gauche, vous avez la possibilité de modifier la présentation de votre flux, la palette de couleurs, l'en-tête, le bouton "Charger plus" et bien d'autres choses encore.

De plus, vous pouvez suivre toutes vos modifications en temps réel grâce à l'aperçu du flux en direct sur la droite. La personnalisation est donc conviviale, rapide et précise.

Pour commencer à concevoir vos éléments intégrés, cliquez d'abord sur l'option « Mise en page du fil d'actualité » située à gauche.

Ensuite, vous pouvez choisir la mise en page des tweets qui s'affichent sur votre site web. En fait, vous avez le choix entre 3 mises en page différentes :

• Liste
• Maçonnerie
• Carrousel

Nous allons examiner ces schémas en détail ci-dessous.

Si vous souhaitez que les éléments intégrés de X (Twitter) soient facilement visibles sur votre site web, vous pouvez utiliser la mise en page sous forme de liste .

Cette mise en page affichera les tweets dans un seul widget. C'est également une excellente option pour intégrer des vidéos.

Ensuite, vous avez la mise en page en maçonnerie qui peut afficher vos tweets intégrés dans de nombreuses colonnes.

Vous pouvez ainsi susciter l'intérêt des visiteurs de votre site web en leur montrant des tonnes de tweets différents en même temps.

Vous souhaitez rendre votre site web plus interactif ?

Il vous suffit de sélectionner la mise en page « carrousel » pour afficher un diaporama sous forme de carrousel avec vos contenus intégrés X (Twitter).

Après avoir sélectionné votre mise en page, vous pouvez enregistrer vos modifications en cliquant sur Enregistrer.

Si vous souhaitez découvrir d'autres façons de personnaliser vos contenus intégrés X (Twitter), cliquez sur le bouton « Personnaliser ».

Vous pouvez ensuite utiliser l'éditeur de flux en direct du plugin pour modifier les couleurs de vos éléments intégrés.

Pour ce faire, il suffit de cliquer sur l'option Schéma de couleurs à gauche.

Désormais, il vous suffit de sélectionner la palette de couleurs que vous préférez pour modifier toutes les couleurs de votre flux en une seule fois.

Voici les combinaisons de couleurs que vous pouvez choisir :

• Hériter du thème : Copie automatiquement les couleurs de votre thème WordPress
• Léger : Sélectionnez un arrière-plan clair et une couleur de police foncée
• Sombre : affiche un arrière-plan sombre et une lumière adaptée à la place.
• Personnalisé : Choisissez manuellement toutes les couleurs de votre widget

Après avoir sélectionné votre palette de couleurs, cliquez à nouveau sur Enregistrer.

Vous pouvez désormais utiliser les autres options de personnalisation du plugin pour adapter le style de votre boîte de tweets, l'en-tête, les boutons « Charger plus », la taille du flux, et bien plus encore.

Comme vous pouvez le constater, ce plugin permet de personnaliser et d'intégrer facilement des flux X (Twitter) — pas besoin de CSS ni de HTML !

Enfin, cliquez sur Enregistrer pour sauvegarder vos modifications avant de passer à la dernière étape.

Étape 5 : Ajouter des éléments intégrés Responsive X (Twitter) à WordPress

Comme ce plugin rend automatiquement vos éléments intégrés adaptatifs, vous pouvez dès à présent intégrer votre widget X (Twitter).

Avec Twitter Feed Pro, vous avez le choix entre deux méthodes différentes pour intégrer vos widgets adaptatifs :

• Ajoutez des éléments intégrés X/Twitter à votre page web
• Ajoutez des éléments intégrés X/Twitter dans la barre latérale ou le pied de page de votre site web

Nous allons examiner ces deux méthodes ci-dessous.

Ajouter des éléments intégrés X/Twitter à votre page Web

Prêt à ajouter les widgets adaptatifs à votre site web ?

Tout d'abord, cliquez sur le bouton " Embed" dans le coin supérieur droit.

En cliquant dessus, vous accéderez aux options d'intégration de ce widget. Vous pouvez l'intégrer à une page WordPress, dans une barre latérale ou dans un pied de page.

Cette fois, vous pouvez cliquer sur l'option Ajouter à une page.

Vous pouvez maintenant voir une liste de toutes les pages WordPress de votre site web.

Pour continuer, il vous suffit de cliquer sur la page où vous souhaitez ajouter le widget X/Twitter adaptatif, puis de cliquer sur « Ajouter ».

Twitter Feed Pro vous redirigera maintenant vers cette page dans l'éditeur WordPress.

Ici, vous pouvez ajouter un nouveau bloc de contenu en cliquant sur l'icône plus (+).

Ensuite, saisissez « fil Twitter » dans la barre de recherche en haut de la page, puis cliquez sur le bloc « Fil Twitter » situé en dessous.

Le plugin ajoutera alors automatiquement le widget X/Twitter à votre page.

Pour confirmer votre nouveau widget, cliquez sur le bouton " Mise à jour" en haut de la page.

Comme vous pouvez le constater, il est très facile de rendre vos éléments intégrés X/Twitter adaptatifs et de les ajouter à votre site. Vous pouvez désormais ouvrir la page Web et voir à quoi ressemblent vos éléments intégrés Twitter.

Ajoutez des éléments intégrés X/Twitter dans la barre latérale ou le pied de page de votre site web

Depuis l'éditeur de flux en direct, vous pouvez également ajouter du contenu X/Twitter dans les zones de votre site web prévues pour accueillir des widgets.

Si votre éditeur n'est pas encore ouvert, ouvrez d'abord le menu Twitter Feed " All Feeds dans votre tableau de bord.

Ici, cliquez sur le widget X/Twitter que vous souhaitez intégrer.

Et voilà, votre widget s'ouvrira dans l'éditeur du fil d'actualité.

Comme précédemment, vous pouvez cliquer sur Embed pour continuer.

La fenêtre contextuelle contenant les options d'intégration s'affiche à nouveau.

Vous pouvez cliquer sur Ajouter à un widget pour continuer.

Twitter Feed Pro vous redirigera désormais vers la page Widgets de votre site web, où vous pourrez gérer vos widgets existants et en ajouter de nouveaux.

Ici, vous pouvez choisir d'afficher votre widget dans la barre latérale ou dans le pied de page.

Nous allons utiliser le pied de page pour notre exemple.

Enfin, cliquez sur l'icône plus (+) en bas et sélectionnez le widget Twitter Feed .

Si vous cliquez sur le bouton « Mettre à jour », votre nouveau widget X/Twitter sera mis en ligne sur votre site web.

Ainsi, tous les visiteurs de votre site web pourront voir vos éléments intégrés adaptatifs dans le pied de page de votre site :

Et voilà !

En quelques étapes simples, vous pouvez créer un flux d'éléments X (Twitter) intégrés et adaptatifs pour susciter l'intérêt de vos visiteurs, booster vos conversions et développer votre audience sur les réseaux sociaux.

Grâce à Twitter Feed Pro, vous pouvez facilement afficher de superbes widgets qui s'adaptent parfaitement à toutes les tailles d'écran, sans avoir à écrire la moindre ligne de code.

Vous souhaitez rendre les éléments intégrés X (Twitter) adaptatifs ? Téléchargez Twitter Feed Pro pour votre site web ici.

Pour stimuler facilement vos ventes, vous pouvez suivre notre guide sur la façon d'intégrer des widgets d'avis Google dans WordPress.

Et si cet article vous a plu, n'hésitez pas à nous suivre sur X (Twitter) et Facebook pour découvrir d'autres tutoriels sur le marketing sur les réseaux sociaux.