Vous souhaitez afficher des liens Twitter réactifs pour attirer l'attention des visiteurs de votre site web ?
Si vous souhaitez impliquer toutes les personnes qui visitent votre site web, une solution simple consiste à intégrer des messages Twitter réactifs.
Mais l'ajout d'éléments Twitter réactifs par vous-même peut être déroutant, surtout si vous n'avez pas l'habitude de travailler avec du code.
Dans cet article, nous vous guiderons à travers le processus d'intégration de flux Twitter réactifs sur votre site web.
Mais tout d'abord, examinons les différentes façons de rendre vos liens Twitter réactifs.
Vous pouvez également cliquer ici pour accéder directement au tutoriel.
Comment ajouter des liens Twitter réactifs sur votre site
Pour intégrer du contenu de Twitter tout en veillant à ce que les tweets soient réactifs, vous pouvez utiliser deux options :
- 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 médias sociaux qui peut afficher automatiquement des flux Twitter adaptés aux mobiles.
Si vous optez pour la méthode manuelle, vous devrez ouvrir le générateur officiel de code d'intégration de Twitter , publish.twitter.com, dans votre navigateur.
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 tweets risquent de ne pas être réactifs à 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 messages Twitter à l'aide d'iFrames, vous devrez modifier manuellement le code ou faire appel à un développeur.
Comme vous pouvez le constater, l'intégration d'un contenu Twitter réactif peut prendre du temps et être compliquée si vous utilisez cette méthode.
Qu'est-ce qui est le mieux : iFrame ou Twitter Embeds ?
Si certaines personnes utilisent des iFrames pour afficher le contenu de Twitter, cela peut en fait 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.
Par conséquent, les visiteurs utilisant des appareils mobiles risquent de ne pas pouvoir lire correctement vos tweets.
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 la méthode automatique pour intégrer facilement des messages Twitter réactifs. Vous pouvez utiliser un plugin WordPress qui peut se connecter à Twitter en utilisant son API et agréger les tweets sur votre site.
Voyons cette méthode ci-dessous.
La façon la plus simple d'intégrer du contenu Twitter réactif
Si vous cherchez le moyen le plus simple d'intégrer du contenu Twitter, la meilleure option est d'essayer un plugin comme Twitter Feed Pro.
Avec Twitter Feed Pro, vous pouvez créer, personnaliser et intégrer des flux Twitter réactifs sur votre site Web en toute simplicité - sans avoir besoin de HTML, de Javascript, de CSS personnalisé ou de tout autre code.
Il vous suffit de suivre un guide simple en 3 étapes pour obtenir un magnifique flux Twitter prêt à l'emploi. Vous pouvez intégrer une chronologie Twitter, un hashtag, des résultats de recherche, une chronologie d'accueil, etc.
Comme Twitter Feed Pro copiera automatiquement le design de votre site web, votre contenu Twitter s'adaptera parfaitement à l'apparence de votre marque dès le départ.
Vous pouvez ensuite personnaliser davantage votre flux Twitter en choisissant un modèle prédéfini que vous souhaitez importer.
Pour plus de personnalisation, le plugin est livré avec un éditeur visuel où vous pouvez définir votre mise en page, la couleur, le nombre de tweets, le style de l'en-tête, les boutons de chargement, et bien plus encore.
De plus, vous pouvez suivre toutes vos modifications grâce à l'aperçu en direct.
Le plugin dispose d'un système de mise en cache intelligent qui enregistre une copie de votre contenu Twitter. Ainsi, votre site peut afficher la copie sauvegardée aux visiteurs au lieu de charger vos tweets à partir de zéro à 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.
Comme Twitter Feed Pro enregistre une copie de sauvegarde, vos tweets intégrés resteront en ligne même si Twitter lui-même est temporairement indisponible.
Dans l'ensemble, il s'agit du meilleur plugin de flux Twitter existant et d'une solution fantastique si vous souhaitez des embeds Twitter réactifs.
Prêt à intégrer des flux Twitter réactifs ? Téléchargez votre exemplaire de Twitter Feed Pro dès aujourd'hui!
Voyons maintenant comment vous pouvez utiliser ce plugin pour ajouter des liens Twitter réactifs à votre site.
Comment intégrer un flux Twitter réactif sur votre site
Pour commencer à ajouter des éléments Twitter réactifs, il vous suffit de suivre les instructions pas à pas ci-dessous :
Étape 1 : Installer et activer Twitter Feed Pro
Vous pouvez commencer par télécharger votre copie du plugin Twitter Feed Pro ici. Une fois que vous avez le plugin, 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.
Après cela, vous pouvez passer à l'étape 2 et créer un flux Twitter réactif.
Étape 2 : Créer un flux Twitter
Comme le plugin est livré avec un flux guidé simple, vous pouvez créer un nouveau flux Twitter en quelques clics seulement.
Tout d'abord, ouvrez votre tableau de bord d'administration et naviguez dans le menu Twitter Feed " All Feeds " avant de cliquer sur le bouton Add New (Ajouter un nouveau) en haut.
Ensuite, le plugin vous demandera de choisir le type d'embeds Twitter que vous voulez sur votre site web. Vous avez le choix entre 6 options, chacune affichant des tweets provenant d'une source différente.
- Timeline de l'utilisateur : Choisissez les profils Twitter dont vous souhaitez intégrer les tweets.
- Hashtag : Sélectionnez des hashtags spécifiques et intégrez les tweets contenant ce hashtag.
- Chronologie d'accueil : Incorporer des tweets de la chronologie d'accueil de votre compte
- Recherche : Choisissez des termes de recherche et intégrez les résultats de la recherche Twitter sur votre site.
- Mentions : Afficher les tweets qui mentionnent le compte Twitter de votre marque
- Listes : Afficher le contenu de la liste Twitter sélectionnée
Vous pouvez même sélectionner plusieurs options si vous souhaitez combiner différents types de flux en un seul flux Twitter.
Pour continuer, sélectionnez votre type de flux Twitter et cliquez sur le bouton Suivant.
Dans notre exemple, nous utiliserons un flux de hashtags pour afficher des liens Twitter réactifs.
Maintenant que votre flux Twitter est créé, vous pouvez le connecter à votre compte Twitter à l'étape 3.
Étape 3 : Connecter votre compte Twitter
Pour afficher des embeds réactifs sur votre site, le plugin se connecte à votre compte Twitter.
Pour ce faire, cliquez d'abord sur le bouton Connecter .
Ensuite, Twitter Feed Pro vous demandera un accès en lecture seule à votre compte. Le plugin peut alors utiliser cet accès pour afficher les informations de Twitter, mais il ne peut pas apporter de modifications à votre compte.
Par conséquent, le plugin Twitter Feed Pro est totalement sûr.
Pour ce faire, il suffit de cliquer sur le bouton Autoriser l'application.
Une fois que vous avez fait cela, Twitter Feed Pro ouvrira votre site Web afin que vous puissiez ajouter une source pour votre flux Twitter.
Une source est un profil Twitter, un hashtag, un terme de recherche, une liste, etc. que vous souhaitez intégrer à votre site.
Pour continuer, entrez la source dans la fenêtre contextuelle et cliquez sur Suivant.
Pour ce flux Twitter réactif, nous utilisons le hashtag "KEEB_PD" comme source.
Maintenant que vous avez connecté votre flux à Twitter et ajouté votre source, il est temps de le personnaliser.
Étape 4 : Personnalisez vos liens Twitter réactifs
Pour vous aider à définir rapidement la manière dont les tweets réactifs apparaissent 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 tweets
- Widget
Cliquez sur Suivant une fois que vous avez choisi le modèle de flux que vous préférez.
Vous êtes maintenant prêt à personnaliser votre flux Twitter à l'aide de l'éditeur de flux en direct. Sur le côté gauche, vous pouvez trouver les options de personnalisation pour changer la mise en page de votre flux, 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 dans les paramètres du flux pour sélectionner les tweets 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.
Pour commencer, vous pouvez modifier la présentation des tweets sur votre site web.
Pour cela, recherchez l'option Feed Layout sur la gauche et cliquez dessus.
Ensuite, Twitter Feed Pro vous présentera 3 mises en page parmi lesquelles vous pourrez choisir : Liste, Carrousel et Masonry.
Voyons-les ci-dessous :
Si vous souhaitez afficher les tweets de la même manière que sur le site officiel de Twitter, vous pouvez opter pour la présentation sous forme de liste .
De plus, votre fil Twitter sera ainsi clairement visible sur votre page web.
Si vous souhaitez utiliser des colonnes pour afficher les liens Twitter, vous pouvez utiliser la mise en page en maçonnerie.
Vous pouvez afficher des tonnes de tweets en même temps grâce à cette mise en page.
Si vous optez pour l'option de mise en page carrousel , vous pouvez afficher vos tweets dans un diaporama Twitter interactif.
Vos visiteurs disposeront d'un autre moyen de s'engager sur votre site.
Une fois que vous avez sélectionné une disposition de flux, cliquez sur le bouton Enregistrer.
Ensuite, cliquez sur le bouton Personnaliser pour continuer à personnaliser l'apparence de votre flux Twitter.
Cette fois, vous pouvez choisir les couleurs de votre flux Twitter réactif.
Tout d'abord, cliquez sur l'option Schéma de couleurs .
Twitter Feed Pro est livré avec 4 options de couleurs que vous pouvez essayer :
- Hériter du thème : Copier les couleurs de votre thème WordPress pour vos tweets
- 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.
Vous souhaitez personnaliser davantage vos liens Twitter ? Vous pouvez utiliser les boutons restants pour définir le style de l'en-tête, le design des boutons, le nombre de tweets, la taille du flux, et bien plus encore.
Enfin, cliquez sur Enregistrer pour confirmer le nouveau design de votre fil Twitter.
À l'étape 5, vous pouvez enfin intégrer ce flux Twitter sur votre site web WordPress à l'aide de ce plugin.
Étape 5 : Ajouter des liens Twitter réactifs sur votre site Web
Avec l'aide de Twitter Feed Pro, vous pouvez intégrer le contenu de Twitter sur votre site Web de deux façons :
- Ajouter des éléments Twitter réactifs sur une page web
- Ajouter des éléments Twitter réactifs dans la barre latérale ou le pied de page du site web
Ajouter des éléments Twitter réactifs sur une page Web
Le plugin étant très convivial, vous pouvez commencer à intégrer votre flux Twitter directement à partir de l'éditeur de flux en direct.
Tout d'abord, cliquez sur le bouton Embed en haut de l'éditeur.
Une fois que vous avez fait cela, le plugin vous montrera une fenêtre contextuelle avec les différentes façons dont vous pouvez intégrer les flux Twitter.
Cliquez sur le bouton Ajouter à une page de la fenêtre contextuelle pour continuer.
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.
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 (+).
En utilisant la barre de recherche en haut, cherchez le bloc "twitter feed" et cliquez sur le bloc Twitter Feed ci-dessous.
Vous verrez alors votre intégration de Twitter dans l'éditeur de WordPress.
Enfin, cliquez sur le bouton Mettre à jour, et votre flux Twitter sera en ligne.
Si vous ouvrez votre page web, vous pouvez voir à quoi ressemblent vos liens Twitter réactifs.
Comme vous pouvez le constater, Twitter Feed Pro vous permet d'afficher très facilement sur votre site Web du contenu Twitter adapté aux mobiles.
Sur ce, voyons la prochaine façon d'intégrer les flux Twitter.
Ajouter des éléments Twitter réactifs dans la barre latérale ou le pied de page du site Web
L'option suivante consiste à utiliser un widget Twitter pour afficher des tweets réactifs 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 ouvrir à nouveau un flux dans l'éditeur de flux en direct, ouvrez d'abord le menu Twitter Feed " All Feeds (Tous les flux) dans votre tableau de bord WordPress.
Ensuite, cliquez sur le flux Twitter que vous souhaitez intégrer.
Comme vous pouvez le constater, il est très facile de rouvrir un flux Twitter dans l'éditeur de flux en direct.
Cliquez ensuite sur le bouton " Embed" en haut de la page pour commencer.
Vous pouvez maintenant utiliser la fenêtre contextuelle pour créer un nouveau widget Twitter afin d'afficher des tweets réactifs.
Cliquez ensuite sur le bouton Ajouter à un widget dans la fenêtre contextuelle.
Le plugin ouvre alors la page des widgets de votre site, où vous pouvez ajouter votre widget de flux Twitter.
Une fois sur le site, vous pouvez choisir l'emplacement de vos tweets.
Si vous souhaitez afficher des liens Twitter réactifs dans la barre latérale, cliquez sur le panneau Barre latérale .
Vous pouvez également cliquer sur Footer pour commencer à afficher les tweets dans le pied de page de votre site web.
Pour cet exemple, nous utiliserons une barre latérale WordPress.
Pour ajouter un nouveau widget, cliquez sur l'icône plus (+) en bas.
Ensuite, sélectionnez le widget Twitter Feed parmi les options disponibles pour continuer.
Vous pouvez maintenant terminer l'intégration de votre flux Twitter en cliquant sur le bouton Mettre à jour.
Vous pouvez ainsi disposer d'un flux d'animations Twitter réactives dans votre barre latérale ou votre pied de page.
Et voilà !
Comme vous pouvez le constater, l'ajout d'embeds Twitter réactifs à votre site peut être très facile avec l'aide de Twitter Feed Pro.
Vous pouvez désormais afficher des tweets pertinents pour maintenir l'intérêt des visiteurs, augmenter le nombre de vos followers Twitter, accroître vos conversions, et bien plus encore.
Vous souhaitez intégrer des flux Twitter réactifs ? Cliquez ici pour obtenir 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 Twitter.
Si vous avez trouvé cela utile, pourquoi ne pas nous suivre sur Facebook et Twitter pour d'autres conseils et astuces sur les médias sociaux ?
