Animint

  Anime & manga

 
 
“Animint traite des dessins animés japonais et du manga. Outre ce blog, le site comporte plusieurs milliers de pages de texte illustré.”

Wall Sama : Un exercice d'utilisation des API Facebook et Twitter

Par le :: Webmastering

aggregator_sama

Dans la lignée d'Aggregator Sama, l'agrégateur de blogs et de ses émulations expérimentales sous forme de journal ou de magazine en ligne, j'ai étendu les sources d'informations à des réseaux sociaux, avec une présentation purement visuelle, pour bâtir Wall Sama, un mur d'images, rafraichi régulièrement. Je vous laisse découvrir par vous-mêmes et trouver une quelconque utilisation à cet exercice de style, qui m'a permis de me familiariser avec les interfaces fournies par Twitter et Facebook.

J'avais déjà abordé le sujet pour Facebook, avec la mise en place d'une application, émulation de la base encyclopédique, qui m'avait incité à revoir les fonctionnalités sur Animint. L'abandon par Facebook, à bon escient,  de leurs tags HTML propriétaires m'a forcé cependant à revoir mes ambitions à la baisse pour remettre en ligne une application épurée, encapsulée dans son iframe.

Dans le cas de Wall Sama, le besoin se limite à consulter des informations en lecture seule, alors que les interfaces mises à disposition sur les réseaux vont bien au-delà, en permettant de poster des messages et même des fichiers en pièces jointes.

J'avais d'autres manières d'arriver au but, notamment en interrogeant les flux RSS des pages Facebook, par exemple. Cependant, il semblerait que les flux ne soient pas forcément activés et résulteraient presque d'une fonctionnalité cachée. Je retiens surtout que le flux RSS comporte, certes, les derniers messages postés dans la page, mais la structure est très limitée et ne reflète pas le véritable contenu, qui est souvent un lien ou une vidéo postée, accompagnés par un commentaire.

L'analyse de ces mêmes objets structurés via Open Graph est beaucoup plus aisée et permet de faire le tri et d'isoler les différents éléments. Le premier revers de la médaille est d'avoir à un lire un flux plus volumineux, mais ce n'est pas gênant quand la lecture se fait de manière sporadique, sans avoir besoin d'interactions en temps réel.

L'autre inconvénient par rapport à la simple lecture de flux RSS, est qu'il faut enregistrer son application sur Facebook et gérer les mécanismes Oauth pour appeler les interfaces REST en étant authentifié. Pour ne pas réinventer la roue, des bibliothèques de code sont à disposition pour les différents langage de programmation, dont PHP. Le reste du code à générer consiste juste à appeler des urls à distance, avec les bons paramètres et à analyser les résultats renvoyés sous format JSON.

La documentation Facebook est assez dense et touffue car elle comprend des exemples complets mais en consultant d'autres sites, la situation se simplifie grandement. En fait, dans le cas d'une lecture "publique", la configuration se fait avec un seul utilisateur, qui doit juste accepter que  l'application fonctionne en son nom, même quand il est déconnecté. Fonctionnellement, il faut aussi que cet utilisateur ait accès aux pages que vous souhaitez lire, car l'application se connectera via ses droits d'accès.

La procédure pour générer le précieux jeton d'authentification peut alors se faire via le site de Facebook, en se contentant d'utiliser un navigateur web et en entrant les bonnes urls. Une fois le jeton généré, il suffit de le réutiliser dans les appels classiques d'urls à distance, sans avoir à traîner toute une bibliothèque de fonctions pour gérer les échanges Oauth.

Twitter propose le même style d'interface, avec encore une option sans authentification pour la lecture d'information. J'ai pris initialement cette direction, notamment lorsque j'ai vu que la limite d'appels montait quand même à quelques 150 interrogations par heure, largement au-dessus de mon usage.

En revanche, la limite est compatibilisée par adresse IP et en ayant déployé le code sur un serveur largement mutualisé, qui partage la même adresse IP avec d'autres centaines de sites, le quota est d'office rapidement atteint, si l'adresse IP n'est pas tout simplement black-listée par défaut, suite à une fausse manipulation d'un des protagonistes hébergés. Twitter et consorts offrent gracieusement un accès à leur API mais il ont de quoi se protéger contre le déni de service.

