Crea un Widget Twitter Personalizzato Senza Plugin

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!