Tutoriel 10 : les badges Yahoo Pipes

Yahoo Pipes produit « naturellement » des fils RSS (donc XML) et fichiers JSON – ainsi que du ICS pour des informations datées, et du GeoRSS quand il y a des informations cartographiques.

C’est déjà bien.

Mais parfois on a envie d’afficher les résultats d’un pipe directement dans une page web : produit d’une liste, carte des résultats, etc.

Yahoo propose alors un badge : c’est-à-dire du code (javascript) à intégrer dans la page en question. A l’affichage de la page, le code appelle le résultat du pipe et l’affiche simplement.

Exemple pour le pipe du tuto 9 (géolocalisation de Calendoc)

Quand on clique le le bouton « Embed », Yahoo Pipes propose le code à copier-coller :

<script src="http://l.yimg.com/a/i/us/pps/mapbadge_1.3.js">{"pipe_id":"zCMPY2xl3hGktpjwU1y0Jw","_btype":"map"}</script>

Ce code est simple : il a 3 paramètres

1. il appelle le programme générique pour tous les pipes (src)
2. il indique l’identifiant du pipe (zCMPY2xl3hGktpjwU1y0Jw)
3. il précise le format en sortie : une carte (map)

Si je récupère ce code ici, j’afficherai donc la carte (en l’occurrence, sous l’hébergeur WordPress.com, je n’ai pas le droit d’intégrer du JavaScript. Wordress me dit que c’est parce qu’il y a des codes méchants et que c’est pour mon bien. Je vous mets donc juste une copie d’écran, au lieu d’un beau truc plus dynamique)

Ce qui sort, ce sont des événements de Calendoc. Donc je pourrais aussi réclamer d’avoir un badge me fournissant non pas une carte, mais une liste : je pourrai alors remplacer

"_btype":"map"

par

"_btype":"list"

Il y a encore d’autres paramètres possibles, mais ça suffira pour l’instant. La documentation Yahoo Pipes sur les badges est là (et si j’en ai le courage, je la reprendrai peut-être ici un jour…).

Exemple immédiat d’utilisation : si vous voulez afficher un flux RSS quelque part dans une page web (sur votre blog, etc.), il suffit

1. de mettre ce flux en entrée d’un pipe (module Fetch Feed)
2. en affichant les résultats, de récupérer le « badge » fourni par Yahoo Pipes et de le coller dans votre page.
   Cela vous affichera le contenu du flux, avec en bas de liste la petite mention 
   Powered by Y! Pipes^™