Se tu o la tua azienda avete un account Twitter, è probabile che vogliate promuoverlo e mostrare i vostri ultimi tweet dal vostro sito web. Poiché molti siti Web, sia personali che sempre più aziendali, sono basati su software di blogging come WordPress, ciò viene solitamente ottenuto tramite un plug-in, di cui ce ne sono molti in circolazione.
Ma cosa succede se vuoi semplicemente aggiungere il tuo feed Twitter live a una pagina web "normale"? Twitter stesso fornisce una serie di widget HTML, ma in questo articolo ti mostrerò quanto è facile ottenere risultati con un po' di JavaScript, CSS e jQuery.
Nel caso in cui non l'avessi mai visto prima:
Cos'è jQuery?
jQuery è una libreria JavaScript veloce e concisa che semplifica l'attraversamento di documenti HTML, la gestione degli eventi, l'animazione e le interazioni Ajax per un rapido sviluppo web. È molto potente e rende la vita molto più semplice quando si scrive JavaScript. Per includere jQuery nella tua pagina web, aggiungi semplicemente quanto segue all'interno del file tag:
Questo utilizza la versione ospitata su Google Code, che ti evita di dover scaricare il file.
API Twitter
Twitter stesso fornisce un'API complicata per consentire l'accesso a ogni genere di cose. Molte di queste complicazioni sorgono intorno all'autenticazione, e necessariamente così, ma per fortuna semplicemente per recuperare un flusso di tweet, l'autenticazione non è richiesta (a condizione che l'utente in questione non abbia nascosto i propri tweet).
Prima di tutto l'API fornisce molti modi diversi per ottenere a gli stati dell'utente. Non entrerò in nessuno di essi oltre a quello che preferisco, e questo è quello di cui parlerò qui: user_timeline.
user_timeline
Ciò restituisce un numero degli stati più recenti pubblicati dall'utente. Può restituire i dati in diversi formati: XML, JSON, RSS e Atom. favore JSON, un formato di interscambio di dati leggero, quindi questo è quello di cui parlerò.
Puoi utilizzare una serie di parametri e un elenco completo di ciò che possono fare è disponibile nella descrizione dell'API di Twitter per user_timeline. Per ora, ne userò solo alcuni rilevanti.
Dammi i tweet!
Per recuperare i dati per un particolare account Twitter (userò pcpro in questo esempio qui) chiami quanto segue:
$.getJSON("http://twitter.com/statuses/user_timeline.json?
screen_name=pc_pro&count=10&callback=?",
function(tweetdata) {
// do some stuff here
});
Ciò restituirà gli ultimi 10 tweet dall'account pc_pro in formato JSON nel formato tweetdata variabile. Per impostazione predefinita, i tweet ritwittati non sono inclusi in questo feed, ma per includerli, aggiungi il file &include_rts=1 parametro precedente e verranno restituiti.
Ovviamente ora dobbiamo dare un senso a questi dati, analizzarli e farci effettivamente qualcosa.
Nella nostra pagina HTML, definisci a e dagli l'id tweet-list. Qui è dove terremo i nostri tweet. Il codice sopra viene quindi esteso per eseguire le seguenti operazioni:
$.getJSON("http://twitter.com/statuses/user_timeline.json? screen_name=pc_pro&count=1O&callback=?", function(tweetdata) {
var tl = $("#tweet-list");
$.each(tweetdata, function(i, tweet) {
tl.append("
});
});
Alcune spiegazioni: var tl = $("#tweet-list"); afferra un riferimento al elemento che abbiamo creato sopra. Ne abbiamo bisogno poiché aggiungeremo ogni tweet ad esso.
$.each(tweetdata, function(i, tweet) {... è l'inizio di un ciclo jQuery, in questo caso iterando attraverso ogni elemento in tweetdata e memorizzarlo temporaneamente in tweet. La riga seguente aggiunge quindi il tweet all'interno di un file articolo. Il testo effettivo del tweet è contenuto all'interno del text data membro, e qui lo mettiamo tra virgolette doppie, e l'ora in cui è stato creato è contenuta all'interno del created_at membro dei dati.
Questo ora visualizzerà gli ultimi 10 tweet in formato elenco sulla pagina HTML pertinente.
Tuttavia, se ci sono collegamenti contenuti nel tweet, non saranno cliccabili e la data di creazione lo è un po' lungo e non come le timeline standard di Twitter come "circa un minuto fa" o "due ore". fa". Possiamo risolvere questo problema con le seguenti due funzioni urlToLink(); che chiamiamo tweet.text:
function urlToLink(text) {
var exp = /(b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
return text.replace(exp,"$1");
}
E relTime(); che chiamiamo tweet.created_at:
function relTime(time_value) {
time_value = time_value.replace(/(+[0-9]{4}s)/ig,"");
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1)? arguments[1]: new Date();
var timeago = parseInt((relative_to.getTime() - parsed_date) / 1000);
if (timeago < 60) return 'less than a minute ago';
else if(timeago < 120) return 'about a minute ago';
else if(timeago < (45*60)) return (parseInt(timeago / 60)).toString() + ' minutes ago';
else if(timeago < (90*60)) return 'about an hour ago';
else if(timeago < (24*60*60)) return 'about ' + (parseInt(timeago / 3600)).toString() + ' hours ago';
else if(timeago < (48*60*60)) return '1 day ago';
else return (parseInt(timeago / 86400)).toString() + ' days ago';
}
Quindi dobbiamo cambiare la riga sopra nella seguente:
tl.append("
Questo verrà chiamato quando la pagina HTML viene caricata (o puoi caricarla un'altra volta, dipende da te ovviamente) e questo viene fatto usando jQuery inserendo il codice all'interno:
$(document).ready(function() {
// code here
});
che sostanzialmente chiama il codice quando l'intero DOM è stato caricato.
Risultato finale
Ho messo insieme un esempio usando tutto il codice sopra, così puoi vedere tutto questo insieme e lavorare da solo. Inoltre puoi visualizzare il codice per vedere come è fatto. È anche tutto commentato, probabilmente in modo eccessivo, nel caso rimani bloccato.
Ovviamente puoi anche modellare l'elenco e i suoi contenuti con i CSS, ma lo lascerò come esercizio per il lettore.
*Aggiornamento*
Uno dei commenti di seguito ha chiesto informazioni sul recupero degli ultimi stati dall'elenco di un account specifico. Ho creato un rapido esempio che recupera e visualizza gli ultimi aggiornamenti dall'elenco Twitter dello "staff" di PC Pro. Ovviamente puoi visualizzare il codice sorgente.
La differenza principale è l'URL incluso nel file &.getJSON() chiamata che dovrebbe essere:
http://api.twitter.com/1/account-name/lists/list-name/statuses.json? callback=?
Dove account-name è il nome dell'account, in questo caso pc_pro, E list-name è il nome della lista, in questo caso staff.
