Per far visualizzare gli ultimi micropost di Twitter sul proprio sito esistono già da un po’ parecchie soluzioni, sopratutto pensate per le piattaforme di blogging più diffuse.

Esiste inoltre un servizio proprietario mosso e promosso dallo stesso sito Twitter, il quale genera dei cosiddetti widget, ossia dei piccoli box che non fanno altro che riportare sulle tue pagine personali i tuoi ultimi post. L’unica pecca di questi servizi è legata alla scarsa scelta estetica che si ha a disposizione, infatti non tutti questi box riescono ad integrarsi al meglio con il layout scelto da noi.

Si può scegliere in alternativa di creare un widget Twitter completamente personalizzato, così da  adattarsi al meglio alle nostre esigenze.

Per prima cosa bisogna collegarsi al sito di Twitter e logarsi con il proprio username e password, una volta fatto questo ci si deve recare sulla parte inferiore della pagina e cliccare sulla parte dedicata alle Applicazioni con Twitter (Apps).
Qui troveremo una serie di software e servizi che permettono l’utilizzo di Twitter, quello che interessa a noi è il primo, identificato come Widget e proseguiamo con la scelta; dopo aver cliccato ci si aprirà una pagina che ci domanda su quale piattaforma vogliamo postare il nostro widget di Twitter, e, se non utilizziamo nessuna di quelle indicate, scegliamo la voce “Other” e continuiamo selezionando la versione in HTML, in maniera da poterla controllare con gli stili che meglio vogliamo.
Dopo tutto questo otterremo un codice HTML da copiare ed incollare nella posizione in cui vogliamo siano visualizzati gli ultimi post; inoltre possiamo scegliere anche il numero di post da far vedere e il titolo di richiamo.

Già così, se avete scritto un buon codice CSS, il risultato può essere gradevole, ma se volete personalizzare al meglio l’effetto potete ricorrere ai fogli di stile.

Ecco qui un esempio del lavoro finito.

Per iniziare prendiamo il codice HTML generato e incolliamolo dove vogliamo:

[code lang=”html”]</pre>
<div id="twitter_div">
<h2 class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display: block; text-align: right;" href="http://twitter.com/sickbrain">follow me on Twitter</a></div>
<pre>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/sickbrain.json?callback=twitterCallback2&count=5"></script>
[/code]

Guardandolo bene ci renderemo conto che non è altro che un sistema per generare una lista dei nostri ultimi post; se volete potete modificare il titolo contenuto tra gli H2 e il link che collega al vostro account Twitter. Da notare anche che nel JavaScript terminale è riportato il numero dei post che volete siano visibili, cambiando quello si avrà un numero maggiore di elementi.

Nell’esempio io ho scelto di far comparire l’icona di Twitter all’inizio di ogni post, e per fare questo ho dovuto trovarla e mi è giunto in aiuto DeviantART; una volta che ho ridimensionato l’immagine in base alle mie esigenze ho iniziato a scrivere il CSS basandomi sull’ HTML che abbiamo visto più su.

Quindi:

[code lang=”css”]
#twitter_div {
float: left;
width: 210px;
display: inline;
padding-bottom: 30px;
}
#twitter_div h2 {
font-size: 2em;
font-weight: normal;
background: url(‘bg-headings.gif’) repeat-x 0 100%;
margin: 21px 0 15px;
padding-bottom: 5px;
letter-spacing: -1px;
color: #A0522D;
font-family: Arial, Helvetica, sans-serif;
}
#twitter_div li {
font-size: 1.2em;
line-height: 1.3em;
padding: 5px 0 5px 15px;
background: url(‘twitter-li.gif’) no-repeat 0 7px;
color: #4e4e4e;
display: block;
width: 195px;
border-bottom: 1px dotted #ccc;
}
#twitter_div li a {
color: #4e4e4e;
}
#twitter_div li a:hover {
color: #118cca;
}[/code]

Mi sembra che sia tutto molto semplice da capire, comunque dopo aver definito le dimensioni di #twitter_div e le caratteristiche di #twitter_div h2 ho pensato ad impostare l’icona all’inizio di ogni post.

In #twitter_div li con il padding determino la distanza del testo in riferimento all’immagine; la stessa immagine viene richiamata in automatico come sfondo e non ripetuta, oltre che posizionata sia in senso orizzontale che verticale. Oltre questo il display:block; mi permette di non far visualizzare il puntino tipico delle liste ordinate; il bordo inferiore punteggiato chiude il tutto.

Il restante codice controlla il comportamento dei link, ma questo è totalmente a discrezione vostra.