Personalizzazione del widget della Timeline di Twitter per sidebar o per il modello di Blogger.

Come personalizzare i widget della Cronologia di Twitter e come inserirli nel modello di Blogger.

Twitter dà modo ai suoi utenti di installare widget che mostrano le attività compiute nel social network. Si tratta di gadget ufficiali che possono essere configurati direttamente nel nostro account. Dopo esserci loggati nell'account si va su Widget e si clicca su Crea Nuovo. Si aprirà un tool con diverse opzioni di personalizzazione riguardo a Cronologia dell'utente, Preferiti, Liste e Ricerca. I widget più utilizzati sono senza dubbio quelli che mostrano la Cronologia (o Timeline) di un dato utente ma si può creare anche un widget che riguardi un particolare hashtag andando in Ricerca.

In questo articolo mi limiterò a mostrare come si possano inserire ulteriori personalizzazioni al gadget della Cronologia rispetto a quelle già previste. Finito l'inserimento delle opzioni nel tool di Twitter si va su Crea widget e si seleziona e si copia il codice HTML che potrà essere simile a questo

<a class="twitter-timeline" href="https://twitter.com/parsifal32" data-widget-id="390106210386468864">Tweets di @parsifal32</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>

e che è formato da due parti distinte. La prima evidenziata di giallo serve per posizionare materialmente il widget mentre la seconda evidenziata di verde rappresenta lo script di Twitter e può essere inserita una volta per tutte nel modello visto che serve anche per i pulsanti con contatore di Twitter. Tale script evidenziato di verde può per esempio essere incollato su Modello > Modifica HTML subito sopra alla riga </body>. Nella parte evidenziata di giallo sono presenti essenzialmente due dati: il nome utente e l'ID del widget. Questi parametri devono comunque apparire in tutte le personalizzazioni realizzate.

WIDGET DI TWITTER PER SIDEBAR O POST

Se vogliamo inserire il gadget di Twitter in un elemento pagina di una sidebar, di un footer o anche in modalità HTML di un post o di una pagina statica dobbiamo utilizzare un codice come questo

<div style="text-align:center; vertical-align:top; display:inline-block;">
<a class="twitter-timeline" href="https://twitter.com/parsifal32" data-widget-id="390106210386468864" data-screen-name="parsifal32" width="300" height="400" data-theme="light" data-tweet-limit="10" data-show-replies="true" lang="it" data-link-color="#003366" data-border-color="#9404F5" target="_blank" >Tweets di @parsifal32</a>
</div>

dove oltre ai parametri del nome utente (parsifal32) e dell'ID del widget sono personalizzabili altri aspetti:

1. Allineamento verticale - al posto di top in vertical-align:top; si può usare middle o bottom
2. Allineamento orizzontale - al posto di center in text-align:center; si può usare left o right
3. Display - al posto di inline-block in display:inline-block; si può usare block o inline
4. Dimensioni - width="300" height="400" rappresentano rispettivamente larghezza e altezza
5. Tema - data-theme="light" per un blog a sfondo chiaro, dark al posto di light per uno scuro
6. Numero di tweet - data-tweet-limit="10" configura il numero di tweet da visualizzare
7. data-show-replies="true" per mostrare le risposte; false al posto di true per non mostrarle
8. Lingua - lang="it"
9. data-link-color="#003366" e data-border-color="#9404F5" rappresentano rispettivamente i codici del colore dei link dei tweet e i codici del colore dei bordi.
10. target="_blank" serve per aprire i link in un'altra scheda del browser

Va da sé che il codice dello script dovrà comunque essere inserito insieme a questo se non lo si fosse incollato nel modello come illustrato in precedenza.

WIDGET DI TWITTER INSERITO NEL MODELLO

Potrebbe essere interessante mostrare l'attività di Twitter direttamente in tutti i post di un dato autore. Seguendo la falsariga delle impostazioni usate precedentemente il codice in questo caso diventa

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Ernesto Tirinnanzi&quot;'> 
<div style="text-align:right;vertical-align:bottom;display:inline;">
<a class="twitter-timeline" href="https://twitter.com/parsifal32" data-widget-id="390106210386468864" data-screen-name="parsifal32" width="300" height="150" data-theme="light" data-tweet-limit="3" data-show-replies="false" lang="it" data-link-color="#003366" data-border-color="#9404F5" target="_blank" >Tweets di @parsifal32</a>
</div>
</b:if>
</b:if>

dove per le personalizzazioni si seguono le stesse regole dei 10 punti già visti in precedenza. Le due righe del tag condizionale evidenziate di giallo servono per mostrare il widget solo nei post mentre le due righe evidenziate di marrone sono i due tag condizionali che vincolano la visualizzazione del widget al nome dell'autore dell'articolo che va inserito stando attenti a maiuscole, minuscole e spazi. Per il posizionamento si va su Modello > Vai al widget > Blog1. Si cerca la sezione

<b:includable id='post' var='post'>

Si clicca sulle freccette nere laterali e si cerca la riga

<div class='post-footer'>

per incollarci il codice subito sopra. Alternativamente si può incollarlo subito sopra a una delle righe

<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>

per posizionarlo più in basso nel layout.