Comment intégrer des tweets dans un site WordPress ?

Comment intégrer des tweets dans un site WordPress ?

Publié le 3 février 2018

Vous souhaitez animer votre site WordPress en intégrant des données Twitter ? Naturellement, le thème que vous utilisez propose peut-être un widget Twitter , dans ce cas, vous n’aurez qu’à saisir votre nom d’utilisateur Twitter pour afficher vos derniers tweets. Si ça n’est pas le cas ou si vous avez besoin de plus, Twitter vous propose une foule de possibilités, des widgets faciles à intégrer. Il serait donc dommage de télécharger un plugin pour ça ! En effet, rappelez-vous que les plugins sont toujours des failles de sécurité potentielles donc dès qu’on peut s’en passer, on le fait !

Nous allons étudier ensemble les différents widgets Twitter disponibles et vous montrer comment les intégrer.

 

Les widgets Twitter

Pour visualiser les différents widgets de Twitter, connectez-vous sur la page des widgets Twitter. Si vous passez votre souris sur le bouton « Créer un widget », une liste déroulante apparaît avec les items suivants :

    • Profil : affiche les derniers tweets d’un utilisateur
    • J’aime : affiche des boutons Twitter
    • Liste : affiche une liste twitter
    • Collection : affiche une sélection de tweets, sélection qu’il faut créer via TweetDeck ou directement via l’API Twitter.
    • Recherche : affiche des tweets liés à un hashtag

Yes You Web - Widgets Twitter

 

Les présentations de widgets

Vous pouvez croiser ces widgets avec un type de présentation :

  • Grille : affiche les derniers tweets d’un utilisateur
  • Tweet unique : affiche des boutons Twitter
  • Timeline : affiche une liste twitter
  • Boutons : il existe différentes possibilités

Yes You Web - intégrer tweets site WordPres

 

Les boutons Twitter

Choisissez le bouton qui vous convient :

  • Share : permet de partager un contenu
  • Follow : permet d’inciter à suivre un utilisateur
  • Mention : permet de commencer une conversation depuis votre site
  • Hashtag : permet de rejoindre une conversation spécifique sur Twitter
  • Message : permet d’envoyer un message privé à un utilisateur Twitter

Yes You Web - intégrer tweets site WordPres

 

Intégrer les widgets

Une fois que vous avez sélectionné votre widget dans la liste déroulante, 2 options s’offrent à vous :

  • Copier l’URL du compte / tweet / collection / liste… que vous voulez intégrer : Twitter vous proposera alors les présentations compatibles avec cette URL.
  • Vous rendre juste en dessous pour commencer par choisir la présentation puis entrez l’URL. Si cette dernière n’est pas compatible avec la présentation, Twitter va vous le signaler.

Twitter vous affiche donc un aperçu du rendu de votre URL avec la possibilité de copier le code « Copy Code » ou de personnaliser le widget « set customization options ».

Yes You Web - intégrer tweets site WordPres

Le widget vous convient tel quel

Dans ce cas, cliquez sur le bouton « Copy Code ». Allez ensuite dans votre site WordPress, dans apparence / widgets, sélectionnez le bloc « Html personnalisé » et glissez-le dans la sidebar qui vous concerne et collez le code.

Yes You Web - intégrer tweets site WordPres

Le widget ne vous convient pas tel quel

Dans ce cas, cliquez sur le lien « set customization options ». Une fenêtre s’ouvre avec différentes possibilités : vous pouvez choisir la hauteur du widget, sa largeur, la couleur de fond (claire / foncée), la couleur des liens et la langue.

Yes You Web - intégrer tweets site WordPres

Choisissez vos paramètres, mettez à jour et copier le nouveau code grâce au bouton « Copy Code ». Intégrez ce code dans WordPress comme nous venons de le voir.

 

Personnalisation avancées

Si ces options de personnalisations ne vous conviennent pas, Twitter vous en propose d’autres. Vous pouvez consulter la documentation Twitter pour les développeurs.

Nous, nous utilisons la variable data-chrome qui comprend plusieurs attributs :

  • noheader : permet de masquer le header du widget
  • nofooter : permet de masquer le footer du widget
  • noborders : permet de retirer toutes les bordures du widgets, ainsi que le trait qui sépare les tweets
  • noscrollbar : permet de masquer les barres de défilement (ascenseur)
  • transparent : permet de retirer la couleur de fond du widget et ainsi s’adapter à votre site si vous avez un fond de couleur.

Votre code devient alors le suivant :

<a class="twitter-timeline" 
data-chrome="noheader nofooter"
href="https://twitter.com/xxx">Tweets by xxx</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Plutôt que de jouer sur la hauteur, nous utilisons aussi souvent data-tweet-limit qui permet de limiter le nombre de tweets. Bien sûr, tous ces critères de personnalisation peuvent se combiner. Le code peut alors devenir :

<a class="twitter-timeline" 
data-chrome="transparent"
data-tweet-limit="3"
href="https://twitter.com/xxx">Tweets by xxx</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

Conclusion

Voilà, vous voyez que ça n’est pas sorcier et nous espérons que cet article vous aura été utile.
Si cet article vous a plu, vous pouvez le partager sur les réseaux sociaux.
Si vous avez des questions, posez-les en commentaires ci-dessous. N’hésitez pas à partager vos propres retours d’expérience !

imprimer
Marine LE GUERNIGOU

Marine LE GUERNIGOU

Consultante web freelance, plus de 15 ans d'expérience en webmarketing, mon objectif est de rendre la vie de mes clients plus simple ! Pour chaque problématique étudiée, je partage avec vous le résultat de mon analyse, en espérant que cela vous serve aussi...
Marine LE GUERNIGOU

2 Avis

  1. Marcelle NG 1 mois ll y a

    Merci je cherchais depuis des jours comment limiter le nombre de tweets .. Merci!!

    • Auteur
      Marine LE GUERNIGOU 1 mois ll y a

      Nous sommes ravis d’avoir pu aider 😉

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.