Buon pomeriggio!
Piccolo ritorno della rubrica "L'ho fatto io". Oggi vi illustrerò brevemente come inserire nel proprio sito/blog il twitter widget che mostra le vostre utlime twittate. Eccolo qui:
Inutile dire che occorre avere un account Twitter. Una volta effettuato l'accesso a Twitter dovete:
1- andare nella sezione "Impostazioni" cliccando sulla piccola freccia accanto al nostro nome utente in alto a destra.
2- dalla videata delle impostazioni scendiamo fino in fondo e sul piccolo menu orizzontale clicchiamo "Risorse"
3- scegliamo "Widget" e successivamente Widget per... il mio sito web.
4- comparirà una lista di 4 widget disponibili. A noi interessa quello degli aggiornamento recenti, quindi clicchiamo su "Widget del profilo".
5- Personalizziamo il nostro wiget scegliendo quanti contenuti visualizzare, il nome da visualizzare, i colori del widget e le dimensioni.
6- Clicchiamo su "Termina ed ottieni il codice". Questo codice andrà incollato nel nostro sito/blog nel punto in cui vogliamo inserire il widget.
Il widget è fatto! Se noterete una cosa, la grafica del widget che ho inserito io è differente da quella classica fornita da Twitter. Come si può fare per modificarla?
Torniamo al nostro esempio. Nel mio caso ho inserito un' immagine di sfondo, questa qui:
ed ho eliminato l'anteprima dell'avatar con il nome con alcune regole sul foglio di stile. Per inserire un'immagine di sfondo bisognerà modificare qualche riga del codice dello script fornitoci da Twitter. Niente di complicato, basterà inserire l'url dell'immagine che vogliamo come sfondo alla proprietà "Background". Di seguito ho evidenziato il codice:
<script src="http://widgets.twimg.com/j/2/widget.js"></script> <script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 1,
interval: 30000,
width: 230,
height: 100,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: 'url(http://i1181.photobucket.com/albums/x429/oltrebyoltrestardoll/twitter.jpg)',
color: '#000000',
links: '#0735eb'
}
},
features: {
scrollbar: false,
loop: false,
live: true,
behavior: 'all'
}
}).render().setUser('oltrebyoltre').start();
</script>
Invece, per nascondere l'avatar ed il nome mi sono limitata ad inserire due piccole regole:
.twtr-hd {display:none;}
.twtr-ft div {display;none;}
Ecco fatto. Twitter Widget pronto!
Pacman
Nostradamus
Magical Cat Adventure
Snake