Afficher ses tweets sur son site WordPress (sans plugin)

Un jour, il faudra que je pense à renommer ce blog « utiliser WordPress sans plugin »… Parce que sur 5 articles publiés, 4 sont quand même franchement orientés… Mais bon, le sujet me plait toujours et je sais que ça peut-être sympa à partager si j’ai quelques petits trucs maisons qui tournent bien (très bien) sans avoir à faire ramer un blog et surcharger vos pages.

Bon, du coup, ce soir on va s’intéresser à l’affichage de votre timeline Twitter sans avoir à utiliser aucun plugin, ouep, c’est faisable ! J’ai galéré sur certains points, mais c’est vraiment faisable. Vous voulez une preuve ? C’est en bas de page !

Le plus grand avantage de cette manière de pratiquer, c’est que vous ne vous embêtez pas forcément à devoir utiliser l’api Twitter directe et ne pas pouvoir personnaliser la grosse boite vraiment comme vous le voulez. A noter quand même que la « box » officielle n’est quand même pas dégeu et peut convenir à pas mal de sites. La preuve sur le site de la traversée du Stick (un site d’un copain parlant de jeu vidéo ; un peu de promo ne fait pas de mal).

Ce que nous allons voir du coup, c’est comment reproduire ce que vous voyez actuellement en bas de ce site. Pour ceux qui ne veulent pas descendre, ça ressemble à ça :

Aperçu

(bon, oui, le contenu, on s’en fiche, c’est juste pour l’aperçu…)

Maintenant, la grande question est : « mais comment qu’on fait ça ? ». Et bien comme d’habitude, je vais vous répondre que c’est pas vraiment compliqué. Hop, on démarre ! La première partie va consister à appeler la fonction que nous créerons ensuite. On ne suit pas l’ordre logique des choses mais pour une seule fonction, ce n’est pas un problème. Ouvrez donc le fichier de votre thème WordPress qui vous intéresse et insérez-y la ligne suivante :

<?php echoTwitter('bardylette', 3); ?>

Ensuite, c’est parti, on commence à coder dans le fichier functions.php de notre thème.

function echoTwitter($username, $numb){
  include_once(ABSPATH.WPINC.'/rss.php');
  setlocale(LC_TIME, 'fr', 'fr_FR', 'french', 'fra', 'fra_FRA', 'fr_FR.ISO_8859-1', 'fra_FRA.ISO_8859-1', 'fr_FR.utf8', 'fr_FR.utf-8', 'fra_FRA.utf8', 'fra_FRA.utf-8');
  $tweet = fetch_rss("http://search.twitter.com/search.atom?q=from:" . $username . "&rpp=" . $numb );
  for($i = 0; $i < $numb; $i++){
    $date = html_entity_decode($tweet->items[$i]['published']);
    $date = explode("T", $date);
    $jour = strftime("%A %e %B %Y", strtotime($date[0]));
    echo "<p class='tweet'><i>@<a href='http://twitter.com/bardylette'>Bardylette </a><span>le " . $jour . " :</span></i><br>" . html_entity_decode( $tweet->items[$i]['atom_content'] )  . "</p>";
  }
}

Héé, partez pas ! J’ai dit que c’était simple, et je vous jure que ça l’est… Le plus compliqué, c’est sans doute le tout début. On va analyser ça ligne par ligne, vous allez comprendre.

Déjà, on créé une fonction (appelons là echoTwitter). C’est une fonction à laquelle on passera deux paramètres. Le premier sera l’utilisateur twitter. Celui que vous pouvez afficher si vous tentez d’accéder à l’adresse http://twitter.com/utilisateur. Le deuxième paramètre, c’est le nombre de tweets que vous voudrez récupérer. J’ai tablé ici sur 3 pour refaire ce que j’ai fait sur mon propre site. A vous d’adapter bien entendu. Jusque là vous suivez ?

Les deux lignes suivantes sont les plus complexes quoi que pas véritablement… La première indique que l’on a besoin d’un fichier inclus dans notre dossier WordPress wp-includes. Nous aurons besoin pour la suite du tutoriel (d’ici deux trois lignes) d’une fonction très utile vous allez voir.

La ligne suivante, pour rappel celle-ci :

setlocale(LC_TIME, 'fr', 'fr_FR', 'french', 'fra', 'fra_FRA', 'fr_FR.ISO_8859-1', 'fra_FRA.ISO_8859-1', 'fr_FR.utf8', 'fr_FR.utf-8', 'fra_FRA.utf8', 'fra_FRA.utf-8');

Cette fonction setlocale va être en fait ce qui va nous permettre de faire comprendre que nous voulons afficher la date en français. Par défaut, elle est configurée en anglais. Ici, je donne énormément de « normes » françaises parce que tous les serveurs, distributions linux, unix, mac OS et versions de Windows ne possèdent pas la langue française intitulée de la même façon. Je sais pas si j’arrive à être assez clair (?). Avec cette fonction, vous allez pouvoir jouer avec la date, l’heure, la monnaie, les chaines de caractères et bien d’autres paramètres inutiles à lister ici. Si vous voulez en savoir plus, le mieux est encore de vous donner un lien vers la documentation officielle.

