Per i siti web realizzati in passato ho sempre usato jTweetsAnywhere, ottimo prodotto
che mi ha permesso in pochi minuti di lavoro e qualche personalizzazione di avere uno stream di tweet perfetto e funzionante.

Dal 12 Giugno 2013 la versione 1 delle API di Twitter viene sostituita dalla versione 1.1.
jTweetsAnywhere smette di funzionare poichè per accedere al flusso dei dati è necessario autenticarsi via OAuth (Overview API v1.1), metodo non supportato dalla maggior parte dei prodotti di terze parti esistenti.

D’ora in avanti Twitter darà accesso ai dati solo attraverso widget ufficiali, le personalizzazioni dovranno essere conformi al Developer Display Requirements.

Di seguito un piccolo tutorial su come è possibile avere lo stream di Twitter nel proprio sito.

Account di Twitter, impostazioni

1) Accedere al proprio account di Twitter, attraverso il pulsante a forma di ingranaggio selezionare la voce impostazioni

impostazioni di twitter, crea nuovo

2) Dalla pagina Impostazioni fare click sulla voce di menù “Widget” e di seguito su “Crea nuovo

Impostazioni di Twitter, widget standard

3) Si accede alla pagina dove è possibile scegliere tra la Cronologia dell’utente (User timeline), Preferiti (Favorites), Lista (Lists) e Cerca (Search).
Per creare il widget con le impostazioni di default (come da immagine) selezionare Cronologia dell’utente

impostazioni di twitter, widget personalizzato

4) Ho personalizzato il widget modificando alcune voci:
Opzioni: deselezione su Escludi le risposte ed Espandi automaticamente le foto
Altezza: 250 pixel
Tema: impostazione di default “Chiaro”
Colore del link: da #0086B2 a #F19300
per confermare le modifiche fare click su “Crea widget” o “Salva modifiche”

Creato il widget viene generato il codice da includere nelle pagine web nel punto in cui si vuole visualizzare lo stream.

NOTA: il codice del widget compare nella parte inferiore a destra in una piccola finestra, nell’immagine è la selezione e di colore giallo.

Codice del widget generato:

<a href="https://twitter.com/danieledandreti" data-widget-id="370166365300088834">Tweets di @danieledandreti</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Il widget
Il codice generato si suddivide in due parti:
1) Html racchiuso nel tag anchor che permette la visualizzazione dello stream di twitter nelle pagine web.

<a href="https://twitter.com/danieledandreti" data-widget-id="370166365300088834">Tweets di @danieledandreti</a>

2) JavaScript che permette il corretto funzionamento del widget.
Non è necessario incollarlo assieme alla stringa di codice del punto 1 nella pagina web, ma lo si può tranquillamente posizionare alla fine.
Nel mio caso si trova in un file include dove ci sono altri script per il fallback.

<script> 
!function(d,s,id) 	
   { 	
     var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
     if(!d.getElementById(id)) 		
      { 			
        js=d.createElement(s); 			
        js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js,fjs); 		
       } 	
    } 
(document,"script","twitter-wjs");
</script>

Personalizzare il widget
il widget che verrà incluso nelle pagine web può essere personalizzato aggiungendo dei parametri nella parte di html racchiusa tra i tag anchor.
I parametri su cui si può agire sono:

  • Altezza e Larghezza
  • Layout (Chrome)
  • Numero massimo di tweet da mostrare
  • Colore del tema
  • Colore dei link
  • Lingua

Altezza e Larghezza
Le dimensioni predefinite di una timeline sono di 520x600px, tuttavia questi due parametri possono essere sovrascritti attraverso:

width=" " height=" "
<a class="twitter-timeline" href="https://twitter.com/danieledandreti" data-widget-id="370166365300088834" width="180" height="200">Tweets di @danieledandreti</a>

NOTA: Le impostazioni minime per il widget sono di 180x200px, la larghezza massima consentita è di 520px mentre in teoria l’altezza non ha limiti.


Layout (Chrome)

noheader

elimina la “testata” del widget, la parte dove è presente “Tweet” e il pulsante del follow

<a href="https://twitter.com/danieledandreti" data-widget-id="370166365300088834" data-chrome="noheader">Tweets di @danieledandreti</a>

nofooter

elimina la parte in basso del widget contenente il Tweet Box

