Créez un widget Twitter Ajax avec Php et jQuery

Si vous faites partie des dizaines de milliers d'habitués de ce blog, vous avez récemment pu voir apparaitre un petit oiseau bleu en haut de page. J'ai en effet succombé à Twitter et ouvert un compte pour que le monde entier puisse profiter des choses méchamment intéressantes que je fais/dis/pense.

Si vous ne connaissez pas encore, Twitter est un service très sympathique qui... ne sert strictement à rien. Pourtant il s'avère rapidement addictif. Sa première fonction est de simplement dire ce qu'on est en train de faire pour que ses amis puissent suivre notre vie trépidante. A priori rien de très intéressant, mais couplé à une très bonne API ce service devient rapidement un outils de communication multi-support exceptionnel.

Je partage ici comment réaliser un widget grâce à l'API Twitter, Php et un peu de jQuery.

Je vais aller à l'essentiel car il n'y a rien de bien compliqué dans l'opération : Un bout de Javascript appelle en Ajax un script Php qui interroge Twitter et retourne les données HTML afin qu'elles soient affichées.

Côté Client

Après avoir inclus votre librairie jQuery, collez le morceau de code suivant dans votre page. La partie Javascript peut être placée dans le head de la page.

Javascript

$(function() {
    /**
     * Widget Twitter
     * par Jay Salvat - http://blog.jaysalvat.com/
     */
    function twitter(url) {
        $('#twitter').fadeOut("slow", function() {
            $('#twitter').load(url, function() {
                $('#twitter .next, #twitter .prev').click(function() {
                    twitter($(this).attr('href'));
                    return false;
                });
                $('#twitter').fadeIn("slow");
            });
        });
    }
    twitter('twitter.php');
});

Html

<div id="twitter" style="diplay:none">Chargement...</div>

Une fois le DOM chargé, la fonction twitter se lancera et appellera en Ajax (Ajah pour les puristes) le script twitter.php (ci-après) pour en afficher le contenu dans le div dont l'id est #twitter. Une fois l'affichage terminé, on applique une écoute du comportement click à nos futurs liens "suivant" et "précédent" qui porteront les classes .prev et .next.

Côté Serveur

Créez maintenant un fichier twitter.php. Selon son emplacement, modifiez twitter('twitter.php') dans le script précédent pour que le lien soit correct. Collez-y les deux parties de code suivantes et modifiez les paramètres username et password pour qu'ils correspondent à votre compte.

Première partie de twitter.php : Le Php

<?php
    /**
     * Widget Twitter
     * par Jay Salvat - http://blog.jaysalvat.com/
     */
    $username = "jaysalvat";
    $password = "leDiraisPas";

    // Si les infos sont déjà en Session on les récupère
    session_start();
    if (isset($_SESSION['twitter'])) {
        $twitter = $_SESSION['twitter'];
    // Sinon on lance la récupération
    } else {
        $counter = 0;
        $twitter = array();
        // On se connecte à l'API pour prendre nos dernières bafouilles
        $xml = simplexml_load_file("http://".$username.":".$password." ¬
        @twitter.com/statuses/user_timeline.xml");
        // On fait le ménage des informations inutiles, on ne garde
        // que la date et le message... puis le total de message;
        foreach($xml->status as $status) {
            $counter++;
            $twitter[] = array(
                'date'    => (string)$status->created_at,
                'message' => (string)$status->text
            );
        }
        $twitter['total'] = $counter;
        // On stocke tout en session
        $_SESSION['twitter'] = $twitter;
    }
    session_write_close();

    // Quel Twit est demandé ?
    if (isset($_GET['t'])) {
        $t = $_GET['t'];
    } else {
        $t = 0;
    }

    // Juste pour y voir plus clair
    $total   = $twitter['total'];
    $message = $twitter[$t]['message'];
    $date    = date("d/m/Y", strtotime($twitter[$t]['date']));
?>

Prenons une pause pour quelques explications. Pour éviter de consulter Twitter à chaque affichage et de ralentir considérablement le chargement du site, on va stocker le résultat du premier appel en session. La connexion à Twitter ne s'effectuera ainsi qu'une fois par visiteur.

Si la variable de session $_SESSION['twitter'] n'existe pas, on lance l'appel à Twitter, on parse le XML pour n'en garder que l'essentiel dans un tableau auquel s'ajoute le total des messages. Le tableau ressemblera à quelque chose comme ça :

Array
(
    [0] => Array
        (
            [date] => Wed Nov 05 12:14:19 +0000 2008
            [message] => Le texte de mon message 1
        )

    [1] => Array
        (
            [date] => Tue Nov 04 17:53:26 +0000 2008
            [message] => Le texte de mon message 2
        )

    [2] => Array
        (
            [date] => Mon Nov 03 12:34:04 +0000 2008
            [message] => Le texte de mon message 3
        )

    [3] => Array
        (
            [date] => Sat Nov 01 16:39:21 +0000 2008
            [message] => Le texte de mon message 4
        )

    [4] => Array
        (
            [date] => Sat Nov 01 00:09:17 +0000 2008
            [message] => Le texte de mon message 5
        )

    [total] => 4
)

Puis on stocke ce tableau en session pour les prochaines interrogations.

La variable $t comporte le numéro de message à afficher. Par défaut 0 (soit le premier) ou celui passé dans l'Url par le script Client.

Passons maintenant à la suite de ce même fichier. C'est du simple HTML qui présente les données fraichement acquises pour qu'elles soient affichées par le Javascript.

Deuxième partie de twitter.php : Le Html

<div class="wrapper">
    <p><?= $message ?></p>
    <p>
    <? if ($t > 0) : ?>
        <a class="next" href="twitter.php?t=<?= ($t-1) ?>">&laquo; Suivant</a> | 
    <? endif ?>
    Twitté le <?= $date ?>
    <? if ($t < $total-1) : ?>
        | <a class="prev" href="twitter.php?t=<?= ($t+1) ?>">Précédent &raquo;</a>
    <? endif ?>
    </p>
</div>

Ce n'est qu'une proposition de mise-en-page. Il faut juste que les liens portent les classes prev et next car c'est sur eux que seront placées les écoutes des clics pour passer d'un twit à l'autre.

Améliorations possibles

Pour un meilleur résultat, je vous invite à consulter deux autres articles de ce blog :

• Dates relatives en Php
• Remplacer de longues URL par des TinyURL à la volée

Puis d'éventuellement modifier deux des lignes par :

$message = tinyUrlizeText($twitter[$t]['message']);
$date    = getRelativeDate($twitter[$t]['date']);

MISE A JOUR le Jeudi 18 Décembre 2008 : Grâce à la ligne ci-dessous vous pouvez remplacer les @jaysalvat par un lien vers le profil utilisateur.

$message = preg_replace("(@(\w+))", 
           '<a href="http://twitter.com/$1">$0</a>', 
           $twitter[$t]['message']);

Conclusion

Vous voilà prêt à agrémenter votre site d'un widget Twitter sur mesure. Le résultat est brut de décoffrage, pas de considération cosmétique ici, ce sera selon vos goûts. Adaptez la présentation à vos besoins.

Télécharger le script

Les liens

Twitter

http://twitter.com/

Mon compte Twitter

http://twitter.com/jaysalvat