Concernant la ligne suivante, nous allons faire simple. Lorsque vous publiez un tweet, celui-ci est « enregistré » dans un grand arbre xml. Notre objectif à nous va être de parcourir cet arbre pour en récupérer 3 itérations. Nous voulons en effet récupérer nos trois derniers tweets. Le grand avantage, c’est qu’en cherchant (pas longtemps), on finit par très vite trouver ce que l’on veut. Par exemple, si je veux récupérer mes trois derniers tweets, je devrais posséder l’url suivante :
http://search.twitter.com/search.atom?q=from:bardylette&rpp=3
Rien de complexe, si ? L’avantage étant qu’ici, nous rendons tout cela un peu plus dynamique en offrant la possibilité de spécifier directement l’utilisateur et le nombre de tweets à récupérer dans les paramètres de notre fonction.

La suite, c’est une simple boucle qui va parcourir le nombre de tweets souhaités :

  for($i = 0; $i < $numb; $i++){
    $date = html_entity_decode($tweet->items[$i]['published']);
    $date = explode("T", $date);
    $jour = strftime("%A %e %B %Y", strtotime($date[0]));
    echo "<p class='tweet'><i>@<a href='http://twitter.com/bardylette'>Bardylette </a><span>le " . $jour . " :</span></i><br>" . html_entity_decode( $tweet->items[$i]['atom_content'] )  . "</p>";
  }

Avant de comprendre ce code, je pense que vous montrer à quoi ressemble la structure d’un tweet dans notre fichier xml est de mise.

<entry>
    <id>tag:search.twitter.com,2005:321321248745484289</id>
    <published>2013-04-08T17:58:50Z</published>
    <link type="text/html" href="http://twitter.com/Bardylette/statuses/321321248745484289" rel="alternate"/>
    <title>@BlastAndCo Question d&#x2019;habitude aussi je pense mais sans doute un peu oui =)</title>
    <content type="html">@&lt;a class=" " href="https://twitter.com/BlastAndCo"&gt;BlastAndCo&lt;/a&gt; Question d&#x2019;habitude aussi je pense mais sans doute un peu oui =)</content>
    <updated>2013-04-08T17:58:50Z</updated>
    <link type="image/png" href="http://a0.twimg.com/profile_images/1695163054/Piou_piou_web_normal.png" rel="image"/>
    <twitter:geo></twitter:geo>
    <twitter:metadata>
        <twitter:result_type>recent</twitter:result_type>
    </twitter:metadata>
    <twitter:source>&lt;a href="http://tapbots.com/software/tweetbot/mac"&gt;Tweetbot for Mac&lt;/a&gt;</twitter:source>
    <twitter:lang>fr</twitter:lang>
    <author>
        <name>Bardylette (Mathieu Menut)</name>
        <uri>http://twitter.com/Bardylette</uri>
    </author>
</entry>

Ouais, comme vous le constatez, il y a en effet pas mal d’informations vraiment inutiles. Pas la peine de nous attardez dessus. Je préfère vous prévenir de suite, nous, nous ne nous intéresserons qu’à la balise pour récupérer la date de publication du tweet et bien entendu

$date = html_entity_decode($tweet->items[$i]['published']);

Si vous tentez de l’afficher vous devriez vous retrouver avec un affichage bizarre… Essayez un echo sur votre variable $date, vous verrez, c’est assez moche :
2013-04-08T17:58:50Z.
Et bien tant pis, on va quand même partir de ça. Pour rappel à la fin, cette date sera affichée comme ceci :
lundi 8 avril 2013

La première chose à faire, c’est de découper notre variable $date en deux au niveau du caractère T. C’est la fonction de la… fonction explode. Notre variable $date se retrouve donc transformée en un tableau contenant deux membres : $date[0] contient 2013-04-08 et $date[1] contient ce qui ne nous servira plus ici.
Tout de suite, il devient plus intéressant de travailler avec ce format puisqu’il s’agit du format de date « standard » en php que nous allons pouvoir traiter dès à présent !

$jour = strftime("%A %e %B %Y", strtotime($date[0]));

Vous vous souvenez que nous avons voulu utiliser le français pour notre date ? Et bien c’est ici que cela va nous servir. Si nous avions voulu afficher la date traditionnellement avec des mots anglais pour le jour de la semaine et le mois, nous aurions écrit tout bêtement ceci :

$jour = date("l j F Y", strtotime($date[0]));

Notre avantage, c’est que nous pouvons directement afficher cela en français ! Magie ! N’hésitez surtout pas à faire des echo de vos variables pour voir à quoi ça ressemble.

Et une fois que l’on a ça ? Et bien plus qu’à afficher tout ça avec le contenu bien entendu. C’est le rôle de la dernière ligne que je ne pense pas avoir besoin de commenter vu que c’est le même principe que précédemment.

Et du coup voila, vous avez de quoi faire quelque chose d’assez sympathique déjà non ? Ha… vous en voulez encore un peu parce que vous avez vu que j’arrivais à afficher le nombre de followers que j’avais ? Et bien ça sera l’objet du prochaine tutoriel mais qui sera sans doute un chouïa plus complexe. J’en profiterais pour vous montrer pas mal de petites choses et vous verrez que finalement, la box toute faite de Twitter n’a plus vraiment d’intérêt à partir du moment où l’on sait trouver et récupérer ce que l’on cherche.

A la prochaine !

Envie de partager cet article ? Google+

Date de sortie : 8 avril 2013
Auteur : Bardyl
Consultations : 3102
Commentaires : 0
Catégorie : Développement

Bardyl, une histoire de pousin.

Poussin de son état, Mathieu Menut (alias Bardyl ou Bardylette suivant les lieux) est un simple passionné du Web depuis de nombreuses années. Mathieu aime tout ce qui attrait au développement, au graphisme, référencement... Il s'intéresse à plus ou moins tout et prône la généralisation des 35 heures par jour.

Twitter : @Bardylette / web : menutmathieu.fr