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!
Volevo solo far notare che la seconda riga di codice Javascript non funziona più. Per chiunque implementi questo, assicurati di sostituire la seconda riga di codice con la seguente:
Leland, potresti voler aggiornare il tuo post per riflettere questo.
Rich – sembra che il tuo codice sia scomparso... puoi provare a pubblicare con alcuni spazi per favore???
Grazie
Sembra che questo non funzioni più. Idee?
Caro Leland,
Sai perché l'app feed di Twitter che hai pubblicato sul tuo sito non funziona più. Anche sul tuo sito non funziona.
Spero di sentirti.
Cordiali saluti,
André van Wijngaarden
Twitter ha fondamentalmente cambiato l'URL per i suoi feed. Dato che tutto il resto funzionava ancora, avevo ipotizzato che potesse essere questo il caso.
——
Invece di utilizzare l'URL fornito nel tutorial sopra: http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3
... Vorrai usare l'URL che ti fornisco di seguito: http://api.twitter.com/1/statuses/user_timeline.json?screen_name=USERNAME&include_rts=true&count=3&callback=twitterCallback2
Il "count" si trova ora al centro dell'URL invece che alla fine, insieme al nome utente.
Buon divertimento.
<3 ~ CaT
il mio commento è ancora in attesa di moderazione, ma ho trovato la soluzione sul sito degli sviluppatori di twitter.
https://dev.twitter.com/discussions/11701
cambia questo:
in questo:
Questo metodo non funziona più?
Vedo che anche questo sito ha lo stesso problema nel tuo widget nel footer.
Ci sono aggiornamenti?
Per qualche motivo questo ha smesso di funzionare sul mio blog. Hai idea del perché?
Ho dovuto passare a un widget jquery per il resto del mio sito, ma questo non funziona in wordpress 🙁
Funziona ancora? Vedo solo la scritta "twitter feed loading". Se no, hai un altro modo?
Stavo usando questo metodo su alcuni siti di clienti. Recentemente ha smesso di funzionare ovunque. Sembra che non funzioni nemmeno nel footer qui (themelab.com).
Ahhh! Qualcuno ha una soluzione?
La chiamata API "http://twitter.com/statuses/user_timeline/USERNAME.json?" usata qui è stata deprecata, quindi sostituiscila con la seguente:
https://api.twitter.com/1/statuses/user_timeline.json?screen_name=USERNAME&count=2&callback=twitterCallback2
C'è un modo per rendere la lista completamente orizzontale?
In modo che tutti e tre i tweet vengano visualizzati in fila invece che impilati uno sull'altro?
(Lo sto usando come un carosello)
Voglio che il primo tweet scorra, poi il secondo tweet... e così via.
Invece che tutti e 3 visualizzati contemporaneamente.
Scusa per aver ripreso un post così vecchio, ho implementato il tuo codice e funziona benissimo per IE9, ma non carica per FF 14. Ho avuto problemi simili anche con i plugin di twitter. Chrome, blackberry funzionano tutti bene e caricano. Potrebbe essere un problema con il mio CSS e qualcos'altro che causa il blocco in FF?
Per il bene di altri n00b come me: sostituisci USERNAME nel codice sopra con il tuo vero nome utente di Twitter. 😉
Grazie per questo!
Puoi anche selezionare il link del timestamp con una pseudo-classe:
#twitter_update_list a:last-childTutorial 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?