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&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&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à!
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
44 commenti
Trackback e pingback
-
uberVU - social comments
Social comments and analytics for this post... This post was mentioned on Twitter by nando_p: RT @YIW Come aggiungere twitter… -
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… -
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… -
Come aggiungere twitter al proprio sito web? | Your Inspiration Web
[...] posted here: Come aggiungere twitter al proprio sito web? | Your Inspiration Web Comments0 Leave a Reply Click here… -
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…
Con questo brillante articolo diamo il benvenuto a Ivan, un nuovo autore di YIW. Visto la qualità di questo articolo (che mi tornerà molto utile, già lo so) sono sicura che questa collaborazione avrà un radioso futuro :)
Benvenuto a bordo!
Sara
Beh che dire: grazie mille Sara per i complimenti e per l’opportunità che mi state offrendo!
Spero davvero nel radioso futuro della nostra collaborazione! :)
Ivan
Complimenti Ivan: davvero ben fatto!
Un benvenuto a bordo anche da parte mia ;)
Grazie di tutto Just, grazie davvero di tutto!
Complimenti per l’ottimo articolo, Ivan, credo che sarà un piacere leggere anche a te e le tue esperienze professionali =)
Mi sono sempre chiesta come si facesse ad integrare gli ultimi tweet all’interno di un sito web e non avevo mai trovato nulla a riguardo. A tal proposito avrei una piccola curiosità: se volessi utilizzare data e ora di quando è stato inserito il tweet piuttosto che “xxxxx fa” cosa dovrei fare?
Rinnovo i complimenti a tutti gli autori, finalmente qualcosa di qualitativo anche nel panorama italiano =)
Ciao Cry,
per prima cosa ti ringrazio per i complimenti (danno fiducia e sono sempre ben accetti!) :D
Quanto alla tua richiesta:
nella funzione “relative_time(time_value)” la variabile “time_value” ti restituisce la data e l’ora di creazione del tuo tweet!
In questa funzione cancella tutti gli if (che calcolano il delta) e al loro posto inserisci:
return time_value;
Salva e vedrai che al posto di: “circa 1 ora fa…” stamperà la data e l’ora di creazione di ogni tweet!
In realtà time_value non fa altro che prendere dei valori predefiniti di twitter: i values[], come puoi notare in questo rigo:
time_value = values[1] + ” ” + values[2] + “, ” + values[5] + ” ” + values[3];
Il primo corrisponde al mese, il secondo al giorno il terzo all’anno ed il quarto di questi values corrisponde all’ora: time_value li unisce semplicemente, starà a te nel caso scegliere quello che più ti interessa :D
Spero di esserti stato di aiuto e grazie ancora dei complimenti!
Ivan
Caro Ivan sei stato chiarissimo e ti ringrazio per l’aiuto.
Provo subito a vedere se riesco nell’intento, a leggerlo così come l’hai spiegato sembra semplice =)
@Ivan
Molto bella la pagina under construction del tuo sito. :D
Complimenti
@ Cry: prego e mi raccomando, lo voglio assolutamente vedere sul tuo blog!!! =D =D
@ yesWEBcan: i complimenti da uno “del settore” non possono che essere un piacere ed uno stimolo a lavorare sempre più! grazie davvero!
Grazie mille, Ivan! Da un pò faccio qualche template su commissione e mi sono sempre posta il problema di come integrare twitter, in giro ci sono diversi plugin per wordpress (poco funzionanti, tra l’altro) ma non ho mai trovato niente di abbastanza comprensibile per quanto riguarda l’integrazione su sito e non su blog.
Ovviamente se combino qualche disastro o non riesco a sistemarlo, mi prendo la libertà di disturbarti per un aiutino al volo! :D
Grazie ancora!
Ma che disturbo mery! qualsiasi problema ci dovesse essere basta chiedere! :-D
In giro ci sono tantissimi plugin fantastici per wordpress ma se Twitter ci concede le sue APIs, tanto di guadagnato!
Non esitare a chiedere se dovessi aver bisogno!
l’articolo è scritto davvero benissimo e ringrazio Ivan per avermi illuminata!
Ho solo un piccolo problema,non capisco i tag div dove devo metterli…potreste aiutarmi?un forte bacio e buone feste
Ciao Giada,
i div li inserisci all’interno del body della tua pagina HTML ovunque tu voglia…!
Può essere all’interno del tuo header, nella barra laterale del tuo blog o nel footer, l’importante è che sia nel tuo body…
Non esitare a chiedere se ce ne fosse bisogno!
Un buon Natale di cuore
Io ho inserito i codici che mi fornisce twitter scegliendo HTML
ma non riesco a visualizzare i post ma solamente il titolo e il link alla mia pagina.
La cosa è un po’ insolita…
Il consiglio che ti posso dare, Luca, è di rivedere il codice, seguire il tutorial e se ci dovessero ancora essere problemi inviami una mail con il codice scritto da te e lo esaminerò e sicuramente troveremo il problema…!
Fammi sapere se hai risolto! :D
Complienti, bell’articolo! però non mi funziona :-(
ho dei dubbi su src=”http[twitter.com/ID].json?callback=twitterCallback&count=5″
se metto [twitter.com/mioID] non mi mostra nessun tweet..
come mai se vado a vedere il codice sorgente degli esempi questa parte di codice diventa
src=”http://twitter.com/statuses/user_timeline/YIW.json?callback=twitterCallback&count=5″ type=”text/javascript”
?
dove sto sbagliando?
Ciao Ivan,
ho con successo integrato twitter sul mio sito. Volevo segnalarti una “finezza”.
Istanziando un senza aver definito dentro un il validatore del W3C dà’ un errore, perchè la validazione viene fatta dopo il runtime del js di twitter che crea poi al volo gli per ogni tweet.
Io ho risolto così:
Che ne pensi?
Ciao Alessandro,
scrivi la ‘soluzione’ dentro il tag “code”, altrimenti non viene visualizzato! Grazie ;)
@Freedance
Soluzione soluzione! :) Sarei molto interessato a sapere come hai fatto a fare validare il codice. Grazie
articolo molto interessante,peccato che non mi funziona O.o
ho inserito la lista,i 2 file javascript (sostituendo ID con il mio ID di twitter) e non visualizza proprio nulla,ho pure controllato i sorgenti delle pagine linkate da ivan e sono fatte allo stesso modo ._.
Esatto anche a me succede la stessa cosa….che sia cambiato qualcosa nelle API?
avevo anche io il tuo problema…occhio al “&”…
in realtà è una & quindi il secondo script diventa:
Ciao Ivan,
bella la risorsa, però a mè non vuole saperne proprio di funzionare.
ho provato persino a metterla all’interno di una pagina vuota
http://www.marcobolzan.it/Senzatitolo-1.html
Metto la parte del java in head
e il div all’interno del body…
ma nulla non mio fa vedere niente!
Mi potresti/potreste aiutare?
anche a me non funziona..
ciao, io ho risolto mettendo il secondo script così :
In pratica al posto di “=twitterCallback” metti “=twitterCallback2”. A me ora funziona.
vorrei inserire i miei tweet sul mio sito wordpress come fare?
è cambiato l’URL per lo script, ore va messo così :
ciao ennio, come va messo ? =)
ciao, se mi dai la tua mail ti mando il codice via mail, qui non si riesce a postarlo :(
Per aggiungere del codice basta utilizzare il tag <pre> o <code> :)
ah.. ok, allora lo script è il seguente
boh… non mi visualizza comunque il codice :(
Mi sono espresso male: il blocco di codice va racchiuso in un tag <pre>, e poi in un <code>. Tipo:
<pre><code>
..codice..
</code></pre>
allora, vediamo se ci riesco :
Ciao ragazzi,
Ho appena lasciato un messagio sulla pagina di Sarah dai YIW Minimal template. Ma ho reso conto che forse era meglio di inserire il messagio qui.
Per un cliente non-profit sto usando il template YIW Minial (https://www.yourinspirationweb.com/2010/01/25/yiw-minimal-un-template-clean-free-per-un-sito-semplice-ma-professionale/)
Ho visto di recente (molto recente) è che i “twitter feeds” non funziona più (YIW Minimal usa il vostro twitter.js – non ho fatto nessun modificazione al .js).
L’ho visto sulla pagina di un cliente solo oggi …. poi ho controllato il vostro Demo Page qua: http://yim.yourinspirationweb.com/
E anche sul vostro c’è la problema che i Twitter Feeds non vengono piu inseriti nel sito :-(
Sarei estremamente in grato se potreste farmi sapere cos’è successo e cosa possiamo fare per giustarlo … siccome questo ‘feature’ era molto utile per il nostro cliente.
Stammi bene e spero che ci sentiamo presto,
Daniel
P.S. scuzatemi per qualche sbaglio grammatico, sono australiano (prima generazione – oriundo italiano)
Ciao Ivan!Complimenti per la chiarezza e completezza con la quale hai esposto il tuo articolo! E’ un’ottima idea e sono davvero curioso di provarla subito.Ancora complimenti!!