Come Inserire Twitter Senza Bloccare Il Caricamento Del Tuo Blog

scritto da Francesco Gavello [+] il 23 gennaio 2009 | 13 Commenti in: Blog Design | Social Media | Tool e Risorse | WordPress

blue-bird-twitter

La reattività è una variabile importante sul web.

Il lasso di tempo tra quando finiamo di digitare materialmente l’URL e quando compaiono i primi contenuti determina in buona parte il nostro giudizio nei confronti delle pagine che stiamo per visitare.

Twitter, in questo senso, non è mai stato molto amichevole.

A dispetto dei numerosi plugin dedicati all’aumentarne l’integrazione sui più disparati CMS (WordPress in primis), la reattività del più famoso network di microblogging lascia ancora in gran parte a desiderare.

E aspettare uno, anche due secondi in più solo per recuperare 140 minuscoli caratteri da un servizio web potrebbe far storcere il naso a più di un blogger.

Oggi vorrei quindi proporti una soluzione che sia totalmente slegata dal caricamento del resto della pagina, e che restituisca i tweets di un determinato account senza rallentare l’utente o peggio ancora bloccare intere porzioni del tuo layout.

La soluzione in questione si chiama TwitterJs, di Remy Sharp.

In cosa è migliore TwitterJs rispetto ad altre soluzioni?

  • Non è un plugin. Racchiuso in un solo file js, non dipende da uno specifico CMS.
  • E’ indipendente. Non blocca le tue pagine in attesa dei tweets.
  • E’ leggero. La versione minified pesa solamente 4KB.

TwitterJs non richiede l’utilizzo di uno specifico CMS per funzionare. Una buona notizie per gli utenti BlogSpot, MovableType, Drupal e Co. Fino a quando avrai la possibilità di caricare un file javascript sul tuo spazio web e di poter mettere mano al sorgente del tuo documento potrai farne tranquillamente uso.

E’ leggero, e non andrà ad impattare in maniera rilevante sul resto del tuo layout. Tuttavia il motivo per cui probabilmente lo sceglierai è che a tutti gli effetti non blocca le tue pagine durante il recupero dei messaggi, nascondendo l’operazione in background.

E c’è anche dell’altro.

  • E’ configurabile. Puoi settare il numero di tweets da recuperare, ignorare i reply, attivare o disattivare i link all’interno dei tweets (vedi “Parametri e variabili”).
  • Genera HTML pulito. Puoi agire su ogni aspetto dell’output generato e controllare l’HTML prodotto. Poche righe extra nel tuo foglio di stile ti permetteranno di adattarne la resa visiva al resto del tuo layout.

Come funziona?

TwitterJs va a puntare un ID di un elemento del layout e sostituisce tutto il contenuto di tale elemento con i tweets recuperati.

Per iniziare vorrai quindi inserire nell’head del tuo documento un paio di riferimenti necessari oltre che la funzione stessa.

<script src="/twitter.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">

getTwitters('mostra_tweets', {
  id: 'USERNAME', 
  count: 3, 
  enableLinks: true, 
  ignoreReplies: true, 
  clearContents: true,
  template: '"%text%" <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'
});

</script>

Nota come la funzione getTwitters accetti come parametri l’ID dell’elemento da puntare (in questo caso il div “mostra_tweets”) e tutto ciò che sia necessario per definire l’output.

Non dimenticarti inoltre di predisporre anche il codice html necessario ad accogliere i tweet.

<div id="mostra_tweets">
<p>...solo un attimo. Sto caricando i tweets</p>
</div>

Voilà ;)
E’ tutto qui, davvero.

A questo punto probabilmente vorrai personalizzare il tutto. Nessuno ti vieta di modificare il codice sopra riportato per aggiungervi loading bar, links o tutto ciò che possa venirti in mente. Ricorda che puoi fare in modo di sostituire questo contenuto con i cinguettii effettivi quando questi saranno stati recuperati.

Parametri e variabili

Ecco inoltre i principali parametri che probabilmente ti interesserà applicare alla funzione getTwitters (lista completa sulla pagina ufficiale).

  • id: l’ID del tuo account (richiesto, nome o codice numerico).
  • count: numero di tweets da recuperare (di default su 1).
  • clearContents: cancella il contenuto esistente nel div di riferimento (di default su true).
  • enableLinks: rende cliccabili i link presenti nei tweets (di default su true).
  • ignoreReplies: salta i tweets di risposta agli altri twitters (e tutto ciò che inizia con “@”).
  • template: definisce la porzione di codice HTML che racchiude ogni tweet.
  • prefix: nel caso non volessi utilizzare un tuo template, puoi semplicemente inserire un prefisso per ciascun tweet.

