Cet article va présenter une petite application Twitter permettant de récupérer les tweets d'un compte et d'y afficher - si disponible - les petites discutions entre utilisateurs. Les fichiers du script peuvent être téléchargés (voir à la fin de cet article) et installer sur un hébergement web assez facilement. De ce fait, tout le monde peut avoir son propre petit lecteur de Tweets utilisant AJAX.

Logo de Twitter

Logo de Twitter

Prérequis

Pour comprendre le code source de ce script il est recommandé d'avoir consulté l'article intitulé "extraire les tweets en AJAX" car le code présenté ici est basé en grande partie sur ce précédent script. La principale différence c'est que le lecteur de tweets de cet article récupère des messages supplémentaires. Lorsque sur Twitter un utilisateur répond à quelqu'un, ce script récupère l'autre message pour mieux comprendre le contexte de la réponse.

En raison de la longueur du fichier PHP (environ 100 lignes) le code ne sera pas détaillé sur cet article. Les principales difficultés comprises dans le code PHP ont par ailleurs déjà été expliquées dans des articles précédents.

Télécharger les fichiers de ce script

Pour réaliser ce petit lecteur de tweets il faut 6 fichiers, incluant une page html, un fichier PHP, un fichier javascript et un fichier CSS pour donner un petit design à l'application. Le fichier compressé de l'application fait 6Ko et peut être téléchargé grâce au bouton ci-dessous.

L'installation est assez simple, il suffit de télécharger les fichiers, les décompresser et les envoyer sur un espace d'hébergement.

Avec la popularisation de Twitter, il n'y a jamais eu autant de services en ligne permettant de raccourcir les URL. Très pratique lorsqu'il s'agit d'économiser de la place dans un tweet, ces URL possèdent néanmoins un gros défaut: il n'est pas possible de savoir avec précision où l'URL emmène. Pour résoudre cette problématique, ce tutorial présente un script AJAX qui permet de dé-raccourcir une URL.

Présentation

Une page d'exemple est disponible. Notez toutefois que le script n'a pas été testé avec tous les services permettant de raccourcir une URL. Il fonctionne uniquement sur les raccourcisseurs d'URL qui font des redirections 301 ou 302 (redirection Javascript pas prise en compte par le script).

Prérequis

Il est préférable d'avoir des connaissances en AJAX pour pouvoir comprendre le script. Cependant en connaissant uniquement le PHP, il est possible de comprendre à peu près le script. Dans les archives de ce blog il est possible de découvrir des tutoriaux d'initiation qui sont parfait pour les débutants. N'hésitez pas par exemple à consulter les articles de la catégorie AJAX.

Code

Code xHTML

Le code xHTML est assez simple, il faut juste avoir un formulaire pour envoyer la petite URL et un <div> pour pouvoir afficher le résultat dynamiquement (avec Javascript).

<form method="post" action="" enctype="multipart/form-data">
<label>URL: <input type="text" name="url" id="url" /></label> <input onclick="displayURL(url.value)" type="button" value="Dé-raccourcir l'URL" />
</form>

<div id="afficherURL"></div>

Code Javascript

Le code Javascript est un peu élaboré puisqu'il doit récupérer les informations dynamiquement.

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 displayURL(url)
{
 // Afficher une image pendant le chargement
 window.document.getElementById("afficherURL").innerHTML = "<img src=\"Loading-transparent.gif\" alt=\"icône chargement\" />";

 if (url != false){ /* Si l'utilisateur à bien inscrit l'URL */
 var url = "afficher-url.php?url="+url; /* Adresse du fichier .php */
 var obj = file(url); /* Récupère le résultat (la longue URL) */
 /* le résultat est affiché dans un div (.result) qu'il est possible de personnaliser avec CSS */
 window.document.getElementById("afficherURL").innerHTML = "<div class=\"result\">"+obj+"</div>";
}
else
 window.document.getElementById("afficherURL").innerHTML = "Erreur";
}

Note: L'image de chargement est la suivante (vous pouvez la prendre elle est libre de droit):

Image de chargement avec AJAX

Code PHP

Version 1 (nécessite PHP 5)

Ce code est une mise à jour de l'article suite à la suggestion de Seebz dans les commentaires. Il existe une fonction en PHP 5 intitulé get_headers(). Cette dernière facilite grandement le script.

<?php
$url=trim(strip_tags($_GET['url']));

function analyseur_header_http($url)
{
 $headers = get_headers($url,1);
 if (is_array($headers['Location'])) // Retourne true si $headers['Location'] est un array
 return end($headers['Location']);
 else
 return $headers['Location'];
}

$url_retour = analyseur_header_http($url);
echo '<a href="'.$url_retour.'">'.$url_retour.'</a>';
?>

Cette fonction à l'avantage de retourner la dernière URL dans le cas où il y a plusieurs redirection à la suite.

Version 2 (idéal pour PHP 4)

Ce code alternatif est est un peu moins efficace mais il est pratique dans le cas où vous n'avez pas PHP 5. Le code utilise curl pour extraire le contenu de la page.  Il faut donc s'assurer dans un premier temps que l'hébergeur accepte l'utilisation de cette ressource (certains hébergeurs empêchent l'utilisation de cette ressource qui consomme trop). L'extraction de la page sert à récupérer le texte inclue dans l'entête HTTP. C'est dans cet entête qu'il y a la page de redirection (la longue URL). Le code PHP récupère alors cette adresse et l'affiche pour qu'elle soit utilisée dans le fichier Javascript.

<?php
$url=trim(strip_tags($_GET['url']));

function analyseur_header_http($url)
{
 $ch = curl_init(); // Initialise une nouvelle session cURL

 // Options de transfert cURL
 curl_setopt($ch, CURLOPT_URL, $url);
 curl_setopt($ch, CURLOPT_HEADER, true);
 curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);

 $en_tete = curl_exec($ch); // Exécute la session cURL

 curl_close($ch); // Fermeture cURL

 if ($en_tete==true){
 $position = strpos($en_tete, '<'); // récupère la position du caractère "<"
 $en_tete = substr($en_tete, 0, $position); // récupère seulement l'entête HTTP
 }

 $en_tete = nl2br($en_tete);
 preg_match('#Location: (.+)\<br /\>#isU', $en_tete, $url_retour_array); // Extraire l'URL
 $url_retour = '<a href="'.$url_retour_array[1].'">'.$url_retour_array[1].'</a>';

 return $url_retour; // Retourne l'URL entière
}

echo analyseur_header_http($url); // Utilisation de la fonction analyseur_header_http()
?>

Télécharger le script

Pour éviter de se perdre avec les fichiers et les différents scripts, un fichier zippé contenant tout ce qui est nécessaire à l'exécution du script peut être téléchargé:

L'utilisation est simple. Il suffit de décompresser les fichiers et de les uploader sur un site web.

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.

Logo de Twitter

Logo de Twitter

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:

Image de chargement avec AJAX

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.