JavaScript: struttura di un widget di Twitter

JavaScript: struttura di un widget di Twitter

All'indirizzo http://platform.twitter.com/widgets.js si trova il generatore di gran parte dei widget di Twitter. Il codice è minificato ed offuscato, ma con un pò di pazienza e con l'aiuto di qualche tool online si riesce ad avere una lettura quasi in chiaro del file, scoprendo in questo modo dei particolari interessanti su come i widget di Twitter vengano generati ed inseriti nelle nostre pagine. Vediamo insieme qualcuno di questi dettagli nascosti.

Tutti noi siamo abituati a vedere link di questo tipo:


<a href="http://twitter.com/gabromanato" class="twitter-follow-button" data-lang="it"/>

Gli attributi dei link di Twitter sono il canale di comunicazione primario tra il link e lo script che genera il widget. Infatti nel file sopra menzionato avviene la mappatura degli attributi di questi link:


parameters: function () {
   var a = {
     text: this.text,
     url: this.url,
     via: this.via,
     related: this.related,
     count: this.count,
     lang: this.lang,
     counturl: this.counturl,
     searchlink: this.searchlink,
     placeid: this.placeid,
     original_referer: location.href,
     id: this.id
   };
   
   //...
}

Tutte le proprietà dell'oggetto letterale contenuto nel metodo parameters() si riferiscono agli attributi del link HTML che cominciano con il prefisso data-. Nel nostro bottone di esempio, quindi, data-lang corrisponde a lang. Lo script legge il valore dell'attributo e imposta il valore predefinito "Follow" su "Segui", poichè it corrisponde alla lingua italiana.

Ciascun widget in questo script è un oggetto JavaScript contenente metodi e proprietà simili tra loro e omogenei (i dati ovviamente differiscono). Il metodo più importante di ciascun oggetto, quello che permette ai widget di essere visualizzati, è il metodo render(). Questo metodo assembla tutti i dati rilevanti restituiti dalle proprietà e metodi dell'oggetto/widget e crea il widget nel DOM. Esempio:


render: function (a) {
  if ( !! this.screenName) {
    var b = a.assetUrl() + "/widgets/follow_button.html#" + 
            this.parameters(),
    c = this.langs[this.lang].dimensions;
    this.width && (c = [this.width, c[1]]);
    var d = this.langs[this.lang].title;
    this.element = this.create(b, "twitter-follow-button", c, d)
 }
}

Il metodo in questione legge lo username dell'utente, i parametri passati dal link HTML, le dimensioni del bottone (variabili in base alla lingua scelta per il testo), il testo del bottone ed infine crea il widget.

Vi invito a studiare questo file perchè vi sono molti particolari da cui prendere spunto per lo sviluppo di applicativi JavaScript.

Torna su