Mi è stato chiesto più volte quale plugin WordPress uso per generare la lista "Twitter Feed" nel footer del mio sito. In realtà non uso affatto un plugin, è uno snippet di Javascript di Twitter che visualizza un elenco dei miei tweet recenti che ho stilizzato con CSS. In questo tutorial, ti mostrerò:
- Il codice HTML e Javascript necessario per recuperare gli ultimi tweet
- Una panoramica del markup HTML e dei selettori CSS associati
- Due esempi di widget Twitter personalizzati che ho usato io stesso
Continua a leggere per vedere il resto del tutorial…
L'HTML e il Javascript
Twitter forniva questo codice sul suo sito, ma per qualche motivo lo ha rimosso a favore di questi widget molto meno flessibili. Avrai bisogno di due pezzi di codice.
Innanzitutto, inserisci il seguente codice dove vuoi che appaia la lista:
<ul id="twitter_update_list"><li>Twitter feed loading</li></ul>Nota: Il tag <li>Twitter feed loading</li> non fa parte del codice originale fornito da Twitter, ma è necessario per convalidare l'HTML. Può anche fornire un messaggio utile mentre il feed è in caricamento, poiché potrebbe richiedere alcuni secondi in una giornata lenta.
In secondo luogo, dovrai inserire le seguenti righe di Javascript il più vicino possibile al tag </body>.
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>Attualmente lo ho subito sopra il mio codice di Google Analytics. Dovresti mantenere queste righe di Javascript il più in basso possibile nella pagina perché nel caso in cui Twitter non si carichi, tutto ciò che si trova sotto quel codice si bloccherà (il che non è un grosso problema se è già in fondo).
Panoramica del markup HTML e dei selettori CSS
Ora non puoi vedere il markup HTML generato dal widget di Twitter senza usare qualcosa come Web Developer Toolbar. Fortunatamente per te, l'ho fatto io. Ecco un esempio di lista con un solo tweet come esempio.
<ul id="twitter_update_list">
<li><span>RT @<a href="http://twitter.com/Screenr">Screenr</a>: Cool Screenr update: Now your screencasts publish twice as fast. <a href="http://screenr.com/aDp">http://screenr.com/aDp</a></span> <a style="font-size: 85%;" href="http://twitter.com/themelab/statuses/14229492866">46 minutes ago</a></li>
</ul>#twitter_update_list– Seleziona l'intera lista#twitter_update_list li– Seleziona singoli elementi della lista#twitter_update_list li span– Seleziona la parte "tweet" dell'elemento della lista, non il link "tempo fa"#twitter_update_list li span a– Seleziona il link all'interno della parte "tweet" dell'elemento della lista#twitter_update_list a[style="font-size: 85%;"]– Seleziona il link "tempo fa", in modo un po' hacky (vedi nota sotto).
Nota: Poiché c'è uno stile inline nel link "tempo fa" che imposta la dimensione del carattere all'85%, rende un po' difficile sovrascriverlo senza un pezzo di codice hacky. Ho usato questo in precedenza per reimpostare la dimensione del carattere alla stessa del resto della lista:
#twitter_update_list a[style="font-size: 85%;"] { font-size: 1em !important; }Questo probabilmente non funziona nelle prime versioni di IE a causa della parte "!important". Puoi anche usare display: block; per spostare quel link alla riga successiva.
Esempio Live
Per un esempio live, controlla il footer di Theme Lab. Oppure, se stai leggendo questo nel tuo lettore di feed o su un sito scraper non autorizzato, controlla lo screenshot qui sotto.
Ecco il codice che uso per la lista:
#twitter_update_list {
font-size: 13px;
line-height: 21px;
list-style: none;
}
#twitter_update_list li {
background: url('images/twitter-divider.gif') bottom left repeat-x;
padding-bottom: 7px;
margin-bottom: 9px;
}
#twitter_update_list span, #twitter_update_list span a {
color: #ababab;
text-decoration: none;
}
#twitter_update_list a {
color: #6f7276;
}- La prima riga seleziona l'intera lista. Imposta la dimensione del carattere, l'altezza della linea e si assicura che non vengano visualizzati punti elenco.
- La seconda riga crea un'immagine 2x1 che si ripete sotto ogni elemento dell'elenco come una sorta di divisore. Il padding imposta lo spazio tra il tweet e il bordo superiore del divisore. Il margine imposta lo spazio tra il bordo inferiore del divisore e il tweet successivo.
- La terza riga imposta il colore del tweet, inclusi i link, e assicura che nessuna riga venga visualizzata sotto i link.
- L'ultima riga imposta il colore del link "tempo fa".
E questo è tutto! Se dovessi cambiare una cosa, differenzierei in qualche modo i link all'interno del tweet e forse aggiungerei effetti al passaggio del mouse sui link.
Questo può essere utilizzato su qualsiasi sito
A differenza di tutti gli altri post su come fare XYZ senza un plugin, in questo tutorial non viene utilizzato alcun codice WordPress.
Poiché non utilizza codice WordPress, non è inserito nella raccolta Tutorial WordPress. Può essere utilizzato su quasi ogni tipo di sito, supponendo che tu possa modificare il codice sorgente HTML e CSS.
Se vuoi usarlo all'interno di WordPress, ti suggerirei di modificare manualmente i file del tuo tema per inserire le due righe di Javascript nel footer del tuo sito, o persino agganciarlo al tuo hook wp_footer().
Per quanto riguarda il widget stesso, puoi incollare il codice all'interno di un widget di testo o codificarlo manualmente nella tua barra laterale (o ovunque).
Conclusione
Spero che il tutorial vi sia piaciuto, mi piacerebbe sentire i vostri pensieri nei commenti. Se avete richieste per rapidi suggerimenti su WordPress o CSS, non esitate a farmelo sapere. Potrebbe essere presentato in un futuro post di Tutorial Tuesday su Theme Lab!
Tutorial brillante. Grazie.
Puoi dirmi come far sì che il link "ago" si posizioni in basso a destra, lontano dal testo, come hai fatto sul tuo sito web.
Molte grazie
Se c'è qualcuno interessato alla traduzione in altre lingue del link "time ago" vi dico che ho appena scaricato blogger.js, l'ho modificato e funziona.
Devi solo tradurre le didascalie, non toccare il codice, ecco un esempio.
if (delta < 60) { return 'hace menos de un minuto'; } else if(delta < 120) { return 'hace aproximadamente un minuto'; } else if(delta < (60*60)) { return 'hace ' + (parseInt(delta / 60)).toString() + ' minutos'; } else if(delta < (120*60)) { return 'hace aproximadamente una hora'; } else if(delta < (24*60*60)) { return 'hace ' + (parseInt(delta / 3600)).toString() + ' horas'; } else if(delta < (48*60*60)) { return 'hace un dia'; } else { return 'hace ' + (parseInt(delta / 86400)).toString() + ' dias'; }
A proposito, grazie mille per il tutorial, mi ha aiutato molto.
Ciao Leland,
Grazie per il tuo script! Quasi funzionante come voglio... C'è modo di sistemare la dimensione della lista? Voglio generare la lista all'interno di una cella, ma quando i tweet superano la cella, la cella esplode!
Fantastico, ma non ottengo risultati (neofita di .js). Il mio sito (callumflack.com) mostra solo "twitter feed loading" senza effettivamente caricare il feed di Twitter. Ho ricontrollato tutto in questo post, ma niente. Cosa mi sono perso? Il tuo aiuto è molto apprezzato.
grazie per questo 🙂 puoi cambiare i link all'interno dei tweet usando '#twitter_update list span', poi l'ora dei tweet usando '#twitter_update list span a'. inoltre, usando last-child rimuovi la linea orizzontale sotto l'ultimo tweet. vedi sotto per il mio codice.
#twitter_update_list { font-size: 10px; line-height: 15px; list-style: none; }
#twitter_update_list li { background: url(‘images/1px-grey.gif’) bottom left repeat-x; padding-bottom: 10px; margin-bottom: 10px; }
#twitter_update_list li:last-child { background: none; }
#twitter_update_list span { color: #856f6a; text-decoration: none; display: inline; }
#twitter_update_list span a { color: #fb3898; display: inline; }
#twitter_update_list a { color: #b3a39f; display: block; }
Non preoccuparti, ho capito. È questo:
http://api.twitter.com/1/favorites.json?screen_name=USERNAME&callback=twitterCallback2&count=5
Grazie per questo. Per chi ha chiesto...
Puoi cambiarlo in una lista modificando la prima parte dell'URL nel secondo script da:
http://twitter.com/statuses/user_timeline/USERNAME.json?
a
http://api.twitter.com/1/USERNAME/lists/LISTNAME/statuses.json?
Ciao,
Buon tutorial. Tuttavia il mio sito ha iniziato a mostrare 3 tweet, ora è molto sporadico e a volte decide di mostrarne 2 o 1.
Sto facendo il tonto?
Rob
Questa è una buona domanda. Ho notato che quando ritwitti (come nel retweet in stile Twitter ufficiale) qualcosa, non viene visualizzato e invece mostra solo un tweet in meno.
Detesto profondamente l'aspetto dei feed ufficiali di Twitter, quindi sono stato felice di trovare il tuo sito. Il tutorial è stato molto informativo e facile da seguire, e non vedo l'ora di incorporarlo nel redesign del mio sito web.
Ottimo articolo.
Ho dovuto modificare la & top & in modo che l'HTML fosse valido.
Bel lavoro!
So che questo è stato pubblicato un po' di tempo fa, ma c'è un modo per separare il tweet più recente dai tweet precedenti in modo da poter mettere un'etichetta su di essi come "Ultimo Tweet" e "Tweet più vecchi"?
Adoro questo! C'è un modo per forzare i link all'interno di ogni tweet ad aprirsi in una nuova finestra?
Non sono sicuro di dove vada ogni pezzo di codice nel mio sito wp: puoi confermare...
1° pezzo: dove voglio il feed (es. widget di testo)?
2° pezzo: foglio di stile?
3° pezzo: ?
4° pezzo: ?
5° pezzo: ?
Grazie in anticipo
Mi sento stupido... Ma... Dove si scrive il nome utente??? Non capisco... Se copio/incollo non funziona...
Questo è un piccolo widget fantastico. Una nota: se aggiungessi "position: relative;" all'elemento HTML che ha "overflow: auto;", risolveresti un bug che si verificava in IE7 (in pratica la casella di scorrimento non funzionava).
Tutorial molto bello, l'unico problema è (a meno che non abbia fatto qualcosa di sbagliato) che mostra solo i tuoi tweet personali, non ad esempio se ritwitti qualcosa. Il che è un peccato :/
Cambia semplicemente
count=3incount=6nello snippet Javascript.Ciao,
Penso che se cambi il tuo Javascript per includere "&include_rts=1" subito dopo il tuo nome utente, ad esempio: http://api.twitter.com/1/statuses/user_timeline.json?screen_name=thelibzter&include_rts=1&callback=twitterCallback2&count=6.
Ecco un post che ho scritto su come includere i retweet nel feed Twitter personalizzato: http://icode4you.net/including-retweets-in-your-custom-twitter-feeds.
Ciao,
Grazie per la tua grande condivisione e il tuo lavoro. Sto usando il tuo metodo Twitter sulla mia homepage e mi piace.
Al momento, mostra 3 tweet. Posso raddoppiarli a 6?
Grazie in anticipo!
Saluti
Xavier
Grazie per questo, è ESATTAMENTE quello di cui ho bisogno per il mio sito web - ha funzionato alla grande!
c'è un modo per usare questo codice con più feed di Twitter? diciamo che volessi mettere il feed di qualcun altro direttamente sotto il primo sulla stessa pagina, come potrei fare?
grazie.
È un'ottima domanda, ma non sono sicuro che sia possibile con questo metodo poiché il feed è direttamente collegato a un singolo nome utente.
Ho la sensazione che se aggiungessi più righe di
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>con nomi utente diversi, si confonderebbe in qualche modo.Ottimo tutorial. Stavo cercando qualcosa esattamente come questo.
Una domanda, è possibile con questo codice cambiare il feed da un utente specifico a una lista Twitter specifica?
Buona domanda, anche se per quanto ne so questo codice funziona solo con utenti specifici.
Tutorial veramente eccellente, specialmente l'hack "time ago". Grazie mille per averlo pubblicato!
esattamente quello che mi serve per il mio redesign. grazie per questo.
Grazie mille per questo semplice consiglio! Ha funzionato su un sito che per qualche motivo ha disabilitato javascript. Non mostra la grafica, ma funziona! E anche i link (come twitpic e bit.ly) funzionano!
Ottimo lavoro amico!
Fantastically helpful, thanks. Interesting that http://twitter.com/javascripts/blogger.js and the like are still there, without any obvious links from twitter.com.
Well hopefully they will keep it supported for legacy purposes for some time to come, a lot of people still use it.
Non so perché Twitter abbia rimosso questi widget dal suo sito web, ma prima, quando lo usavo sul mio sito Blogger, funzionava molto bene.
I think they removed it in favor of their more “branded” widgets, although the code they used to have up (the same code I’m using) still works.