Come mostrare il bottone di Pinterest sulle foto di Blogger

Come aggiungere il pulsante Salva su Pinterest in Blogger in modo da essere visibile sulle immagini quando ci si passa sopra con il mouse e come impedire che alcune foto siano pinnate

Come certo saprete Pinterest è il social network delle immagini con una predilezione verso gli utenti di genere femminile. Per questa ed altre ragioni sono nati dei progetti simili a Pinterest con l'intento di rivolgersi a un pubblico più specifico.

Mentre negli altri social network vengono condivisi i post, su Pinterest vengono condivise solo le immagini. L'installazione di bottoni in una pagina, per la condivisione immediata su Pinterest, deve quindi rispondere ad altre logiche, rispetto ai bottoni già ampiamente sperimentati di Facebook, Twitter e Google+.

In un articolo o in una pagina web ci possono essere più foto, e i navigatori debbono essere in grado di condividerle, scegliendone una specifica. Le API di Pinterest permettono agli webmaster di implementare nel loro sito uno script in grado di rispondere a questa esigenza.

Però, come spesso succede, per gli utenti della piattaforma Blogger ci sono però delle difficoltà in più. Se infatti si prova a incollare nel codice del Tema di Blogger, il javascript fornitoci da Pinterest, questo non viene salvato. Come certo saprete, se state leggendo questo post, il modello di Blogger è in XML e qualche volta non supporta alcuni caratteri. Vediamo come risolvere passo dopo passo. Il codice fornitoci da Pinterest è il seguente.

<script
     type="text/javascript"
     async defer
     src="//assets.pinterest.com/js/pinit.js"
></script>

che se viene incollato nel Tema di Blogger non viene salvato. Dobbiamo modificarlo in questo modo.

<!-- 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 -->

e incollarlo subito sopra alla riga </body>, andando su Tema -> Modifica HTML. Si salva il Tema.

Quando un navigatore passa con il mouse sopra a una immagine, vedrà il bottone Salva.

Il valore di 28 determina l'altezza in pixel del bottone visualizzato. Tale valore però non può essere personalizzato. Si può eliminare tutto l'attributo data-pin-height="28" per visualizzare il bottone Salva più piccolo.

Cliccando su Salva, se siamo loggati con Pinterest, si aprirà una finestra con cui salvare o inviare il Pin. Se si sceglie di andare su Salva apriremo un'altra finestra, in cui scegliere la Bacheca su cui pinnare la foto.

Come è noto si possono salvare le foto anche in Bacheche Segrete di Pinterest.

COME NASCONDERE IL PULSANTE SALVA IN ALCUNE IMMAGINI

Può capitare che il bottone Salva di Pinterest si visualizzi anche su immagini che non vogliamo debbano essere condivise, o che comunque danneggi il layout del sito, mostrandosi p.e. sopra a delle icone o all'header.

Per fare in modo che una immagine non possa venire pinnata e che quindi non mostri il bottone Salva, quando è puntata dal cursore, si modifica il codice della immagine in questo modo

<img data-pin-nopin="true" src="...

aggiungendo appunto la stringa data-pin-nopin="true" subito dopo il tag <img... nel codice delle foto, del post o del layout, che non vogliamo siano pinnate. Per dare una idea della funzionalità del bottone Salva, solo il terzo screenshot di questo post sarà pinnabile, mentre nei primi due ho inserito la stringa che lo impedisce.