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="http://twitter.com/javascripts/blogger.js"></script>
<script src="http://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="http://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="http://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 http://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="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://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="http://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="http://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="http://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="http://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à!

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: ,

L'autore

Web designer, cerca l'ispirazione in ogni oggetto che lo circonda. Specializzato nella creazione di layout per Wordpress è sempre alla ricerca del framework javascript più cool, del social network più in voga, del design più innovativo... Genere musicale? Lounge...

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

44 commenti

  1. Cry
    • Cry
  2. mery
  3. Giada
  4. luca
  5. luca
  6. Francesco
    • Francesco
    • Francesco

Trackback e pingback

  1. uberVU - social comments
    Social comments and analytics for this post... This post was mentioned on Twitter by nando_p: RT @YIW Come aggiungere twitter al …
  2. Twitter: 5 temi pronti per l’uso per visualizzare gli ultimi tweet sul tuo sito | Your Inspiration Web
    [...] Nell’articolo di Ivan – che hai già avuto modo di leggere la scorsa settimana – hai visto come integrare …
  3. Twitter: 5 themes ready for use to display on your site the latest tweet | Your Inspiration Web
    [...] Ivan’s article- you’ve already had way to read the past week – you can see how to integrate and …
  4. Come aggiungere twitter al proprio sito web? | Your Inspiration Web
    [...] posted here: Come aggiungere twitter al proprio sito web? | Your Inspiration Web …
  5. YIW Minimal: un template clean & free per un sito semplice ma professionale | Your Inspiration Web
    [...] La prima contiene gli ultimi messaggi di twitter, integrati come spiegatoci da Ivan nel suo articolo; nella seconda puoi …

Lascia un Commento

Current day month ye@r *