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.