Twitter, widget, API, OAuth – Créer un widget List puis récolter en JSON, l’activité de plusieurs comptes Twitter à l’aide de l’API Twitter et de l’authentification OAuth
Comme souvent, un client peut vous demander des comportements assez sophistiqués concernant le monitoring de sa présence sur un réseau tel que Twitter
. Par exemple, vous pourriez être amené(e) à devoir trouver une solution facile pour rapatrier exclusivement des tweets issus d’une liste de comptes twitter spécifiques. Bien sûr, il existe pour répondre à ce besoin fonctionnel des widgets à votre disposition depuis votre compte Twitter. Dans notre exemple, un widget List
conviendrait assez au besoin fonctionnel. Toutefois, les évolutions fonctionnelles ou les possibilités de personnalisation dans la mise en forme de cette liste restent limitées. Evidemment ces deux écueils peuvent vous poser à terme un problème au risque de ne pas satisfaire le besoin fonctionnel du client ou le rendu qui vous est imposé par le graphisme.
C’est donc à ces limites que l’on va s’attaquer dans le présent article tout en conservant le recours au widget twitter car on peut pas trouver de meilleur UX en matière d’édition et de gestion…
Pour illustrer notre propos, on va donc créer un widget list sur un compte twitter puis récupérer à l’aide d’un flux JSON et de l’authentification OAuth les données issues de ce widget mais dépolluer de tous les éléments dont on ne veut pas comme la mise en forme…etc. pour pouvoir ultérieurement faire évoluer ce produit à notre guise tant d’un point de vue fonctionnel que graphique.
Créer un widget list sur twitter
La procédure est très simple, en voici les principales étapes.On va sélectionner deux comptes twitter puis on va les placer dans un widget.
Une liste de 2 comptes twitter (troiswdoc_hecube_list) :
- @3wdoc
- @HECUBE_NET
Créer un widget de list dans votre compte Twitter
Il faudra bien conserver en tête le nom de votre widget. Dans notre exemple, notre widget se nomme troiswdoc-hecube-list
. C’est cette
Les OAuth settings
de votre application app-parse-list-widget
. Ces paramètres résument toutes les informations dont vous aurez besoin pour vous connecter via OAuth
à votre application Twitter. Bien évidemment, les clés données ci-dessous ne sont présentées qu’à titre d’exemple, notamment les permission d’accès.
Les paramètres OAuth de votre application Twitter
- Consumer key: * IhivoXX896laQqT22CL7kQ
- Consumer secret: * AxvM7x2fK5Ppkly4XSGzJfuQUe3uC0VcY9VJvqPcA
- Access token: * 32123456-PsLXOEvth8Ny0tSa2UsaZXe8o6D3DaG0s50pDecoL
- Access token secret: * Py7Sipi1Bs0bByakACjA3QF2AXo7fAtr7gx6qsP7R72
Il faut rendre public le widget de sorte que vous puissiez obtenir la possibilité de faire des requêtes. Pour se faire, il faut Cliquer sur Public lors de la création de votre application sur Twitter.
Les paramètres à compléter pour faire fonctionner l’Authentification OAuth
pour votre application Twitter
define('_TWITTER_USER_', 'bflaven'); define('_NB_TWEETS_', '1'); define('_CONSUMER_KEY_', 'IhivoXX896laQqT22CL7kQ'); define('_CONSUMER_SECRET_', 'AxvM7x2fK5Ppkly4XSGzJfuQUe3uC0VcY9VJvqPcA'); define('_ACCESS_TOKEN_', '32123456-PsLXOEvth8Ny0tSa2UsaZXe8o6D3DaG0s50pDecoL'); define('_ACCESS_TOKEN_SECRET_', 'Py7Sipi1Bs0bByakACjA3QF2AXo7fAtr7gx6qsP7R72'); define('_OAUTH_CALLBACK_', 'http://flaven.fr'); |
Créer une app du coté de chez Twitter
Une fois la procédure de création terminée, il reste à prendre le nom du widget.
Dans le code embed donné par Twitter, vous avez le nom de votre widget ex troiswdoc-hecube-list
<a class="twitter-timeline" href="https://twitter.com/bflaven/troiswdoc-hecube-list" data-widget-id="392871243596062720">Tweets from @bflaven/troiswdoc-hecube-list</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> |
Le fichier grab_tweets_from_widget_list_with_twitteroauth.php
, comme le nom du fichier l’indique ce fichier permet de récupérer les tweets d’un widget list créé sous Twitter
<?php session_start(); /* Path to twitteroauth library */ /* Put the OAuth.php and twitteroauth.php in the correct directory for /twitteroauth/ */ require_once("twitteroauth/twitteroauth.php"); /** * @file * A single location to store configuration. */ /* Replace by your own data */ define('_TWITTER_USER_', 'bflaven'); define('_NB_TWEETS_', '1'); define('_CONSUMER_KEY_', 'IhivoXX896laQqT22CL7kQ'); define('_CONSUMER_SECRET_', 'AxvM7x2fK5Ppkly4XSGzJfuQUe3uC0VcY9VJvqPcA'); define('_ACCESS_TOKEN_', '32123456-PsLXOEvth8Ny0tSa2UsaZXe8o6D3DaG0s50pDecoL'); define('_ACCESS_TOKEN_SECRET_', 'Py7Sipi1Bs0bByakACjA3QF2AXo7fAtr7gx6qsP7R72'); define('_OAUTH_CALLBACK_', 'http://flaven.fr'); /* Widget name */ /* Replace by your own widget */ define('_TWITTER_WIDGET_SLUG_', 'troiswdoc-hecube-list'); /* VALUES */ $twitteruser = ''._TWITTER_USER_.''; $notweets = ''._NB_TWEETS_.''; $consumerkey = ''._CONSUMER_KEY_.''; $consumersecret = ''._CONSUMER_SECRET_.''; $accesstoken = ''._ACCESS_TOKEN_.''; $accesstokensecret = ''._ACCESS_TOKEN_SECRET_.''; function getConnectionWithAccessToken($cons_key, $cons_secret, $oauth_token, $oauth_token_secret) { $connection = new TwitterOAuth($cons_key, $cons_secret, $oauth_token, $oauth_token_secret); return $connection; } $connection = getConnectionWithAccessToken($consumerkey, $consumersecret, $accesstoken, $accesstokensecret); /* Check out the widget */ /* Be sure to use the correct slug eg troiswdoc-hecube-list */ $tweets = $connection->get('https://api.twitter.com/1.1/lists/members.json?slug='._TWITTER_WIDGET_SLUG_.'&owner_screen_name='._TWITTER_USER_.''); /* FOR DEBUG ONLY */ // print_r($tweets); /* DECODE JSON */ $json = json_encode($tweets); $json = json_decode($json, true); /* Print out parsing the needed values sent back by the json of Twitter */ for ($i = 0; $i <= count($json); $i++) { $tweet = $json['users'][$i]["status"]["text"]; echo (''.$tweet.''); echo ('<br/>'); } ?> |
En savoir plus
- How to Add OAuth Authentication to Your Twitter App
http://www.sitepoint.com/twitter-1-1-oauth-php/ - The first PHP Library to support OAuth for Twitter’s REST API
https://github.com/abraham/twitteroauth - La documentation sur l’API 1.1 de Twitter
https://dev.twitter.com/docs/api/1.1/ - 25 Useful jQuery Plugins to Integrate Twitter into Websites with ease
http://www.tripwiremagazine.com/2010/08/25-useful-jquery-plugins-to-integrate-twitter-into-websites-with-ease.html - Creating a Custom jQuery Twitter Feed
http://www.webdevdoor.com/javascript-ajax/custom-twitter-feed-integration-jquery/ - Setting up Twitter API, getting the last few Tweets
http://stackoverflow.com/questions/17049821/setting-up-twitter-api-getting-the-last-few-tweets - How to Create an Advanced Twitter Widget
http://net.tutsplus.com/tutorials/php/how-to-create-an-advanced-twitter-widget/ - 25 Twitter Apps to Manage Multiple Accounts
http://mashable.com/2009/05/18/twitter-apps-manage-multiple-accounts/ - want to show tweets from multiple username in my site.. how can we do that. Everytime user opens my home page i want to show them tweets from mulitple acocunts i have a list of those accounts
https://dev.twitter.com/discussions/3300 - I’m having trouble with lists – Twitter
https://support.twitter.com/articles/20169276 - Votre page de gestion de Widgets sur Twitter
https://twitter.com/settings/widgets - Embedded Timelines de Twitter
https://dev.twitter.com/docs/embedded-timelines - How to Create Your Own Twitter Widget in PHP, Part 1
http://www.sitepoint.com/create-your-own-twitter-widget-1/ - Twitter Post Fetcher – compiled – CodePen
http://codepen.io/jasonmayes/pen/Ioype - Create A Dead Simple Twitter Feed with jQuery
http://www.queness.com/post/8567/create-a-dead-simple-twitter-feed-with-jquery - 4 Ways to Retrieve a Twitter List Timeline
http://blog.wyeworks.com/2010/2/1/4-ways-to-retrieve-a-twitter-list-timeline/ - Display your Favorite Tweets using PHP and jQuery (Updated)
http://tutorialzine.com/2011/08/display-favorite-tweets-php-css/ - Streaming message types de Twitter
https://dev.twitter.com/docs/streaming-apis/messages