jQuery: usare Flickr con JSON

Flickr offre la possibilità di usare AJAX per reperire le nostre foto usando JSON, per la precisione JSONP (JSON with Padding). jQuery offre il metodo $.getJSON() per questo scopo. L'unica informazione di cui abbiamo effettivamente bisogno per inserire le nostre ultime foto nelle nostre pagine è il nostro ID Flickr (non il nostro username). A tal proposito esiste il servizio idGettr che ci permette di ottenere il nostro ID inserendo il nostro username. Una volta ottenuto il nostro ID possiamo procedere come segue.

Anatomia di un URL di Flickr

Un URL di Flickr è composto dalle seguenti parti:

1. Base: http://api.flickr.com/services/feeds/photos_public.gne?
2. ID utente: id=31968388@N02
3. Lingua: lang=it-it
4. Formato dati: format=json
5. Parametri aggiuntivi per il formato dati scelto: jsoncallback=?

Quindi nel nostro caso avremo questo URL:

http://api.flickr.com/services/feeds/photos_public.gne?id=31968388@N02&lang=it-it&format=json&jsoncallback=?

Reperire il file JSON

Prima di usare jQuery per reperire il file JSON, occorre stabilire con precisione quali sono i dati che ci interessano. A questo proposito vi consiglio di caricare l'URL di Flickr nel vostro browser per studiare la struttura del file JSON restituito.

Per il nostro esempio ci interessano solo i link alla pagina della foto e il percorso dell'immagine delle ultime cinque foto del nostro album. Con jQuery possiamo scrivere il seguente codice:

$(function() {

  var url = 'URL di Flickr';

  $.getJSON(url, function(data) {
          
  
      var html = '';
      
      $.each(data.items, function(i,item) {            
            
             html += '<a href="' + item.link + '"><img src="'
                      +item.media.m+ '"/></a>';
             
             
             return i < 4;

            
      });
      
      $('#flickr').html(html);        
    
  });
    
});

Quello che ci interessa dell'oggetto JSON sono la proprietà link (URL della pagina della foto) e la proprietà m dell'oggetto media (contenente il percorso dell'immagine). Usiamo l'istruzione return per selezionare solo le prime cinque foto del set (il valore 4 indica che l'indice parte da 0).

Potete visionare l'esempio finale in questa pagina.