Nonostante questo sia un buon modo di fare ciò, potremmo voler implementare la visualizzazione dei tweet senza dover utilizzare la soluzione proposta dal famoso social network (ad esempio per avere maggiori possibilità di personalizzazione).
Vediamo allora come fare!
#1 Widget RSS
Consiste nell'inserire un widget RSS (possibile sia su Wordpress che su Blogger) con il feed del nostro account twitter.
L'indirizzo del feed RSS è del tipo:
http://twitter.com/statuses/user_timeline/username.rssdove username è il nome utente che abbiamo su twitter.
#2 Funzione javascript messa a disposizione da twitter
<div id="twitter_div"><ul id="twitter_update_list"></ul> </div> <script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=1" type="text/javascript"></script>Provate ad aggiungere questo pezzo di codice ad una qualsiasi pagina HTML e vedrete "comparire" il vostro ultimo tweet.
Potete modificare count=1 in modo da visualizzare più di 1 tweet e naturalmente dovete sostituire "username" con il vostro nome utente.
I tweet compaiono in un elenco puntato.
#3 Funzione javascript (senza elenco puntato e con riferimenti temporali in italiano)
Prima di tutto è necessario inserire il codice riportato qui sotto, tra tag <script> all'interno dell'header della pagina web oppure all'interno di un file .js da importare:
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('<span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+relative_time(twitters[i].created_at)+'</a></br>');
}
document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
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 'meno di un minuto fa';
} else if(delta < 120) {
return 'circa un minuto fa';
} else if(delta < (60*60)) {
return (parseInt(delta / 60)).toString() + ' minuti fa';
} else if(delta < (120*60)) {
return 'circa un ora fa';
} else if(delta < (24*60*60)) {
return 'circa ' + (parseInt(delta / 3600)).toString() + ' ore fa';
} else if(delta < (48*60*60)) {
return '1 giorno fa';
} else {
return (parseInt(delta / 86400)).toString() + ' giorni fa';
}
}
poi basterà aggiungere nella parte della pagina dove si vuole compaiano i tweet il seguente codice:<div id="twitter_div"><span id="twitter_update_list"></span>g</div> <script src="http://twitter.com/statuses/user_timeline/nicopi.json?callback=twitterCallback2&count=5" type="text/javascript"></script>Questa soluzione è ispirata alla funzione javascript del punto #2, con la differenza che è in italiano (prima: "10 minutes ago", ora: "10 minuti fa") e che non utilizza più un elenco puntato ma una semplice lista di tweet.
#4 Funzione javascript che elimina i tweet tra utenti
Questa è la versione che uso qui sul blog.
Problema: Molte volte rispondo a diversi utenti su twitter e tutti questi tweet iniziano con @username. Voglio che vengano visualizzati tutti i tweet tranne quelli che iniziano con il carattere @.
function twitterCallback2(twitters) {
var statusHTML = [];
var i=0;
while (i<twitters.length){
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>';
});
if (status[0]!='@'){
statusHTML.push('<span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+relative_time(twitters[i].created_at)+'</a></br>');
i=twitters.lengt;
}
i++;
}
document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
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 'meno di un minuto fa';
} else if(delta < 120) {
return 'circa un minuto fa';
} else if(delta < (60*60)) {
return (parseInt(delta / 60)).toString() + ' minuti fa';
} else if(delta < (120*60)) {
return 'circa un ora fa';
} else if(delta < (24*60*60)) {
return 'circa ' + (parseInt(delta / 3600)).toString() + ' ore fa';
} else if(delta < (48*60*60)) {
return '1 giorno fa';
} else {
return (parseInt(delta / 86400)).toString() + ' giorni fa';
}
}
Soluzione: La soluzione che ho scritto è quella che vedete qui sopra. Il numero di tweet caricati è indicato da count=, in questo caso 15; tra questi verrà visualizzato quello più recente che non inizia con il carattere @.
Se tra i 15, nessuno comincia con un carattere diverso da @ allora lo script non stampa niente.
La funzione relative_time serve solo a trasformare la data e l'ora del tweet in modo tale che se ora sono le 20.00 e abbiamo twittato 10 minuti fa appaia scritto "10 minuti fa" e non "19.50". (questo è solo un esempio!)
PS: i=twitters.lengt; serve solo ad uscire dal ciclo while. Avrei potuto metterci un break, ma ho preferito così...
Per concludere facciamo gli auguri a twitter che in questi giorni compie 5 anni. Il team di twitter ha per l'occasione pubblicato un video celebrativo (che potete vedere cliccando QUI) nel quale compare anche l'astronauta italiano Paolo Nespoli, attualmente al lavoro nella ISS dove permarrà per un periodo di 6 mesi.
0 commenti: