[Twitter] Extraire les tweets en AJAX

Le service Twitter est très pratique pour publier des courts messages. Il est entre autres utile pour la veille technologique. Parfois il se révèle intéressant de consulter les derniers messages d’un compte Twitter. Cet article présente un tutorial pour réaliser une petite application AJAX qui affiche les derniers messages d’un compte Twitter de votre choix. Cela ne se veut pas parfait, mais plutôt une introduction pour pouvoir réaliser, plus tard, de plus ample interface.

Démonstration

Le script de démonstration vous permet de tester et de visualiser ce que vous serez capable de réaliser à la fin de ce tutorial:

Prérequis

Il est recommandé d’avoir des connaissances en PHP, AJAX (Javascript) et d’avoir consulté le précédent article publié sur ce blog intitulé « [Twitter] Afficher les derniers tweets grâce à PHP« . Ce dernier, présentait un script PHP qui utilisait l’API Twitter pour afficher les derniers messages d’un compte Twitter grâce à PHP. Ce tutorial se base en grande partie sur le précédent script.

Code xHTML

La première partie de ce tutorial consiste à réaliser une page xHTML qui comporte les éléments suivants:

• Un champ de formulaire pour indiquer le nom du compte Twitter sur lequel il faudra extraire les messages
• Un bouton pour lancer le script
• Un <div> qui contient un id sur lequel le code AJAX viendra afficher les résultats.

Voici un code qui respecte les conditions annoncé ci-dessus:

<form method="post" action="" enctype="multipart/form-data">
<input type="text" name="pseudo" id="pseudo" /> <input onclick="displayTweets(pseudo.value)" type="button" value="Afficher les messages" />
</form>

<div id="afficherTweets"></div>

Il est importer de noter le nom de la futur fonction javascript displayTweets() qui est appelé en cliquant sur le bouton intitulé « Afficher les messages« .

Code Javascript

Le code javascript possède deux fonctions. La première function appelé file() est tout simplement une fonction qui permet d’ouvrir dynamiquement un fichier. La seconde n’est autre que la fonction displayTweets() présentée qui est appelé dans le code xHTML lors du clic sur le bouton.

function file(fichier)
{
 if(window.XMLHttpRequest) // FIREFOX
 xhr_object = new XMLHttpRequest();
 else if(window.ActiveXObject) // IE
 xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
 else
 return(false);
 xhr_object.open("GET", fichier, false);
 xhr_object.send(null);
 if(xhr_object.readyState == 4) return(xhr_object.responseText);
 else return(false);
}

function displayTweets(pseudo)
{
 window.document.getElementById("afficherTweets").innerHTML = "<img src=\"Loading-transparent.gif\" alt=\"icône chargement\" />"; /* Affiche une image de chargement */ 
 if (pseudo != false){ /* Si l'utilisateur à bien inscrit le nom d'un compte dans le champ du formulaire */
 var url = "afficher-tweets.php?pseudo="+pseudo; /* Le script PHP est présent sur la page afficher-tweets.php */
 var obj = file(url); /* la variable obj récupère les informations de la page afficher-tweets.php */

 window.document.getElementById("afficherTweets").innerHTML = obj; /* Affiche les tweets */
 }
 else
 window.document.getElementById("afficherTweets").innerHTML = "Erreur";
}

Note: Comme vous pouvez le voir, à un moment donné une image est affichée à l’écran. Il s’agit d’une image animée qui est affiche pendant que le script récupère les informations provenant de Twitter. Cette image est libre de droit, n’hésitez pas à la télécharger:

Code PHP

La dernière partie de ce tutorial consiste à créer le code PHP. Dans un premier temps il faut penser à créer une page PHP qui comporte le même nom que celui utilisé dans le code javascript, c’est-à-dire « afficher-tweets.php« . Comme expliqué au début de l’article, le script PHP se base en grande partie sur le code PHP qui a été réalisé sur l’article « [Twitter] Afficher les derniers tweets grâce à PHP« . De ce fait, si vous rencontré des difficultés je vous suggère de consulter l’article précédent. Voici le script PHP:

<?php
$user = htmlspecialchars($_GET["pseudo"]); /* Récupère le pseudo inscrit sur le champ du formulaire */

function parse($text)
{
 $text = preg_replace('#http://[a-z0-9._/-]+#i', '<a href="$0">$0</a>', $text);
 $text = preg_replace('#@([a-z0-9_]+)#i', '@<a href="http://twitter.com/$1">$1</a>', $text);
 $text = preg_replace('# \#([a-z0-9_-]+)#i', ' #<a href="http://search.twitter.com/search?q=%23$1">$1</a>', $text);
 return $text;
}

$count = 8;
$date_format = 'd M Y, H:i:s';
$url = 'http://twitter.com/statuses/user_timeline/'.$user.'.xml?count='.$count;

if ($XML = @simplexml_load_file( $url )){ /* Rentre dans la fonction s'il n'y a pas d'erreur lorsque les données essaient d'être récupéré */
 echo '<ul>';
 foreach( $XML->status as $Status )
 {
 $datetime = date_create($Status->created_at);
 $date = date_format($datetime, $date_format)."\n";
 echo '<li>'.parse($Status->text);
 echo ' (<a href="http://twitter.com/'.$user.'/status/'.$Status->id.'">'.$date.'</a>)</li>';
 }
 echo '</ul>';
}
?>

Il est important de remarquer que le script peut être adapté, en particulier en ce qui concerne l’xHTML et le CSS.

Télécharger le script

L’ensemble des codes présentés sur cet article peuvent être téléchargé et installé facilement sur un site web qui accepte les codes en PHP 5.

Pour l’utiliser, il faut télécharger le script, le dézipper et l’envoyer sur le site web de votre choix.