<a href="https://twitter.com/danieledandreti" data-widget-id="370166365300088834" data-chrome="nofooter">Tweets di @danieledandreti</a>

noscrollbar

elimina le barre di scorrimento del widget

<a href="https://twitter.com/danieledandreti" data-widget-id="370166365300088834" data-chrome="noscrollbar">Tweets di @danieledandreti</a>

noborders

elimina i bordi del widget

<a href="https://twitter.com/danieledandreti" data-widget-id="370166365300088834" data-chrome="noborders">Tweets di @danieledandreti</a>

data-border-color="#333333"

si può assegnare un colore ai bordi del widget, il colore va scritto in esadecimale esteso (#333333). (Ho eseguito qualche prova: accetta anche la forma abbreviata #333)

<a href="https://twitter.com/danieledandreti" data-widget-id="370166365300088834" data-border-color="#333333" >Tweets di @danieledandreti</a>

transparent

permette la visualizzazione del colore della pagina o del contenitore come sfondo del widget

<a href="https://twitter.com/danieledandreti" data-widget-id="370166365300088834" data-chrome="transparent" >Tweets di @danieledandreti</a>

NOTA: le istruzioni all’interno del tag anchor per correttezza vanno scritte tutte sulla stessa riga, per rendere maggiormente comprensibile il codice in alcuni esempi, è stato mandato a capo.

I parametri si possono inserire in un punto qualsiasi del tag anchor a partire dalla fine di a class="twitter-timeline" fino al tag di chiusura; personalmente preferisco inserire i parametri dopo il data-widget-id in modo tale da avere una prima parte che include il link al profilo o allo screen name compreso il data-widget-id e nella seconda parte le eventuali personalizzazioni.

Il parametro data-chrome può avere all’interno più attributi, nel caso di più di due, deve esserci uno spazio di separazione tra di essi.

Codice completo del tweet che compare a fondo pagina:

<a class="twitter-timeline" href="https://twitter.com/danieledandreti" data-widget-id="370166365300088834" 
data-chrome="noheader nofooter noborder transparent" width="400" 
data-tweet-limit="1">Tweets di @danieledandreti</a>

Numero massimo di tweet da mostrare

data-tweet-limit="N"

N rappresenta un numero compreso tra 1 e 20

<a class="twitter-timeline" href="https://twitter.com/danieledandreti" data-widget-id="370166365300088834" data-tweet-limit="1">Tweets di @danieledandreti</a>

Colore del tema

data-theme="T"

T può assumere due valori: light e dark. Il colore del tema si può impostare direttamente nel pannello del widget dell’utente di twitter, il colore predefinito è il bianco che corrisponde al tema light.

<a class="twitter-timeline" href="https://twitter.com/danieledandreti" data-widget-id="370166365300088834" data-theme="dark">Tweets di @danieledandreti</a>

Colore dei link

data-link-color="#CCDD00"

viene assegnato un colore personalizzato ai link presenti nel widget

<a class="twitter-timeline" href="https://twitter.com/danieledandreti" data-widget-id="370166365300088834" data-link-color="#CCDD00">Tweets di @danieledandreti</a>

Lingua

lang="ar-KW"

la lingua del widget viene rilevata in base alla codifica delle pagine web, tuttavia, si può impostare attraverso l’attributo lang e il valore corretto.
Per l’esempio ho utilizzato il valore ar_KW (Arabo del Kwait)

<a class="twitter-timeline" href="https://twitter.com/danieledandreti" data-widget-id="370166365300088834" lang="ar-KW">Tweets di @danieledandreti</a>

Approfondimento
A questo sito twitterforweb.com è possibile creare un widget con estrema facilità, spesso il sito è irraggiungibile per sovraccarico di richieste.

Esempio


Il codice per la visualizzazione del widget può essere scritto in due modi:
1) Link account utente di Twitter

<a class="twitter-timeline" href="https://twitter.com/danieledandreti" data-widget-id="370166365300088834">Tweets di @danieledandreti</a>

2) Utilizzo del parametro data-screen-name

<a class="twitter-timeline" data-screen-name="danieledandreti" data-widget-id="370166365300088834">Tweets di @danieledandreti</a>

Per maggiori informazioni si possono consultare questi link: il Twitter Developers e la pagina per la personalizzazione dei widget

