PHP : Afficher vos tweets sur votre site web

28 mai 2012 rdorigny 0 commentaires

Cet article est obsolète, il y a une mise à jour qui est disponible via http://www.doritique.fr/Articles/View_Article.php?num_article=36

Est-il possible d'afficher des messages twitter (tweets) sur un site web?

Oui, le site Twitter propose tout ce qu'il faut ou presque... Twitter consacre même un site web dédié aux développeurs via https://dev.twitter.com/. Le site est assez complet avec pas mal d'exemples, maintenant pas évident de s'y retrouver et de comprendre sa structure. Bref, j'ai un peu galéré.

En fait, Twitter fournit aux développeurs une API très puissante permettant de requêter "under control" sur sa base de données. Notamment, l'API fournit un service web de type REST et renvoie des réponses en utilisant JSON. On retrouve un peu la même architecture que celle de google avec la Custom Search API.

REST - JSON, KESAKO?

REST (REpresentational State Transfer) est un type d'architecture que l'on utilise de plus en plus pour réaliser un service web. Il est plus simple à mettre en oeuvre que SOAP mais n'est pas définit précisément par un standard. REST est basé sur des requêtes transmises par des protocoles standards (http, ftp, ...), il renvoie un fichier souvent au format XML ou JSON.

JSON (JavaScript Object Notation) est un format de structuration des données. Les données sont considérées comme des objets avec des propriétés et sous-propriétés. Ce formalisme est assez proche de XML et est basé sur le langage javascript. Une page sur Wikipedia résume très bien JSON. A noter que Google utilise ce formalisme avec ses web applications.

Fonctionnement de l'API de twitter:

Aprés avoir lu la documentation du site dédié aux développeurs, j'ai donc opté pour utiliser le web service REST de Twitter. Comme je l'ai précisé ci-dessus, REST répond à des requêtes http, il suffit de suivre la documentation de Twitter pour choisir les options qui nous conviennent. Le service web REST de Twitter répondera en transmettant un fichier au format JSON.
Vous pouvez faire un test avec un navigateur de votre choix en tapant l'url (il vous faudra préciser votre login à la place du mien) : http://api.twitter.com/1/statuses/user_timeline.json?screen_name=rdorigny&count=1

Le navigateur vous proposera d’enregistrer le fichier user_timeline.json. Si on enregistre le fichier et qu'on l'édite alors ce donne:

[{"created_at":"Sat May 12 19:42:41 +0000 2012","id":201397001726853120, "id_str":"201397001726853120", "text":"Galaxy Note : Android 4.0 en cours de du00e9ploiement http://t.co/5kIVDkaA", "source":"u003ca href="http://twitter.com/tweetbutton" rel="nofollow"u003eTweet Buttonu003c/au003e", "truncated":false,"in_reply_to_status_id":null, "in_reply_to_status_id_str":null, "in_reply_to_user_id":null, "in_reply_to_user_id_str":null, "in_reply_to_screen_name":null, "user":{"id":575562384, "id_str":"575562384","name":"Robert DORIGNY", "screen_name":"rdorigny", "location":"Montigny le bretonneux", "description":"Passionnu00e9 d'informatique, suivez moi sur www.doritique.fr .", "url":"http://www.doritique.fr", "protected":false, "followers_count":3, "friends_count":1, "listed_count":0, "created_at":"Wed May 09 16:14:41 +0000 2012","favourites_count":0, "utc_offset":null, "time_zone":null, "geo_enabled":false, "verified":false, "statuses_count":6, "lang":"fr", "contributors_enabled":false, "is_translator":false, "profile_background_color":"C0DEED", "profile_background_image_url":" http://a0.twimg.com /images/themes/theme1/bg.png", "profile_background_ image_url_https": "https://si0.twimg.com / images/themes/theme1/bg.png", "profile_background_tile":false, "profile_image_url": " http://a0. twimg.com/profile_images /2204673538/ logodoritique_normal.png", "profile_image_url_https":"https: //si0.twimg.com /profile_images/ 2204673538/logodoritique_normal.png", "profile_link_color ": "0084B4","profile _sidebar_border_color":"C0DEED", "profile_sidebar_fill _color":"DDEEF6", "profile_ text _colo r":"333333" ,"profile_us e_backgroun d_image":true, "show_all_inl ine_media ":false,"d efault_pro file":true, "default_profile_image":false, "followin g":null, "follow_reque st_sent":null, "notifications":n ull}, "geo":null,"c oord inates":null, "place":null,"contributors":null, "retweet_count":0,"favorited":false, "retweeted":false,"possibly_sensitive":false}]

Le fichier JS est en vrac mais on retrouve le texte du tweet avec la variable text codé en UTF8, le tout noyé dans beaucoup d'informations complémentaires.

Comment faire cela?

Il s'agit donc d'exploiter le service web, deux solutions sont possibles :
  • le navigateur client réalise l'échange avec javascript
  • Le serveur récupéré les données et les transmets au client

  • J'ai choisit la seconde solution, plus simple à réaliser car le code javascript coté client est assez difficile à produire et à maintenir pour un grand nombre de navigateurs.

    Par ailleurs, PHP propose la fonction json_decode qui transforme le code JSON en un objet, ainsi que la fonction utf8_decode. Ces deux fonctions vont grandement simplifier le script PHP.

    Donc un exemple de code PHP pour afficher vos tweets :

    function Affich_Tweets($login,$nb_tweets) { //Récupération du fichier JSON suite à une requête sur le service web $url='http://api.twitter.com/1/statuses/user_timeline.json?screen_name='.$login.'&count='.$nb_tweets; $data = file_get_contents ($url,FILE_USE_INCLUDE_PATH); $tweets = json_decode($data); $format="d M Y"; //Affichage des tweets print(" <div> <h3>Tweets récents</h3> <ul>"); foreach ($tweets as $tweet) { $date = date_format (date_create($tweet->created_at), $format); print("<li>".utf8_decode($tweet->text)." <a href='https://twitter.com/".$login."'>".$date."</a></li>"); } //Affichage du bouton twitter de suivi pour votre profil print(" </ul> </div> <div> <a href='https://twitter.com/".$login."' class='twitter-follow-button' data-show-count='true' data-lang='fr'>Suivre @".$login."</a> <script> !function(d,s,id) { var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)) { js=d.createElement(s); js.id=id;js.src='//platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js,fjs); } } (document,'script','twitter-wjs'); </script> </div>"); }

    En fin de script, vous trouverez ce qu'il faut faire pour afficher un bouton de suivi Twitter.




    Pseudonyme (obligatoire) :
    Adresse mail (obligatoire) :
    Site web :




    © 2017 www.doritique.fr par Robert DORIGNY