Pubblicato il 22/11/12e aggiornato il

Come mostrare il pulsante di condivisione su Pinterest nelle immagini al passaggio del cursore.

Bottone di Pinterest che si evidenzia in tutte le immagini al passaggio del mouse.
Pinterest è il social network del momento ed è uno di quelli con il maggiore tasso di crescita insieme a Instagram. La condivisione di immagini su Pinterest può essere molto utile anche per aumentare il traffico di quei blog che fanno delle immagini il loro punto di forza. E' stato appena pubblicato un articolo a firma di Greenlava che ritengo molto interessante visto che con un semplice script si può visualizzare il pulsante di condivisione su Pinterest quando il mouse passa sopra a una immagine.

Inoltre il bottone è in grado di selezionare l'URL del post giusto anche se l'immagine è stata pinnata nella homepage o in una pagina di etichetta. Ecco come sono le immagini se ci si passa sopra con il mouse

bottone-pinterest
con il bottone di Pinterest che in questo caso è stato posizionato al centro. L'installazione dello script è piuttosto semplice. Si va su Modello > Modifica HTML e si cerca la riga </body> . Subito sopra si incolla

<script>
//<![CDATA[
var  bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'/>
<!-- please do not alter or remove the following code -->
<div id='bs_pinOnHover'><a href="http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html">Pin It button on image hover</a></div>

quindi si salva il modello. L'autore per utilizzare questa personalizzazione richiede che non si modifichi o cancelli il link al suo articolo. Consente però di cambiare il bottone il cui URL è colorato di viola con uno di nostro gradimento. La riga in rosso rappresenta la libreria JQuery e può essere tolta se fosse già presente nel nostro modello.

La posto di center possono essere inserite le seguenti alternative con ovvio significato: topleft, topright, bottomleft o bottomright. Per installare i bottoni di Pinterest ricordo anche i post
Fonte | Blogger Sentral -




13 commenti :

  1. Franco Colla · Capo presso Me stesso
    Ciao !
    Ho istallato questo plugin sul mio blog www.fedetails.net ma ho il problema che il pulsante appare anche sui bottoni di condivisione ai social che ho a fine post...e se uno non è preciso preciso a clikkare invece di condividere col social si apre la pagina di pinterest tutte le volte causando un po di caos ! Non è che hai qualche idea come fare ?
    Grazie mille !

    RispondiElimina
    Risposte
    1. @CollaFranco
      Come precisato nel post il plugin è stato ripreso da un altro blog e quindi non posso modificare il codice. Comunque se il bottone in posizione centrale ti da noia puoi spostarlo in alto, in basso, a sinistra o a destra. Inserisci topleft, topright, bottomleft o bottomright al posto di center.

      Elimina
  2. è una meraviglia questo plugin :)

    RispondiElimina
  3. Ho tentato l'operazione, ma mi compare questa scritta
    Errore di analisi XML, riga 702, colonna 3: The element type "b:skin" must be terminated by the matching end-tag "
    Premesso che sono moooolto imbranata....c'è qualcosa che posso fare per completare l'operazione???
    Grazie fin da ora.

    RispondiElimina
    Risposte
    1. @# Se non ti prende il codice può darsi che tu non lo abbia copiato bene oppure che nel tuo template proprio non vada. La riga in cui c'è l'errore è all'inizio mentre questo codice viene inserito alla fine del modello quindi non riesco a vedere la connessione.

      Elimina
  4. E se io non avessi la riga < /body >?

    RispondiElimina
    Risposte
    1. @# Impossibile. Non solo la riga /body esiste nei modelli di Blogger ma in una qualsiasi altra pagina web. Forse hai problemi a cercare il codice. Leggi qui
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html

      Elimina
    2. Scusa ma nell'altro post non avevo attivato l'iscrizione ai commenti e quindi non l'ho visto
      Perdonami ma cercavo con l'F3................ no comment!

      Elimina
  5. ciao ernesto, può essere che questo script abbia smesso di funzionare, io non visualizzo più il tasto pinterest, da cosa può dipendere?

    RispondiElimina
    Risposte
    1. Segui questo post aggiornato per sostituire il vecchio script
      http://www.ideepercomputeredinternet.com/2016/05/pinterest-blogger-wordpress-bottone-javascript.html
      @#

      Elimina
    2. perfetto è tornato a funzionare tutto, grazie mille :-D

      Elimina
  6. come posso eliminare il tasto pinterest dalle immagini del widget post correlati

    RispondiElimina
    Risposte
    1. Non so che widget tu abbia e mi pare strano che si veda il bottone di Pinterest. Infatti ho aperto questo post
      http://www.madeinbottega.com/2016/06/come-realizzare-sfondo-lo.html
      e non ho visto pulsanti Pinterest sulle immagini del widget a fondo pagina
      @#

      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.