Come visualizzare il bottone di Pinterest sopra tutte le immagini della pagina.

Come visualizzare il bottone di Pinterest sopra a tutte le immagini di un post o di una pagina su Blogger inserendo lo script asincrono nel modello.

La difficoltà di avere un blog come il mio è quella di dover continuamente aggiornare le funzionalità che i vari servizi sfornano a getto continuo. Contemporaneamente molti articoli che trattavano lo stesso tema diventano obsoleti. Nelle Raccolte di articoli sui Tutorial per Blogger e sui Migliori Widget avverto i lettori di privilegiare sempre gli articoli più recenti ma il problema rimane.

Un caso emblematico è quello del codice per visualizzare il bottone di Pinterest sopra alle immagini al passaggio del mouse. Avevo già proposto ben tre opzioni per questa funzionalità. La prima era basata su una modifica dello script di Pinterest, la seconda utilizzava anche la libreria JQuery per lo stesso scopo mentre la terza era la disponibilità di apposite estensioni per i diversi browser.

Le API di Pinterest hanno rilasciato da poco un codice asincrono in modo che si possa vedere automaticamente il bottone per pinnare le immagini in tutti i principali browser al passaggio del cursore. Ricordo che uno script asincrono ha la particolarità di essere caricato solo alla fine del download di tutti gli altri elementi della pagina. Si tratta di una funzionalità già introdotta per il bottone di Google+, per il pulsante di Twitter e per i plugin di Facebook.

Gli utenti di Blogger hanno però una difficoltà in più visto che il codice fornito da Pinterest non viene salvato nel template. Basta però fare una piccola modifica e sostituire async con async="async". Con questo sistema si visualizzerà un bottone di 28 pixel su tutte le immagini che abbiano delle dimensioni superiori a 80x80 pixel. Ho testato questa funzione con i browser Chrome, Firefox e Internet Explorer 11.

Si va su Modello > Modifica HTML, si cerca la riga </body> e sopra si incolla questo codice

<!-- Script Pinterest Inizio -->
<script type="text/javascript" async="async" data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
<!-- Script Pinterest Fine -->

Si salva il modello. Questo script può servire anche come supporto a eventuali altri widget di Pinterest già presenti nel nostro layout. Per verificare il suo funzionamento ricordarsi che è asincrono e che quindi bisogna aspettare che la pagina sia stata completamente caricata per visualizzare il bottone di Pinterest in alto a sinistra delle immagini quando il mouse ci passa sopra. Il bottone come detto sarà alto 28 pixel e volendo si può provare a modificare questa dimensione o addirittura togliere l'intero tag data-pin-height="28" per visualizzare il pulsante più piccolo disponibile. Se invece volete utilizzare questo script solo per i widget e non per visualizzare il bottone di Pinterest sopra le immagini al passaggio del cursore basta sostituire false con true in data-pin-hover="true".