Widget personalizzabile di Twitter con pulsante Follow.

Ho già avuto modo di presentare il pulsante Segui su Twitter che fa il paio con il Mi Piace di Facebook e da un po' anche con il Plusone di Google+. Non sono molti i blog che lo hanno installato però vedo che in diversi siti è presente il flusso dei tweet del proprio account. Vediamo come sia possibile creare un widget che racchiuda sia il pulsante di iscrizione che gli ultimi aggiornamenti della nostra pagina su Twitter. Ho fatto un test e creato un

• Post di Demo del widget del flusso dei tweet con pulsante Segui su Twitter -

Il gadget può essere personalizzato nei colori e nelle dimensioni e ha un aspetto simile a questo

 

Nella parte alta è visibile il pulsante per seguire l'utente insieme al contatore con il numero dei follower mentre in basso sono mostrati gli ultimi tweet pubblicati sull'account. Lo stile dell'elenco è quello mutuato dal blog e può quindi variare da sito a sito. Per la sua installazione si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla il seguente codice

<style type="text/css">
.twitterlist {
margin:0px auto;
width:200px;
padding:5px 10px 10px 10px;
background:#FFEAE9;
color:#003366;
text-align:left;
}
</style>
<div class="twitterlist"><a href="http://twitter.com/parsifal32" class="twitter-follow-button" data-lang="it">Follow @parsifal32</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script></div>
<div class="twitterlist">
<ul id="twitter_update_list"></ul>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript">
</script>
<script src="http://twitter.com/statuses/user_timeline/parsifal32.json?callback=twitterCallback2&amp;count=5" type="text/javascript">
</script>

La cosa fondamentale da cambiare è il nome utente che dovete sostituire al mio (parsifal32). Le altre personalizzazioni riguardano:

1. Un eventuale margine con la parte alta del layout (0px)
2. La larghezza del widget da adattare a quella della sidebar (200px)
3. I margini interni al widget (padding). Il primo numero è la distanza dalla parte alta, mentre gli altri fissano le altre tre distanze in senso orario.
4. Il colore di sfondo del widget (#FFEAE9)
5. Il colore del testo dei tweet (#003366)
6. La posizione del testo (left)
7. Il numero dei tweet da mostrare (5)

Si clicca su Salva e si posiziona con il mouse su Design > Elementi pagina.