29 giugno 2011

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

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

tweet e segui su twitter 

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.




10 commenti:

  1. Io ho inserito quello ufficiale di Twitter che è molto molto simile a quello da te presentato. Mi sembra praticamente uguale. :P

    Ciao Parsi. :)

    LeNny.

    RispondiElimina
  2. @LeNny
    Sì è veramente molto simile :)

    RispondiElimina
  3. ti segnalo che con explorer 9 sia con il tuo widget che con quello originale di Twitter, non si vedono i tweet all interno, come farli vedere?

    RispondiElimina
  4. @ivabellini
    Questo widget è visibile sia con IE8 che con IE9 (OS Windows)

    RispondiElimina
  5. Parsi, ti confermo quanto detto da ivabellini. Sia il tuo widget che quello originale non si vedono con IE9. Anche sul mio Blog.

    Ciao. :)

    RispondiElimina
  6. @LeNny
    Ho controllato meglio. Con IE8 si vede ma con IE9 non si vede. Visto che questo vale anche per il widget ufficiale di Twitter è chiaro che dipende dagli script che ci hanno dato nelle API. Cioè questo
    http://twitter.com/javascripts/blogger.js o questo
    http://platform.twitter.com/widgets.js
    allo stato non possiamo ovviamente farci nulla

    RispondiElimina
  7. @Parsi:

    Infatti, dobbiamo attendere che aggiornino le API. Ho già segnalato loro il problema, magari segnalalo anche tu.

    Ciao. :)

    RispondiElimina
  8. ho risolto su wordpress con un plugin, allora per blogger ci sarà da aspettare prima di vedere Twitter con Explorer 9 :(

    RispondiElimina
  9. @Parsi:

    Hanno aggiornato le API, ora si vede perfettamente anche con IE9 (se per caso qualcuno utilizzasse ancora tale "browser")

    Ciao Parsi. :)

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.