L'authentification sur l'API Twitter est donc une obligation et cela se passe aussi via Oauth. Cela permet de s'affranchir de la contrainte posée par l'adresse IP du serveur web et cela porte la limite de requêtes par heure au-delà de 300. Contrairement à Facebook, je n'ai pas vu d'outils en ligne permettant de générer un jeton permanent et j'ai eu donc recours à une des bibliothèques de code pour gérer cette partie.

J'ai d'abord commencé par TmhOAuth mis en évidence sur le site de Twitter, étant donné le nombre de fonctions proposées dedans et l'élégance du code. En revanche, en pratique je ne suis pas parvenu à faire marcher correctement les appels, avec en plus la difficulté de trouver le bon diagnostic en test, car Twitter répond comme si vous n'étiez pas authentifiés, donc donne un résultat sur les requêtes autorisées en anonyme.

Arrivé dans une impasse, j'ai finalement opté pour TwitterOAuth, plus rustique mais qui part d'une implémentation Oauth plus éprouvée et en tout cas compatible avec l'API Twitter.

Avec tout ceci, la connexion et les transferts d'information ont pu être branchés mais les dernières difficultés ont concerné Twitter lui-même. Il existe visiblement un certain temps de latence avant de voir les tweets de tout le monde dans une liste, malgré ce que peut dire la documentation par ailleurs.

Quand j'ai crée une nouvelle liste avec une trentaine de membres  publics, je ne voyais que les messages d'une dizaine d'entre eux, alors que Twitter indique des limitations qu'à partir de plusieurs centaines de membres. Cela  a été réglé au bout de quelques heures mais le comportement m'a surpris pendant mes tests.

Une fois en place, les API fonctionnent bien et les batches peuvent mettre à jour la base de données qui est derrière Wall Sama. Pour la couche de présentation, j'ai pioché dans quelques plugins jQuery pour rajouter quelques effets. A ce sujet, je vous renvois à cette liste de 200 exemples, plugins ou de tutoriels jQuery autour de la manipulation des images, des sliders aux galeries classiques. L'animation initiale doit laisser le temps aux images de se charger en fond de tâche, mais il reste sans doute quelques réglages à effectuer.

 

Wall Sama

Site Wall Sama: http://wall.kelmanga.com

Discuter de ce billet sur le forum - - Laisser un commentaire »

Cet article vous a plu?

Faites-le connaître ou votez pour cet article sur les sites suivants :

  • anime manga aggregator sama
  • Partager sur del.li.cious
  • Partager sur Facebook
  • Partager sur Google

Commentaires sur ce billet:

  1. Le 15/02/2012 à 15:35
    Concombre Masqu a dit

    Ca ne manque pas de classe. Bien joué ;)

  2. Le 15/02/2012 à 19:24
    mackie a dit

    bonne idée. je m'aperçois d'une chose : pour le moment je n'y apparais pas (mais il doit y avoir des raisons) - mais surtout, ça me fait penser que sur sama mag et otak sama, les billets en provenance des chroniques d'un newbie n'ont jamais d'image associée. t'as une idée, pazu, de ce que je dois améliorer pour faire apparaître une image dans les flux mag et journal?

  3. Le 15/02/2012 à 20:24
    Pazu a dit

    @Concombre Masqué Merci ;)

    @mackie Pour simplifier, tous les outils s'appuient sur le contenu des flux, qui comportent le minimum syndical pour les derniers articles que tu as publiés, tel que le titre, la date de publication, l'auteur et un extrait du texte.

    Pour isoler les photos avec le système actuel, j'ai besoin d'avoir l'intégralité du corps de l'article au format HTML dans le flux. Dans Wordpress, cela doit être une option quelque part, étant donné que c'est activé chez certains.

Ajoutez votre commentaire:

Merci de bien vouloir soigner votre orthographe et de proscrire le style SMS.


Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

 

↑ Haut de page