Guida per l’utilizzo del logo e marchio di Twitter.

Il Language Culture Name che ho utilizzato nell’esempio viene dalla pagina del: Microsoft Developer Network

Please follow and like us:

18 commenti

Claudio Meirana · 26 Agosto 2013 alle 17:13

Da provare assolutamente, cercavo da un po’ un’alternativa per il mio sito!

Tra qualche giorno il feedback! 😉

    Daniele

    Daniele · 26 Agosto 2013 alle 17:16

    Bene, attendo il il feedback! 🙂

lyla · 5 Novembre 2013 alle 22:34

Ciao!
Dato che il widget è davvero graficamente orribile, è possibile aggiungere altre personalizzazioni?
Come per esempio togliere l’immagine del profilo, e modificare la font?

Grazie 🙂

    Daniele

    Daniele · 6 Novembre 2013 alle 0:26

    Ciao,
    Mi sono attenuto alle specifiche del “Developer Display Requirements” per cui il risultato è quello che vedi. 🙂

    Comunque, avendo il data-widget-id e un po’ di pratica con i CSS puoi fare tutte le migliorie che preferisci.

    A presto!

erika · 10 Gennaio 2014 alle 21:50

Solo ora dovevo trovare la tua spiegazione??
Ed io che mi chiedevo come mai quel cornuto del widget per WordPress non funzionasse mai…

A proposito: buon anno! Dalla tua alunna che urla troppo quando parla.

Erika.

    Daniele

    Daniele · 11 Gennaio 2014 alle 8:36

    Ciao Erika, buon anno anche a te!
    Felice che tu abbia trovato la giusta soluzione al problema del widget di WP 😉

silver · 20 Gennaio 2014 alle 14:28

hey!
Grazie spiegazione chiarissima 😉 Quindi questo codice non funziona più?!

Volevo creare un box feed con photoshop e poi inserirlo nel mio sito ma non ci sonno riuscita perche non si visualizzano i feed 🙁

    Daniele

    Daniele · 21 Gennaio 2014 alle 6:43

    Grazie! Il codice che hai tentato di inviare è stato rimosso, per cui non avuto modo di vedere. Mi sono attenuto alle linee guida di Twitter. Avendo il data-widget-id potresti cercare di creare un box attorno.

    A presto!

nick · 19 Febbraio 2014 alle 17:13

ciao ma se voglio inserire i tweet sotto forma di scroll news, come posso fare?

Tiziana · 10 Aprile 2014 alle 15:28

La migliore guida in assoluto sul widget Twitter. Posso chiederti gentilmente come si potrebbe togliere l’immagine del profilo? In modo da far rimanere semplicemente l’ultimo tweet inserito.

Grazie mille in anticipo per la pazienza!
Tiziana

    Daniele

    Daniele · 12 Aprile 2014 alle 12:06

    Grazie! 🙂
    Mi sono attenuto alle specifiche del “Developer Display Requirements”, per cui non c’è possibilità di oscurare l’avatar. Se hai buona conoscenza dei CSS puoi in qualche modo “oscurare” l’immagine.

    A presto!

Andrea · 19 Marzo 2015 alle 21:32

ho seguito passo passo la tua guida ma non riesco a far visualizzare lo stream di Twitter.
dove sbaglio?

andleia.xoom.it

codice che ho usato è:

 
Tweet di @AndleiaV
//

Fatemi sapere dove sbaglio.
grazie
Andrea

    Daniele

    Daniele · 30 Marzo 2015 alle 15:41

    Ciao Andrea,

    Scusa il ritardo, devo disabilitare il filtro antispam: in presenza di codice elimina il codice e segnala come spam il messaggio.

    Fai una pagina html e inserisci il codice, mandamelo zippato via mail. In privato ti mando il conttato.

    A presto!

AndyT · 17 Agosto 2015 alle 16:04

Grazie mille, davvero utile!

    Daniele

    Daniele · 8 Ottobre 2015 alle 14:40

    Grazie! 🙂 Scusa il ritardo.

Riccardo · 7 Gennaio 2016 alle 11:14

Grazie mille! Era da un po’ che sbattevo la testa su come cambiare la lingua del widget twitter!

    Daniele

    Daniele · 12 Febbraio 2016 alle 19:03

    Bene, ottimo.
    A presto!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Ti piace questo blog? Condividilo!