Twitter: 5 temi pronti per l’uso per visualizzare gli ultimi tweet sul tuo sito
Siamo ormai vicini al Natale, periodo si sa, in cui avviene il consueto scambio di regali tra amici e parenti. E anche noi non volendo essere da meno iniziamo la settimana con una nuova risorsa gratuita targata YIW.
Nell’articolo di Ivan – che hai già avuto modo di leggere la scorsa settimana – hai visto come integrare e personalizzare i tuoi ultimi tweet all’interno del tuo sito; oggi, sulla base proprio di quell’articolo, abbiamo deciso di regalarti cinque diversi temi già pronti e funzionanti disegnati e sviluppati appositamente per te.
DownloadDiamo uno sguardo ai cinque temi di Twitter
Prima di descriverti dettagliatamente come integrare e personalizzare i temi all’interno del tuo sito, desidero mostrarti le caratteristiche che contraddistinguono ciascuno dei temi che ti stiamo offrendo.
Di ciascun tema è disponibile, oltre ad uno screenshot, anche una live preview che ti permette di vederne nel dettaglio gli elementi distintivi.
Twitter Crazy
Questo tema è caratterizzato da colori tenui e una simpatica caricatura dell’uccellino di Twitter. Perfetto se vuoi arricchire il tuo sito in modo allegro e cerchi una sezione di twitter originale e vivace.
Twitter Baloon
Font e icona in stile sketchy e baloon: un tema giovanile ma allo stesso tempo sobrio e adatto a più layout.
Twitter Pop
Colori accesi e caldi a contrastare l’azzurro dell’icona di Twitter e un font più particolare: tutti dettagli che rendono questo tema vivace e accattivante.
Twitter Romantic
Non poteva mancare un tema con uno stile più dolce, leggero, femminile. Ogni particolare evoca grazia e sensualità: l’utilizzo del rosa, il font romantic style, l’icona di Twitter stilizzata.
Twitter Christmas
Per chi ama agghindare “a festa” il proprio sito: dopo l’icona rss con il cappellino di babbo natale e i social network in versione natalizia, con questo tema puoi personalizzare anche la sezione di Twitter. Un modo simpatico per augurare buone feste ai visitatori del tuo sito!
Contenuto del pacchetto
Il pacchetto che ti mettiamo a disposizione per il download contiene:
- Il file sorgente in formato “PSD”: per modificare facilmente i cinque temi disegnati da Sara.
- Cinque cartelle, una per ogni tema, contenenti tutti i file necessari per il corretto caricamento di ogni specifico tema. I file che trovi all’interno di ciascuna cartella sono i seguenti:
- Una pagina HTML: (denominata “index.html”) che carica il tema già pronto e funzionante.
- Una cartella denominata “images”: con tutte le immagini utilizzate dal tema.
- Il foglio di stile utilizzato dal Tema, denominato “screen.css”.
- Lo script “twitter.js” personalizzato sulla base di ciò che vogliamo visualizzare.
- Uno screenshot che comprende un’anteprima generale dei cinque temi.
- Un file “readme.txt” che contiene la licenza e i credits.
Installazione
L’installazione del modulo è molto semplice e può essere eseguita seguendo questi semplici passi:
- Dopo aver scaricato il file denominato “twitter-theme.zip”, decomprimi l’archivio all’interno di una cartella vuota.
- Troverai una cartella per ogni tema di Twitter che abbiamo realizzato, così come mostrato nell’immagine sotto:
- Spostati all’interno della cartella che si riferisce al tema di Twitter che hai deciso di installare sul tuo sito.
- Apri il file denominato “index.html” con il tuo editor preferito e copia e incolla sulla pagina del tuo sito – nel punto esatto in cui vuoi mostrare gli ultimi tweet – la porzione di codice che vedi selezionata all’interno del rettangolo rosso nell’immagine sotto (clicca per ingrandirla):
- Apri il foglio di stile denominato “screen.css” e copia e incolla sul tuo foglio di stile la porzione di codice compresa tra i commenti come mostrato nell’immagine sotto (clicca per ingrandirla):
- Crea una cartella chiamata “images” e copia e incolla al suo interno il contenuto della cartella images del tema.
Personalizzazione
Per visualizzare i tuoi ultimi “tot” tweet all’interno del sito devi procedere come segue:
- Trova la seguente riga di codice all’interno del tuo file html:
<script src="http://twitter.com/statuses/user_timeline/YIW.json?callback=twitterCallback&count=2" type="text/javascript"></script>
- In questa riga di codice sostituisci la stringa “YIW” con il tuo username di Twitter.
- Sempre in questa riga di codice imposta il numero di tweet che desideri visualizzare modificando il numero di “count” come mostrato nell’immagine sotto (clicca sull’immagine per ingrandirla):
Inoltre per altre personalizzazioni estetiche ogni tema fornisce le seguenti classi css:
- ul#twitter_update_list {contiene la larghezza della sezione dedicata a Twitter e l’immagine di sfondo che viene posizionata in alto}
- ul#twitter_update_list li { si definisce il colore di sfondo del corpo della sezione e altre impostazioni riguardanti ogni elemento della lista}
- .divisor {linea separatrice tra un tweet e l’altro}
- .data {il colore da assegnare alla data}
- .data:before {contenuto che viene aggiunto prima della data grazie all’utilizzo di questa pseudo classe}
- .data:after {contenuto che viene aggiunto dopo la data}
- a:link, a:visited {colore dei collegamenti ipertestuali}
- a:hover, a:active {colore dell’hover relativo ai collegamenti ipertestuali}
- #bottom {dimensione e immagine di sfondo che chiude la nostra sezione Twitter}
Se vuoi modificare il contenuto di ciò che è mostrato dallo script “twitter.js”, fai riferimento all’articolo di Ivan, dove ne spiega dettagliatamente il funzionamento.
Note di rilascio
Questa risorsa è rilasciata sotto Licenza Creative Common (CC 2.5 Attribuzione Italia).
Conclusione
Spero tu possa trovare di tuo gradimento i cinque temi che abbiamo realizzato e approfitto di questo articolo per farti alcune domande, dato che anche su questo argomento mi piacerebbe confrontarmi con te: hai integrato Twitter all’interno del tuo sito o blog? E qual è il tuo pensiero riguardo l’utilizzo di questo Social Network?
Aspetto di leggere il tuo parere.
DownloadL'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
15 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Ottimo :D
Grazie Fabrizio, come ho scritto alla fine dell’articolo spero di riuscire a sentire anche il tuo pernsiero riguardante l’utilizzo di questo social network.
Questi temi sono davvero spettacolari! Rinnovo per l’ennesima volta i complimenti a tutti voi =)
Per quanto riguarda le domande che poni, io non ho ancora integrato twitter sul mio blog perchè non ho ancora creato un account e se proprio devo essere sincera non ho capito ancora l’utilità di questi messaggi composti da max 140 caratteri.
Per chi per esempio utilizza già Facebook, non sarebbe solo una ripetizione e tra l’altro molto più limitante rispetto appunto a Facebook?
Ho come l’impressione che si tratti di un fenomeno più di moda che altro, ovviamente sto parlando da perfetta ignorante in materia, dovrei prima iscrivermi e provarlo per poter dare una mia opinione un po’ più valida.
Ciao Cry e grazie per i complimenti, a nome di tutti noi.
Per quanto riguarda la differenza tra twitter e facebook ti posso dire che anche se a prima vista possono sembrare molto simili tra di loro, in realtà sono due social network del tutto differenti.
Twitter, se saputo utilizzare, può risultare una sorgente di traffico notevole verso il tuo sito.
Puoi cercare le persone che ti interessa avere nel tuo network di amicizie sulla base degli interessi comuni e condividere con loro tutto ciò che vuoi promuovere con la possibilità di ottenere un “effetto virale” con il minimo sforzo e completamente gratis.
Ovvviamente, ripeto, deve essere saputo utilizzare. Quello che molti ancora non capiscono è che è inutile avere una lista di followers a quattro cifre ottenuta con metodi “forzati”, molto meglio averne 10 interessati e di qualità.
Comunque è un fenomeno molto interessante da studiare con tanti altri aspetti da prendere in considerazione, mi sa che prossimamente scriverò un articolo in merito.
Grazie Nando per le delucidazioni. Aspetto allora di leggere il tuo articolo per approfondire l’argomento Twitter.
Si Cry, l’ho appena aggiunto alla mia “infinita” lista delle cose da fare =)
Carini i temi, molto divertenti =)
Uso twitter (4 account per 4 cose diverse) ed e’ integrato sul sito; pero’ mi sto spostando su identi.ca dal momento che e’ una piattaforma basata su open source (e la cosa mi piace parecchio).
Ma a che serve?
E’ la versione global degli sms secondo me, un modo per farsi fare i cavoli propri da tutti sperando che qualcuno ci noti e faccia di noi i nuovi Mughini del cyberspazio =)
Ciao Claudia, ecco, per riprendere il discorso intrapreso con Cry, quella che hai scritto è una delle regole che reputo fondamentali per un corretto utilizzo di twitter: diversificare gli account quando ci rivolgiamo a più settori diversi.
identi.ca ancora non lo conoscevo, ma non pensi che spostandoti su un social con una rete di utenti molto più limitata questo possa limitare di conseguenza anche i vantaggi che ne derivano?
ps. nel widget dei social, sul tuo blog, manca il collegamento al tuo account… proprio su twitter =)
Nando, grazie per avermi segnalato l’errore sulla widget.. il calzolaio va in giro con le scarpe rotte =)
identi.ca lo uso per il mio account personale, essendo Twitter molto piu’ social e’ quasi scontato che restera’ l’account centrale per ./lsd; mentre il mio account personale e’ chiuso al pubblico, e’ una cosa molto personale che non mi va di condividere con tutto il mondo, mi bastano alcuni amici e persone a me care =)
Gli altri due account riguardano il blog della vela (che ha quindi un suo target specifico) e.. un pout-pourri =) KV0 funziona da “spambot”: collegato a friendfeed e a tutti i “social sites” rielabora e butta fuori tutto quello che salvo, tutto quello che e’ condiviso etc etc. Certo, non e’ l’account a cui far puntare le cose importanti, ma serve per generare traffico “pulito” sugli account.
Per quel che concerne la sua utilita’, come diceva Cry, tutto alla fine e’ una ripetizione: si hanno gli stessi amici su tutti i social network limitando la potenziale crescita; ma utilizzando i servizi in modo buono (quindi puntando sulla qualita’ dei followers e dei contenuti) si riesce a non regredire allo stato di ricettacolo di notizie; lo vedo come una specie di aggregatore/streamlife che puo’ arrivare a chi non usa altri servizi come Facebook (che aborro) o altro.
E poi e’ sempre una questione di gusti =)
Di nulla, Cla, figurati =)
Per quanto riguarda identi.ca adesso mi è molto più chiaro il tuo intento, pensavo avessi intenzione di migrare i tuoi account principali su questo social.
Su Twitter vedo che utilizzi gli account in modo correttissimo, ma anche Facebook comunque, se non utilizzato come blog personale, può essere un ottimo strumento per veicolare traffico in entrata. Non condannarlo solamente perchè in molto lo utilizzano in malo modo =)
Wow! Ho usato twitter ballon per un layout su cui sto lavorando, grazie mille Nando!
Di nulla, Famba. Sono felice di sapere che tia tornato utile uno dei nostri temi.
Giro i tuoi ringraziamenti anche a Sara che ha disegnato i temi e Ivan che con il suo articolo ha spiegato come integrarli all’interno di un sito.
Ciao Nando, un altro motivo per utilizzare Twitter è che essendo ancora un social di nicchia permette a mio parere una comunicazione più efficace, soprattutto se si vuole rimanere in contatto con altre persone del settore di interesse…
Avendo poi solo 140 caratteri, non sia ha lo spazio per scrivere cose inutili e secondo me si riesce a sintetizzare quanto basta per una comunicazione efficace… E soprattutto se si vede che una persona spamma o scrive cose inutili basta un unfollow che a mio parere non è così clamoroso come l’eliminazione dagli amici di Facebook. Penso che tutti si siano pentiti almeno una volta di aver accettato un amicizia che adesso non possono più annullare (vedi vicino di casa, miglior amica della fidanzata, ecc… :-D )
Ciao Cardy, mi trovi assolutamente d’accordo con la tua analisi.
al momento l’unico inconveniente per noi italiani è dato dal fatto che twitter nel bel paese non ha avuto ancora la stessa penetrazione di facebook, ma è solo questione di tempo.
Scusate, ma in un sito wordpress, dove va caricata la cartella images?
Il file js è da caricare anch’esso?