Di seguito invece i parametri per “template”. Possono essere inglobati in codice HTML e devono essere racchiusi tra i simboli “%”.

  • text: testo del tweet.
  • id: il codice numerico del tweet.
  • source: origine del tweet.
  • time: il famoso”x days/hours/minutes ago”.
  • created_at: data di creazione.
  • user_name: il tuo vero nome.
  • user_screen_name: il tuo username.
  • user_id: il codice numerico del tuo account.
  • user_profile_image_url: url del tuo avatar.
  • user_url: home page indicata nel pannello preferenze di Twitter.
  • user_location: parametro “Località” indicato nel tuo account.
  • user_description: parametro “Bio” indicato nel tuo account.

Se stai cercando una soluzione elegante ed essenziale per recuperare i tuoi tweets e fornirli ai tuoi lettori abituali, TwitterJs ti tornerà molto utile.

E’ disponibile una demo sulla pagina dell’autore e puoi seguire l’evoluzione del progetto su Google Code.

foto: Dario Sanches

Trovato questo articolo interessante?

Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie!

13 Commenti

Update 12/02/2012: Il Regolamento Commenti è cambiato! Leggi ciò che serve sapere!

  1. ilmioguadagno ha detto:

    Ciao Francesco, come sempre, l’articolo è molto interessante.

    TwitterJs sembra una soluzione leggera e versatile… credo valga la pena di provarla!

    Un saluto

    Stefano

    Rispondi
  2. Tom ha detto:

    Come soluzione sicuramente è una delle migliori, bella segnalazione. In questi casi però io ho sempre qualche riserva per quanto riguarda la visione della pagina con JavaScript disabilitato (non si vedrebbe niente), ma in certi contesti può non essere un problema.

    Rispondi
  3. Andrea ha detto:

    Per ora utilizzo twitter prevalentemente per postare i nuovi articoli del blog. Ho cercato di automatizzare il tutto con twitterfeed.com, ma l’affidabilità lascia un po’ a desiderare.

    Per quanto riguarda l’integrazione nel blog di twitter… devo pensarci un po’: non vorrei diventasse una droga succhia-tempo.

    Comunque, ottimo suggerimento come sempre: vengo in questo blog e trovo sempre consigli preziosissimi.

    Rispondi
  4. Francesco Gavello ha detto:

    @Tom: Potresti riempire il DIV target con alcune informazioni di base sul tuo account.

    Nel caso in cui javascript fosse disattivato non verrebbero sovrascritte dai tweets e rimarrebbero visibili per i restanti utenti :)

    Rispondi
  5. kOoLiNuS ha detto:

    grazie … provo ad implementarlo nel template che sto preparando per festeggiare il sesto anno del mio blog :-D

    Rispondi
  6. Francesco Gavello ha detto:

    @Koolinus: Sei anni sono tanti! Complimenti :D

    Rispondi
  7. [...] invece la possibilità di allungare i tempi di caricamento delle tue pagine, puoi provare una buona soluzione che ho potuto mettere in pratica io [...]

    Rispondi
  8. lucapost ha detto:

    io ho risolto semplicemente copiando la riga degli script prima della chiusura del

    LP

    Rispondi
  9. PiccoloSocrate ha detto:

    Fondamentale !
    Oramai il 99% degli utenti naviga con JS attivo quindi… a dir poco utilissimo !

    Grazie Fra

    Rispondi
  10. Domenico ha detto:

    In questi giorni è successo qualcosa alle API di twitter????
    Non funziona più nulla nè con JS ne con PHP

    Rispondi
  11. Gregory ha detto:

    Ciao Francesco, quelli di Twitter hanno cambiato le API. I tweet sul sito non funzionano al momento.

    Rispondi

Lascia un commento

Anteprima commentatore

Personalizza il tuo avatar!
Vai su gravatar.com e carica quello che preferisci!

I commenti sono modificabili entro 5 minuti dal loro inserimento.
Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Solo i commenti firmati con un nome saranno accettati. Leggi il Regolamento Commenti!