Come aggiungere twitter al proprio sito web?

Oltre oceano spopola dal 2006, in Italia è sempre più in espansione al punto tale da concedere “l’onore” della lingua italiana tra le opzioni del sito (come scritto sul suo blog ufficiale): ormai ogni blog che si rispetti è collegato ad un account Twitter.

Sparsi per il web ci sono tantissimi plugin più o meno modificabili che permettono l’embed dei propri tweets sul proprio sito web; oggi però noi sfrutteremo le APIs messe a disposizione proprio da Twitter: sono basate su HTML e Javascript e sono personalizzabili.

In questo modo aggiungeremo i nostri ultimi tweets alla nostra pagina web.

Come funzionano le API di Twitter?

Di default le API di Twitter si basano su di un semplice div – da aggiungere al tuo codice HTML – contenente una lista non ordinata (<ul></ul>) in cui successivamente verranno inseriti i vari tweet caricati tramite una funzione javascript.

Ecco il codice da integrare all’interno della tua pagina:

<div>
<ul id="twitter_update_list"></ul>
</div>

<script src="https://twitter.com/javascripts/blogger.js"></script>
<script src="https://twitter.com/statuses/user_timeline/ID.json?callback=twitterCallback&amp;count=5" type="text/javascript"></script>

Come puoi notare, subito dopo la lista non ordinata con id “twitter_update_list” vengono richiamati i due file javascript che si trovano sul server di Twitter.

Il primo dei due script:

<script src="https://twitter.com/javascripts/blogger.js"></script>

si preoccupa di creare una lista con i tweets provenienti dal tuo account e li inserisce all’interno della “twitter_update_list” precisando anche da quanto tempo sono stati scritti.

Il secondo invece:

<script src="https://twitter.com/statuses/user_timeline/ID.json?callback=twitterCallback&amp;count=5" type="text/javascript"></script>

comunica al server centrale il numero di tweets da mostrare all’interno della tua pagina web (in questo caso il count è impostato a 5 e perciò saranno mostrati i tuoi ultimi 5 tweets).

Al posto di ID dovrai inserire il tuo username di Twitter.

Con qualche intervento nel CSS puoi dare uno stile a questa lista ed ecco integrato il tuo account di Twitter all’interno del tuo sito web. Semplice, no?

E se volessi personalizzare ulteriormente la visualizzazione degli ultimi tweets?

Personalizziamo insieme le API di Twitter

Puoi  innanzitutto sostituire l’ora (che è scritta in inglese) con l’ora in italiano, oppure inserire immagini per ogni tweet, in modo tale da rendere la tua lista di tweets davvero unica.

Se ti colleghi all’indirizzo https://twitter.com/javascripts/blogger.js” (ossia l’indirizzo del primo dei due file javascript), puoi trovare il sorgente del file: salvane il contenuto in un nuovo file javascript chiamato “twitter.js”.

Nel tuo file HTML sostituisci il percorso del primo dei due file javascript con quello del tuo “twitter.js“.

Adesso esaminalo:

function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return '<a href="'+url+'">'+url+'</a>';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="https://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="https://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}

Per ognuno dei tuoi tweets la funzione twitterCallback2 ha il compito di prenderne il contenuto ed inserirlo all’interno della lista “twitter_update_list” con tanto di collegamento (al tuo tweet originale su twitter) ed ora di creazione.

Soffermiamoci proprio sull’ora di creazione: è data dalla seguente funzione relative_time(time_value):

function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset() * 60);

  if (delta < 60) {
    return 'less than a minute ago';
  } else if(delta < 120) {
    return 'about a minute ago';
  } else if(delta < (60*60)) {
    return (parseInt(delta / 60)).toString() + ' minutes ago';
  } else if(delta < (120*60)) {
    return 'about an hour ago';
  } else if(delta < (24*60*60)) {
    return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
  } else if(delta < (48*60*60)) {
    return '1 day ago';
  } else {
    return (parseInt(delta / 86400)).toString() + ' days ago';
  }
}

Ora: supponiamo che tu voglia raggiungere questo risultato.

La porzione di codice da prendere in considerazione è questa:

statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="https://twitter.com/'+username+'/statuses/'+twitters[i].id+'">' +relative_time(twitters[i].created_at)+'</a></li>');

In questa stringa puoi aggiungere tags HTML, immagini o codice javascript.

Per esempio, prova ad inserire la classica immagine dell’uccellino prima del tweet:

statusHTML.push('<li><img src="twitter-bird.jpg" /><span>'+status+'</span> <a style="font-size:85%" href="https://twitter.com/'+username+'/statuses/'+twitters[i].id+'">' +relative_time(twitters[i].created_at)+'</a></li>');

Giocando un po’ con il css, il risultato è questo.

Ora esamina questa riga:

 href="https://twitter.com/'+username+'/statuses/'+twitters[i].id+'">' +relative_time(twitters[i].created_at)+'</a></li>'); 

“+username+” si riferisce al tuo username su Twitter, puoi quindi utilizzare questa variabile in questo modo:

statusHTML.push('<li><h3>'+username+' dice:</h3>'<span>'+status+'</span> <a style="font-size:85%" href="https://twitter.com/'+username+'/statuses/'+twitters[i].id+'">' +relative_time(twitters[i].created_at)+'</a></li>');

Qualche intervento sul css ed il risultato è questo.

Twitter e Facebook: facciamoli interagire…

Se hai una pagina fan su facebook, all’indirizzo www.facebook.com/twitter potrai collegare il tuo account di twitter alla tua pagina fan di facebook: quello che scriverai su facebook automaticamente verrà passato a twitter e, di conseguenza, sarà visualizzato sul tuo sito perché lo script lo riconosce come un vero e proprio tweet.

Facebook passa a twitter non solo il proprio stato, ma anche gli eventi: puoi scegliere tu dalle impostazioni di facebook quali informazioni passare a twitter.

Considerazioni finali

Gli usi che puoi fare di questo script sono davvero tanti: i tuoi tweets da puro corredo di un sito possono anche diventarne l’elemento catalizzatore.

Un bel sito si vede dalle piccole cose, sono i dettagli che lo rendono unico e questi tweets possono davvero essere la ciliegina sulla torta del tuo lavoro.

Devi solo dar spazio alla tua creatività!