Inserire gli ultimi aggiornamenti di twitter nel footer del blog

Twitter è diventato uno dei social network più utilizzati, dopo Facebook. Oggi vi propongo una modifica per inserire nel footer nel blog un gadget con gli ultimi aggiornamenti pubblicati sul proprio profilo di Twitter. Una volta inserito nel blog potremo anche personalizzarlo, per esempio impostandone la  larghezza, il colore di sfondo e anche aggiungendo un’icona (eventualmente con un link al nostro profilo su Twitter). Qui potete vedere il risultato.

1. Prepariamo il codice

Copiate questo codice e incollatelo in un blocco di testo:

<!-- inizio widget twitter -->

<div style='width:100%; height:100%; background:#000; border-top:10px solid #666;'>
<div style='width:930px;margin:0 auto; height:100%;'>

<table border='0' cellpadding='0' cellspacing='0' width='900'>
  <tbody>
    <tr>
      <td valign='top' width='650'>
      <incolla qui il CODICE DEL WIDGET>
      </td>

      <td valign='top' width='250'>
      <incolla qui il CODICE DELL'IMMAGINE>
      </td> 
    </tr>
  </tbody>
</table>

</div>
</div>

<!-- fine widget twitter -–>

E’ una semplice tabella a due colonne, nella quale andremo a inserire il gadget fornito da Twitter e un’immagine con un link al nostro profilo.

2. Preleviamo il widget da Twitter

Andiamo alla pagina principale di Twitter, e clicchiamo sul link “goodies” che si trova in basso, nel footer della pagina.



Clicchiamo su “Widgets” 



e alla pagina successiva (“Select your widget”) ci viene chiesto se vogliamo un gadget per facebook o per un sito generico: per inserire questo widget su blogger, selezioniamo l’opzione “My Website”:

   

delle quattro alternative che ci vengono proposte clicchiamo su “Profile Widget”:



Cominciamo dalla scheda “Settings” inserendo il nostro username di Twitter:



Cliccando su “ Preferences” potremo impostare il numero di tweets visualizzati, decidere se mostrare o no l’immagine dell’avatar, e altre opzioni:



Nella parte “Appearence” possiamo scegliere tutti i colori del widget, background e testi:



Infine la scheda “Dimensions” serve appunto a impostare altezza e larghezza del widget. Digitiamo 530 nella prima casella (width) e lasciamo 300 nella seconda (height):



Per avere un’anteprima di come sarà il widget, potete cliccare sul pulsante “Test settings” in basso, e quando avrete finito cliccate su “Finish & Grab Code”:



Teoricamente possiamo anche inserire il widget su blogger cliccando sul pulsante “Add to Blogger”, ma la modifica che vi propongo è leggermente diversa, in qualche modo un po’ più originale.

Il codice che compare nel box è quello che ci serve:



copiamolo e incolliamolo nel blocco di testo che abbiamo aperto al passo 1, inserendolo al posto della riga:

<incolla qui il CODICE DEL WIDGET>

4. Prepariamo l’immagine

Ora inseriremo un’immagine nella colonna di destra della tabella.
Possiamo cercare un’immagine che ci piace su iconfinder, oppure digitare su Google “twitter icon” e avremo l’imbarazzo della scelta.
Quella che uso io l’ho trovata a questo link: http://wefunction.com/2009/05/40-free-twitter-badges/

Questo è il codice da usare:

<a href='http://www.twitter.com/username'>
<img align='left' alt='twitter' border='0' src='http://www.angeloferretti.com/social/t.png' style='border-right: 0px; border-top: 0px; display: inline; margin-left: 0px; border-left: 0px; margin-top: 50px; border-bottom: 0px' title='twitter' width='250' height='170'/>
</a>

La parte in rosso è il link al vostro profilo, quindi sostituite a “username” il vostro nome utente su Twitter;
la parte in azzurro è l’indirizzo dell’immagine (se non avete un dominio potete caricarla online usando un servizio di hosting come imageshack o skydrive; se vi piace quella che uso io lasciate pure com’è l’indirizzo); le parti in arancione sono le dimensioni in pixel dell’immagine (width è la larghezza, height l’altezza).

Una volta modificato con le vostre preferenze, copiate il codice e incollatelo nel blocco di testo al posto della riga:

<incolla qui il CODICE DELL'IMMAGINE>

5. Inseriamo il widget nel blog

Una volta completato il codice, salvate il blocco di testo per sicurezza, e andate nel pannello di controllo del blog, alla voce “Design” > Modifica HTML.
Cercate questa riga nel template:

</body>

e subito sopra incollate tutto il codice che abbiamo salvato del blocco di testo.
Cliccate su anteprima per verificare il risultato, e se tutto è andato a buon fine salvate il template.