10 righe di codice per accedere alle API di Twitter con jQuery

Ormai avere un account su Twitter è un must, soprattutto per chi si occupa di design e development. Blog, webzines e case editrici specializzate in tecnologie di programmazione pubblicano costantemente informazioni su Twitter e, spesso, sono informazioni di notevole valore. Quindi su Twitter bisogna esserci!

Tra i servizi web più popolari, Twitter è tra quelli che si rinnovano di più: periodicamente vengono aggiunte nuove features e migliorate quelle già esistenti. In questo modo, tra l’altro, si allargano gli ambiti di applicazione del servizio.

Tra le funzionalità più interessanti, va segnalata la possibilità di geolocalizzare i singoli tweet. Questa possibilità è prevista solo quando si accede al servizio attraverso le sue API, ma, visto lo sviluppo vertiginoso di periferiche mobili dotate di GPS, si tratta di una feature da tenere nella dovuta considerazione.

Ora, dato che su Twitter si pubblicano un bel po’ di contenuti, può essere interessante (e spesso opportuno) prelevare questi contenuti e importarli nel proprio sito/blog personale o aziendale. Magari collocando i singoli tweet (se localizzati) su una mappa, con tanto di infowindow…

Dunque, supponiamo di voler visualizzare solo i contenuti geo-localizzati. Per farlo bastano una decina di righe di codice. Ma davvero!

Quello che occorre è un po’ di JavaScript (poco poco) e un paio di funzioni jQuery.

Iniziamo inserendo jQuery nel nostro documento:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Ed ecco lo script:

$(document).ready(function(){

$.getJSON('http://api.twitter.com/1/statuses/user_timeline.json?screen_name=carlodaniele&count=10&callback=?',
  function(data){
    $.each(data, function(){
      if(this.geo != null){
        $('<li></li>')
          .hide()
          .append(this.text)
          .append(" - " + this.user.name)
          .append(" - Lat: " + this.geo.coordinates[0] + ", Lon: " + this.geo.coordinates[1])
          .appendTo('#tweets')
          .fadeIn();
      }
    });
  }
);

});

Quando ogni elemento del DOM del documento è stato caricato, la funzione jQuery $.getJSON preleva i dati dalla URL trasmessa come primo parametro. Nell’esempio si tratta della timeline di un utente con profilo pubblico. Il parametro count=10 stabilisce il numero massimo di tweet che formeranno la risposta.

Analizziamo lo script riga per riga.

Il secondo argomento di $.getJSON è costituito da una funzione anonima di callback che si occupa della manipolazione dei dati. All’interno della callback, andremo a scorrere i singoli elementi della risposta, con la funzione jQuery $.each: se i singoli elementi contengono un valore del campo geo diverso da null, allora viene creato un list item:

$('<li></li>')

Il list item viene nascosto:

.hide()

Viene inserito al suo interno il testo del singolo tweet:

.append(this.text)

Viene aggiunto in coda un trattino con il nome dell’autore:

.append(" - " + this.user.name)

Vengono aggiunte le coordinate della posizione dell’utente al momento del tweet:

.append(" - Lat: " + this.geo.coordinates[0] + ", Lon: " + this.geo.coordinates[1])

Il list item così generato viene inserito nell’elemento del DOM con id=tweets (ovviamente una lista):

.appendTo('#tweets')

In ultimo, il list item viene visualizzato gradatamente:

.fadeIn();

Giusto per completezza, non dimentichiamo la unordered list da inserire nel documento:

<ul id="tweets"></ul>

Due note importanti:

  1. la nostra applicazione funziona solo se nei 10 tweet più recenti ce n’è almeno uno geolocalizzato (altrimenti non viene generato nemmeno un list item);
  2. la geolocalizzazione è possibile solo se nelle impostazioni generali dell’account è stata messa la spunta all’opzione “Tweet location” (è bene fare una verifica)

E comunque, se non volete limitare la ricerca ai soli tweet geolocalizzati, basta semplicemente eliminare la condizione if(this.geo != null)

Ah, vi chiederete perchè non abbia collocato direttamente i tweet su una mappa. La risposta sarà su ioProgrammo, fra un paio di mesi 😉

Buon divertimento

Annunci