Gestire un feed Flickr con jQuery

Nell'epoca del web 2.0, in cui sono gli utenti a generare contenuti, i feed sono il modo più facile per visualizzare del contenuto aggiornato, sia che stiamo parlando di un feed reader sia di un sito web. Per esempio nella home del mio sito è possibile visualizzare dei feed che riportano contenuto aggiornato direttamente da questo blog oppure dal mio spazio Flickr, o addirittura dal mio profilo iLike "via" LastFM, con gli ultimi brani suonati nel mio iTunes. Ci sono diversi tipi di feed come per esempio RSS o Atom, e diversi modi di visualizzarli all'interno di una propria pagina web. E' il caso di MagpieRSS, che fa il parsing di un feed RSS in PHP. Nel caso a qualcuno interessasse :-) , ho usato appunto Magpie per gli esempi sopra citati nel mio sito. In ogni caso, è possibile anche visualizzare dei feeds nel proprio sito usando JavaScript: sto parlando di JSON.
Javascript Object Notation (JSON per gli amici) è un formato di dati facile da leggere ed indipendente dal linguaggio utilizzato per la pagina, e ciò significa che è possibile parsarlo* usando il linguaggio di programmazione più congeniale. Sia Yahoo! che Google offrono la possibilità di riportare dei dati dai loro network in JSON da un paio di anni. Un ottimo esempio è appunto Flickr, che come tutti sanno, appartiene al network Yahoo!. Chiunque abbia un account flickr può gestire un proprio feed tramite Javascript, e JSON. Le API di Flickr forniscono diversi tipi di formato per i feed, tra cui rss 2.0, ma NON direttamente JSON. E allora? Basterà rinominare con una piccola correzione il feed da utilizzare in questo modo:

http://api.flickr.com/services/feeds/groups_pool.gne? id=675729@N22〈=en-us&format=json

Con jQuery 1.2, è stato implementato il supporto per trasferire dati da JSON su domini multipli. Scarichiamo quest'ultima versione di jQuery. In seguito aggiungiamo una callback, in questo modo: "jsoncallback=?" alla fine di questa querystring e mettiamo il codice taggato in questo modo per far funzionare tutta sta fuffa:


$.getJSON("http://api.flickr.com/services/feeds/groups_pool .gne?id=675729@N22〈=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
$("").attr("src", item.media.m).appendTo("#images")
.wrap("");
});
});

Ecco che il Javascript cercherà un div con id "images" per inserirci tutte le immagini provenienti da Flickr con il feed JSON, Ovviamente la cosa va stilata opportunamente con un CSS.

*=farne il parsing, la lettura.