Vos derniers tweets sur WordPress | Widgets Twitter

Afficher vos derniers tweets dans WordPress avec les Widgets Twitter
Posté par Jérôme le dans Tutoriels, WordPress6 commentaires | 15 952 vues

Depuis la version 1.1 de l’API Twitter, il est devenu très simple d’afficher ses derniers tweets sur son blog WordPress grâce aux widgets Twitter. Voici donc un petit tutoriel qui permet de créer un widget Twitter, puis de l’insérer dans notre blog WordPress, et enfin de rendre l’affichage plus sympa grâce aux nouveaux paramètres proposés par Twitter.

Création d’un widget

Tout d’abord, ouvrez votre compte Twitter, cliquez sur le pictogramme en forme d’engrenage et cliquez sur l’onglet paramètres.

Tuto Widget Twitter pour WordPress

Dans la sidebar de gauche, cliquez sur l’onglet Widgets se situant tout en bas de la liste.

Tuto Widget Twitter pour WordPress

Puis cliquez sur Créer un nouveau.

Tuto Widget Twitter pour WordPress

Le Widget Twitter permet d’afficher vos tweets les plus récents, vos favoris, vos listes, mais aussi des tweets issus d’une recherche par hashtag. Pour ce tutoriel, j’ai choisi d’afficher les tweets contenant le hashtag #graphisme. Vous pouvez évidemment personnaliser l’affichage des tweets grâce aux différentes options proposées. Une fois votre widget prêt, cliquez sur créer un widget.

Tuto Widget Twitter pour WordPress

Votre widget est maintenant créé, comme l’indique l’interface de Twitter. Avant de sauvegarder vos modifications, copiez le code ci-dessous :

<a class="twitter-timeline" href="https://twitter.com/search?q=%23graphisme" data-widget-id="350289975096528896">Tweets concernant "#graphisme"</a>

<script>!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");</script>

Puis, cliquez sur le bouton sauvegardez les modifications. Twitter vous indique que votre widget a été enregistré et que les changements pourraient mettre quelques minutes à apparaître.

Tuto Widget Twitter pour WordPress

Vous êtes maintenant prêt à insérer votre widget dans WordPress.

Insertion du code dans notre blog

Rien de plus simple, il vous suffit de coller le code précédemment copié et de l’insérer dans votre template WordPress, à l’endroit où vous souhaitez afficher votre widget. Dans votre fichier sidebar.php par exemple.

Ci-dessous, vous pouvez ‘admirer’ le résultat.

Tuto Widget Twitter pour WordPress

Le résultat n’est pas franchement convaincant. Par défaut, le widget affiche des bordures, une barre de scroll vraiment laide. Nous allons arranger cela grâce aux paramètres proposés par Twitter.

Utiliser les paramètres pour affiner l’affichage

Toutes les informations concernant le widget sont disponibles sur le site de Twitter destiné aux développeurs

En ce qui nous concerne, c’est l’attribut data-chrome qui va nous intéresser pour personnaliser notre widget.

Les nouveaux paramètres sont :

  • noheader : supprime l’entête du widget.
  • nofooter : supprime le footer du widget.
  • noborders : supprime toutes les bordures.
  • transparent : supprime la couleur de fond du widget en la rendant transparente.
  • noscrollbar : supprime la barre de scroll.
data-chrome="noheader noscrollbar nofooter noborders transparent"

Nous allons donc insérer ces paramètres dans le lien de notre widget.

<a data-chrome="noheader noscrollbar nofooter noborders transparent" href="https://twitter.com/search?q=%23graphisme" data-widget-id="350289975096528896">Tweets concernant "#graphisme"</a>

Une fois actualisé, votre widget devrait ressembler à quelque chose comme cela :

Tuto Widget Twitter pour WordPress

Voilà, nous arrivons à la fin de ce tutoriel. J’espère qu’il vous aura été utile. À très bientôt !

Source :
TweetPress par Julien Maury
https://dev.twitter.com

Recommandez ce contenu sur Google

Adresse de trackback pour cet article

Laisser un commentaire. | Faire un trackback. | Permalien | Lien court : http://bsqi.fr/13alUV3

À propos de Jérôme

Graphiste Freelance. Plaide coupable, La Marée, les biscuits, c'est lui. Trouve intéressant de partager avec vous ses geekeries, ses trouvailles, ses sources d'inspirations et ses lubies musicales.

Voir ses 21 articlesSon compte twitterGoogle+

6 commentaires sur Vos derniers tweets sur WordPress | Widgets Twitter

  • Léa, le 30 Sep 2013 à 16 h 25 min

    Bonjour,

    J’ai installé le widget Twitter mais ce message s’affiche sur mon blog :
    « Hmm, un fil d’actualités vide. C’est bizarre. »

    Savez-vous pourquoi ? Pourtant, j’ai effectué des Tweets…

    Je vous remercie.

    • Jérôme, le 30 Sep 2013 à 16 h 39 min

      Bonjour Léa,

      Il s’agit de votre blog ? Si oui, je vois bien le fil d’actualité Twitter 😉

  • Thomas, le 07 Nov 2013 à 11 h 41 min

    Bonjour, merci pour ce tuto très simple et bien fait !

    Savez vous comment modifier la largeur de ce widget ?

    J’ai essayé des width: valeur; mais ça ne marche pas.

    Merci beaucoup !

    • Jérôme, le 07 Nov 2013 à 12 h 16 min

      Merci Thomas, content que ce tuto ait pu t’aider.
      Concernant les dimensions largeur ou hauteur, c’est expliqué à l’adresse suivante :

      https://dev.twitter.com/docs/embedded-timelines#dimensions

      En gros, le widget s’adapte à la taille de son conteneur (div par exemple). En changeant la largeur du conteneur, tu change la largeur du widget. Après tu peux également jouer sur les propriétés max-width; et min-width; dans ta feuille de style :

      iframe { 
      max-with: 100%; /* 100% de la largeur de son conteneur*/
      min-with: 200px;
      } 
      

      En espérant que cela t’aide.
      À bientôt !

  • Johne876, le 08 Juil 2015 à 0 h 12 min

    I simply couldn’t depart your web site prior to suggesting that I actually loved the usual info a person supply for your guests? Is gonna be again continuously in order to check up on new posts.

  • CleverSMS Light, le 23 Fév 2016 à 15 h 13 min

    Merci pour votre post, je pense que celui va m’aider dans ma recherche et utilisation de mon compte twitter @cleversmslight

Commentez cet article !

Les champs munis d'une * sont obligatoires.