Come mostrare il bottone di Pinterest al passaggio del mouse sulle foto in Blogger e Wordpress.

Come installare uno script su Blogger e Wordpress per mostrare il bottone di Pinterest al passaggio del cursore sulle immagini per condividerle su questo social network o su Twitter e su Facebook.

Riprendo un post che ho pubblicato più di tre anni fa su uno script che permette la visualizzazione della icona di Pinterest sulle immagini al passaggio del cursore. Personalmente non utilizzo questo javascript ma preferisco quello ufficiale di Pinterest visto che in questo blog non ci sono molte immagini degne di essere condivise su tale social network.

Nei siti Blogger o Wordpress che invece hanno nelle foto un contenuto essenziale può essere utile impostare una condivisone su Pinterest più incisiva. Con l'inserimento di questo script al passaggio del cursore su una immagine si visualizzerà una icona che potremo anche personalizzare e  posizionare in una data zona della foto. Il lettore che ci cliccherà sopra aprirà automaticamente una nuova scheda del browser con le opzioni di condivisione.

Come vedremo si potranno anche escludere singole foto, o un insieme di esse, da questa funzionalità. L'installazione è semplicissima. Gli utenti di Blogger dovranno andare su Modello > Modifica HTML, cercare con Ctrl+F  il tag </body> e incollare subito sopra il codice seguente

<!-- Bottone Pinterest Inizio -->
<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieHBjL7Q8-mz8Aq0WUwCCAXmkuyIQwnevaGXWF32QDVS9L_CXFrLUHxApAmYlXofFsdOCdB0Fez_WTikAI6qgwrT_bOOPecMF5jFpl3491dOOmPIkkqw1QrbzBKgpRiXJWEfUKB9W84fU/s72/pinterest.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='https://googledrive.com/host/0B40RQ963OElISE9lY1E1YS1lU28/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.</script>
<!-- Bottone Pinterest Fine -->

Si salva il modello. La parte di codice colorata di verde sono commenti inseriti dall'autore del javascript di cui il link a fondo pagina che non ho potuto togliere per questioni di correttezza ma che all'atto della installazione possono essere tralasciati.

Gli utenti di Wordpress dovranno invece andare su Bacheca > Aspetto > Editor e aprire il file footer.php denominato anche Piè di pagina in alcuni Temi. In tale file si dovrà cercare lo stesso tag </body> e incollare lo script subito sopra a quello quindi aggiornare il file.

Le righe evidenziate di giallo sono la Libreria jQuery e possono essere tralasciate se fosse già presente nel Tema o nel Modello. L'URL colorato di rosso rappresenta l'immagine della icona di Pinterest che verrà visualizzata sopra alle foto e naturalmente può essere sostituita da un'altra. 

In var bs_pinButtonPos è stata proposta la posizione center per mostrare il bottone di Pinterest al centro delle foto. Alternativamente tale attributo può essere sostituito da topleft, topright, bottomleft, bottomright con ovvio significato.

CONFIGURAZIONI ULTERIORI DEL BOTTONE DI PINTEREST

L'autore del javascript ha caricato il file nel web utilizzando Google Drive come Hosting che però cesserà tale servizio nel prossimo 31 Agosto 2016. In questo momento non è dato sapere se, e in che misura, Google continuerà con tale supporto quindi per evitare che lo script smetta di funzionare è opportuno incollare l'URL colorato di viola nel browser e andare su Invio per aprire la pagina relativa. Si clicca poi con il destro del mouse nella stessa pagina per poi andare su Salva con nome (Chrome). In questo modo verrà scaricato il file. Se avete un blog su Blogger di tipo gratuito vale a dire del tipo nomeblog.blogspot.com allora lo potrete caricare su Google Sites e sostituirne l'URL diretto nel codice. Se invece avete un dominio personalizzato di Blogger o un sito Wordpress allora tale file dovrà essere caricato su uno spazio personale per poi sostituirne l'URL diretto.

COME ESCLUDERE UNA O PIÙ IMMAGINI

Se non volete che il bottone di Pinterest si mostri su una data foto per non facilitarne la condivisione dovete andare in Modalità HTML e inserire l'attributo class='nopin' nel tag <img> in questo modo

<img class='nopin' src="URL_IMMAGINE...

Se le immagini da escludere fossero più di una, magari tutte quelle presenti in un post, basterà andare in Modalità HTML e aggiungere un <div> all'inizio e alla fine del contenuto da non pinnare

<div class='nopin'>
Contenuto con i tag img da non pinnare
</div>

 

COME AGGIUNGERE UN PREFISSO O UN SUFFISSO ALLA CONDIVISIONE

Nel codice proposto l'interno delle virgolette in var bs_pinPrefix = ""; e var bs_pinSuffix = ""; è vuoto ma può essere riempito per esempio in questo modo

var bs_pinSuffix = "by IpCeI";   o  var bs_pinPrefix = "by Ernesto Tirinnanzi";

per aggiungere automaticamente tale contenuto all'inizio o alla fine della condivisione. 

Demo
Clicca qui

IL FUNZIONAMENTO DEL BOTTONE DI PINTEREST

Tutti coloro che sono loggati a Pinterest che cliccano sul bottone apriranno una scheda come questa

in cui scegliere la Bacheca in cui aggiungere la foto che potrà anche essere condivisa su Facebook e su Twitter. Si vedrà anche in automatico il titolo del post da cui è stata condivisa. Chi non è loggato su Pinterest visualizzerà invece una finestra popup con l'invito ad accedere o registrarsi

Concludo ricordando che su Pinterest possono essere create anche Bacheche Segrete.
Fonte | Blogger Sentral