Pubblicato il 27/03/13e aggiornato il

Bottone di Pinterest visibile sulle immagini al passaggio del mouse.

Come mostrare il pulsante di Pinterest sulle immagini dei post al passaggio del cursore per condividerle in un board.
Riprendo il discorso affrontato nel post sul pulsante di Pinterest che si mostra con effetto hover al passaggio del mouse per migliorarne il funzionamento e le personalizzazioni. Lo script è opera di Greenlava autore di Blogger Sentral e mi sono permesso di modificarlo leggermente per renderlo credo più efficace pur mantenendo doverosamente il credit nel commento alla fine del codice.

Con questa nuova installazione si può anche evitare che il bottone appaia anche quando per esempio il mouse passa sopra a una icona del blog e si possono condividere le immagini su Pinterest non solo dai singoli post ma anche dalla Homepage, dalle pagine delle etichette e dalle pagine statiche.
Dopo aver salvato il template andate su Modello > Modifica HTML, cercate la riga </body> e, subito sopra, incollate questo codice

<!-- Bottone di Condivisione su Pinterest Inizio -->
<script>
//<![CDATA[
var bs_pinButtonURL = "https://lh6.googleusercontent.com/-I0eeSDFXsGA/UVIw7HAHGXI/AAAAAAAAg98/EYzoIB8m8nM/s80/pinterest-button.png";
var bs_pinButtonPos = "topleft";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
//This Pinterest Hover Button is developed by bloggersentral.com.
//Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
//Please do not remove this attribution.
</script>
<!-- Bottone di Condivisione su Pinterest Fine -->

Salvate il modello. Tutte le volte che un visitatore passerà con il mouse sopra a una immagine situata in un post si visualizzerà l'icona di Pinterest per la sua condivisione

condivisione-pinterest
Cliccando sopra all'icona Pin it gli si aprirà una nuova finestra in cui si potrà pinnare la foto scegliendo il board o la scheda che preferisce

pinnare-immagini-pinterest
Nella descrizione si vedrà il titolo del post da cui è stata pinnata e sarà presente anche il link al blog

condivisione-immagini-pinterest
Le immagini presenti nelle sidebar come potrebbero essere le icone dei bottoni dei social non saranno condivisibili nel senso che non apparirà il bottone Pin It quando ci si passa sopra con il mouse.

PERSONALIZZAZIONI DEL PULSANTE PINTEREST

Se avete già JQuery nel vostro template allora potete eliminare la riga di codice evidenziata di giallo. Ho però constatato che con versioni diverse dalla 1.8.2, il pulsante rimane visibile nella foto finché non si va con il cursore su un'altra. L'immagine del pulsante che si visualizza sopra alla foto per la condivisione ha l'URL colorato di rosso e ovviamente può essere sostituito con un altro di vostro gusto.

Ho scelto di visualizzare il pulsante in alto a sinistra della foto da condividere ma si può scegliere un'altra posizione sostituendo topleft con center, topright, bottomleft o bottomright che non sto a tradurre.
Si può inserire automaticamente un prefisso o un suffisso alla descrizione automatica del Pin semplicemente editando le due righe

var bs_pinPrefix = "";
var bs_pinSuffix = "";


Per esempio possiamo mettere

var bs_pinSuffix = " by IpCeI"; oppure var bs_pinPrefix = "Photo by ";

per inserire le due frasi rispettivamente alla fine e all'inizio della descrizione del Pin.



Nell'articolo di demo se passate il mouse sopra all'ultima immagine del post non vedrete l'icona del pulsante di Pinterest. Questo può essere utile se non si vuole che una nostra foto venga condivisa su quel social network ma si vogliono lasciare le altre liberamente pinnabili.

Sia se pubblichiate gli articoli con le immagini caricate dall'Editor di Blogger sia che utilizziate un altro metodo, per impedire il Pin di una foto dovete andare in Modalità HTML e cercare il tag <img

tag-immagine

quindi dovete incollare subito dopo class='nopin' come mostrato nello screenshot. Se non volete condividere tutta una serie di immagini di un articolo vi basterà inserire queste due righe di codice

<div class='nopin'>
CODICE IN CUI SONO PRESENTI LE IMMAGINI CHE NON SI VUOLE CONDIVIDERE
</div>

all'inizio e alla fine del codice in cui ci sono le foto che non si vogliono condividere.




