Installare il bottone di Twitter in modo asincrono su Blogger.

Come installare il bottone e gli altri widget di Twitter in modo asincrono per non appesantire la pagina.

Da qualche anno la velocità di caricamento è diventata una dei parametri che concorrono alla formazione delle SERP vale a dire che a parità di altre considerazioni una pagina più lenta a caricarsi si posiziona dopo una pagina che abbia invece un caricamento più rapido. I fattori che rendono pesante una pagina sono la presenza di immagini molto grandi e una quantità di gadget esorbitante. Ho già illustrato come ridurre il peso delle immagini usando il plugin Sharper Photo e come sia utile mostrare solo i gadget che riteniamo funzionali al nostro blog. 

I widget sono tanto più pesanti quanto è la quantità di javascript che contengono. Tra i gadget irrinunciabili metto quelli di Facebook, Google Plus e Twitter. Un sistema per minimizzare l'impatto dei bottoni o di altri plugin nella rapidità di apertura della pagina consiste nell'usare quello che viene definito il caricamento asincrono. Significa semplicemente posticipare la visualizzazione di pulsanti, Like Box o altri gadget a dopo l'apertura di tutti gli altri elementi della pagina web.

Dopo aver presentato un modo per caricare in modo asincrono tutti i plugin di Facebook e tutti quelli di Google+ passo a fare lo stesso per i vari gadget relativi a Twitter.

CODICE DEL BOTTONE DI TWITTER

Il codice asincrono per condividere pagine e post di Blogger con il bottone di Twitter è il seguente

<a class='twitter-share-button' data-count='vertical'  data-via='parsifal32' data-related='ipcei' data-hashtags='ipcei' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</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>

che può essere inserito per esempio in una sidebar insieme al Mi Piace di Facebook e al +1 di Google Plus. Tutti gli altri widget di Twitter si basano sempre su uno script ricavato dalle API simile a questo

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

Per rendere tale script asincrono basterà sostituirlo con quello evidenziato di giallo. Forse è il caso di spiegare qualcuno dei parametri delle stringhe del codice del bottone. Il blocco

expr:data-text='data:post.title' expr:data-url='data:post.url'

deriva dai tag di Blogger e funziona solo su questa piattaforma. Si tratta di ricavare il titolo (data:post.title) e l'URL del post (data:post.url) in funzione della pagina in cui viene visualizzato il pulsante di condivisione. Gli altri parametri sono invece consigliati dalle API di Twitter

1. data-count='vertical'  è il bottone con contatore verticale
2. data-via='parsifal32' è il nome dell'utente a cui attribuire il tweet
3. data-related='ipcei'  è l'account di Twitter correlato
4. data-hashtags='ipcei'  per inserire uno o più hashtag alla fine del tweet separati da virgole
   
   

Quando si clicca sul pulsante verrà precompilato il tweet con Titolo del post, URL del post, hashtag scelto e nome dell'utente. Questi ultimi due parametri sono stati evidenziati nello screenshot. Il tweet poi potrà essere integrato o completamente modificato dal lettore che twitterà materialmente.