36 commenti :

  1. sarebbe possibile un pulsante pin it piu piccolo e l apertura di una finestrella invece che una scheda!?

    RispondiElimina
    Risposte
    1. @# Il bottone lo puoi cambiare, la finestrella beh... è molto più complicato

      Elimina
  2. grande Ernesto lo rileggo con calma dopo, questa opzione mi interessava tantissimo!!!

    RispondiElimina
  3. Ernesto e da tanto che non ci sentiamo ma se sono cose troppo difficili non fa per me.
    Questo bottone di pintarest mi interessa l'ho visto non come bottone ma come scritta ma onestamente non ci ho capito un cavolo. Sono su pintarest ma non so come mettere le foto ecc ecc.
    Questo bottone è possibile avere un htm da mettere come java/htm senza andare a rovistare nel body che li non mi ci racapezzo.....magari questo codice lo posso inserire a meno in ogni post che m'interessa,
    E' possibile....
    Grazie tante e Buona Pasqua a te e Famiglia.

    RispondiElimina
  4. Appena inserito nel mio blog.
    Grazie GuruErnesto :D

    RispondiElimina
  5. Grazie mille per le dritte,ora ho anch'io il bottone Pin!!!
    Ciao Lieta

    RispondiElimina
  6. Grazieeeeeeeeeeeeeeeee! avevo provato mille codici, questo ha funzionato! grazie mille davvero!!

    RispondiElimina
    Risposte
    1. @# Non per vantarmi ma le cose che propongo io funzionano sempre. Qualche volta smettono di funzionare per varie ragioni sempre però indipendenti dalla mia volontà.

      Elimina
  7. Ciao Ernesto, sai per caso se oltre all'icona può anche comparire il contatore dei pin per quella foto?

    RispondiElimina
    Risposte
    1. @# I bottoni con contatori esistono ma non con questo sistema. Un pulsante con contatore per Pinterest è questo
      http://www.ideepercomputeredinternet.com/2012/12/pinterest-blogger-count-button.html
      o questo
      http://www.ideepercomputeredinternet.com/2013/02/pinterest-buttons.html

      Elimina
  8. Gentilissimo Ernesto, grazie anzitutto per le preziose informazioni esposte con esemplare chiarezza. Ho agevolmente seguito la procedura ed installato il pulsante. Su chrome tutto perfetto. Non altrettanto, manco a dirlo, su explorer: il pulsante viene visualizzato fuori dal contorno della immagine, talvolta sovrapposto al testo del blog. Saprebbe come ovviare a questo inconveniente di visualizzazione?

    RispondiElimina
    Risposte
    1. @# In genere usando questo accorgimento funziona tutto anche su IE
      http://www.ideepercomputeredinternet.com/2012/10/cross-browser-internet-explorer-ie9-blogger.html

      Elimina
    2. La ringrazio per la gentile e sollecita risposta. Purtroppo, avendo creato il blog molto di recente, non compare più nel template la riga di compatibilità con IE7 e non posso procedere alla sostituzione. La visualizzazione su IE è sempre problematica e probabilmente la cosa migliore è accettare questi piccoli inconvenienti e sperare sempre meno persone ne facciano uso.
      Grazie ancora per il suo impegno e cortesia!

      Elimina
  9. io non ho la riga "< /body >" dove posso inserire il codice?

    RispondiElimina
    Risposte
    1. @# Ti ho già risposto a un altro commento analogo
      http://www.ideepercomputeredinternet.com/2012/11/pinterest-button.html?showComment=1369139745224#c443015146042755353

      Elimina
  10. Ciao Ernesto, sono arrivata qui proprio cercando le istruzioni per aggiungere il tasto Pin it sulle foto del blog, e ti ringrazio per questo utile post.

    Dall'anteprima sembra funzionare tutto...

    L'unico dubbio che ho è se chi (in Pinterest) "clicca" sulla foto pinnata arriva sulla home page del mio blog o proprio nel post in cui si trova la foto in questione (che sarebbe la cosa ottimale).

    grazie 1000 e buona settimana
    Chiara

    RispondiElimina
    Risposte
    1. Non te lo so dire con certezza ma puoi testare pinnando una tua foto per poi cliccarsi sopra su Pinterest. All'inizio il collegamento era al blog ma ora può darsi che abbiano raffinato il tool
      @#

      Elimina
    2. Confermo, lo sto usando sul mio blog e linka al post

      Elimina
    3. Grazie 1000 ad entrambi!

      Elimina
  11. Ciao Ernesto, a me non funziona invece :( si vede perfetto nell'anteprima ma poi quando salvo il modello e visualizzo il blog non appare niente :( non so perchè :(

    RispondiElimina
  12. Ciao Ernesto!
    Ho provato ad inserire questo script, ma non va purtroppo!
    Potrebbe dipendere dal fatto che le foto inserite sul blog sono caricate su Flickr (ipotesi)?
    Ti ringrazio molto :-)

    RispondiElimina
    Risposte
    1. Puoi provare a creare un post di test con immagini su Picasa per vedere se dipende da quello. Penso però che in questo caso il mancato funzionamento dipende da JQuery che forse hai già nel tuo modello oppure hai nel template una libreria javascript incompatibile
      http://www.ideepercomputeredinternet.com/2011/10/aggiornare-jquery-per-rendere.html
      @#

      Elimina
  13. ieri con altri blog ho passato svariate ore senza ottenere il risultato voluto. grazie al tuo post oggi ho fatto quanto desiderato in 4 mosse. Bravo per la chiarezza e grazie . ciao. a rileggerci.

    RispondiElimina
  14. ciao, mi serve un aiuto, io non sono iscritto a pinterest, ma sul mio pc, quando passo il mouse su delle immagini compare l'icona pin it rossa. Ho provato di tutto,ma non riesco ad eliminarla.Ho reimpostato I:E: ed anche Crome (mi succede con tutti e 2), ho cancellato l'impossibile anche l'ultimo aggiornamento di java, ho bloccaato i popup, ho installato Adblock (mi blocca le pubblicità, ma pin it c è ancora), ti prego aiutami.
    Ciao Luca

    RispondiElimina
  15. Questo ti succede solo con le immagini presenti nel browser non certo con quelle del PC?
    Se è così come credo non c'è nulla di strano. Moltissimi siti e servizi come per esempio Feedly fanno apparire di defualt l'icona di Pinterest sulle immagini per poterle condividere. Se tu dette immagini le salvi o le copi il bottone ovviamente sparisce
    @#

    RispondiElimina
  16. ciao ernesto, ho inserito questo codice ma mi compaiono 2 bottoni pinterst, così come nelle foto del tuo articolo di demo. La domanda è come mai qui sul tuo blog vedo un solo pulsante, così come se vedo un solo pulsante anche del mio blog con google crome, mentre su safari vedo 2 pulsanti (1 a destra e ! a sinistra), Qui sul tuo blog hai usato questo codice?

    RispondiElimina
    Risposte
    1. Questo post è sorpassato. Adesso non occorre usare questo script. Segui quest'altro articolo
      http://www.ideepercomputeredinternet.com/2014/05/pinterest-button-hover-blogger-template.html
      Se hai già lo script di Pinterest nel modello forse è per quello che vedi due bottoni
      @#

      Elimina
    2. ho risolto, non capendo come però perché ho fatto una serie di tentativi, durante uno dei quali visualizzavo il bottone fuori dall'immagine, a fianco nella parte superiore destra, cosa che ti dirò mi piaceva un sacco nel mio template in cui le foto sono un po' meno larghe rispetto alla larghezza del post, ma quando sono andata ad inserire lo script per l'effetto trasparenza su tutte le immagini il bottone è ritornato a comparire sulla foto. Ma secondo te ci sarebbe la possibilità di far volontariamente comparire il tasto pinterest accanto alla foto mantenendo l'effetto trasparenza?

      Elimina
    3. non mi resta che sperare allora uni un prossimo post sul tuo blog, grazie comunque

      Elimina
  17. Ciao, ti seguo da tempo e grazie a te sono riuscita a modificare molti template. Volevo porti un quesito, ho visto in alcuni template Wordpress che c'è la possibilità di aggiungere anche gli altri social sulle immagini. Credi sia possibile per Blogger? grazie mille

    RispondiElimina
    Risposte
    1. Scusa ma intendi oltre a Pintrest? C'è in effetti anche un widget per Blogger di qualche anno fa.Però non sono riuscito a trovarlo con la ricerca. Non mi ricordo che nome aveva. Quando il mouse passava sulle immagini si visualizzavano le icone dei social per condividere immagini e post. Credo che tu ti sia riferito a questa funzionalità
      @#

      Elimina
  18. Ciao Ernesto vorrei chiederti un aiuto dai miei blog è da un pò che è sparito il bottone di pinterest, è ancora presente nel modello ma l'immagine che avevo della P non esce più. In 4 blog, pur avendo account diversi! Ho provato anche dal sito di pinterest e neanche il loro ufficiale non mi funziona. Da quando hanno inserito A cosa potrei attribuirlo? Da quando hanno inserito le impostazioni HTTPS funziona tutto male. Grazie Lisa.

    RispondiElimina
    Risposte
    1. Ti sei risposta da sola. Togli l'impostazione HTTPS e rimetti la semplice HTTP vale a dire scegli il No tra le due opzioni. Quando le cose si saranno stabilizzate potrai tornare a HTTPS
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.