Pubblicato il 22/02/12e aggiornato il

Come aggiungere il bottone con contatore di Pinterest e il pulsante per essere seguiti nel modello di Blogger .

I guru del web sono quasi tutti concordi nel ritenere che Pinterest rappresenti il social network del futuro. Specialmente nei siti di lingua inglese non passa giorno che non ci siano articoli dedicati a come migliorare la propria esperienza su Pinterest e a ottimizzare le sinergie tra questo social di immagini e il proprio sito o la nostra attività online.

Il team di sviluppatori di Pinterest ha reso noto da poche ore che implementerà un codice per rendere impossibile condividere le foto da quei siti che non vogliono dare questa opportunità. E' evidente infatti che l'acquisizione di immagini pone problemi di copyright non da poco e quelli di Pinterest vogliono proteggersi da eventuali azioni legali. E questo succede nonostante il servizio sia ancora in Beta e a inviti, cosa accadrà quando sarà aperto a tutti?

Dopo aver presentato un bottone per la condivisione su Pinterest delle foto del nostro sito che poteva essere inserito indifferentemente in una sidebar o nel codice del modello, presento tre nuove versioni del bottone di Pinterest con queste caratteristiche

  1. In due di queste sarà visibile anche il contatore dei Pin ricevuti che invece mancava nel precedente bottone
  2. Potrà essere inserito solo all'interno del modello di Blogger
  3. Si potrà scegliere lo stile modificando l'attributo di count-layout

Il codice da incollare nel template è il seguente

<!-- PulsantePinterest Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.thumbnailUrl'>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script> 
</b:if>
</b:if>
<!-- Pulsante Pinterest Fine - http://www.ideepercomputeredinternet.com -->

che potrà essere incollato per esempio sopra la riga

<data:post.body/>

andando su Modello > Modifica HTML > Procedi e espandendo i modelli widget. Oltre all'allineamento a sinistra (left) può essere scelto quello a destra (right) o centrale (center). Le opzioni per il contatore sono le seguenti

Tipo di bottone

Valore di count-layout

Valore di margin-left

image


 Horizontal


-46px

image


Vertical


-93px

image


None


-46px

L'aggiornamento del numero dei Pin può impiegare qualche secondo. Oltre che nella posizione consigliata, vale a dire subito sopra al contenuto del post, il bottone con contatore di Pinterest può essere installato insieme ai bottoni di Facebook, Twitter e Google Plus allineati alla fine del post (o all'inizio).

Se il visitatore è loggato su Pinterest, quando cliccherà sul pulsante, vedrà aprirsi una scheda del browser in cui scegliere la foto (o le foto) da condividere sul suo account

condividere-pinterest

e contemporaneamente postarla/e anche su Twitter e Facebook insieme a una breve descrizione

pinterest-facebook-twitter

Come aggiungere il pulsante per essere seguiti su Pinterest

Tale pulsante al momento può essere installato solo in un elemento pagina HTML/Javascript e quindi posizionato per esempio in una sidebar. Il codice da incollare è riportato qui sotto e i bottoni sono quelli ufficiali di Pinterest

Bottone Seguimi su Pinterest

Codice da incollare

Follow Me on Pinterest <a href="http://pinterest.com/parsifal32/"><img src="http://passets-cdn.pinterest.com/images/follow-on-pinterest-button.png" width="156" height="26" alt="Seguimi su Pinterest" /></a>
Follow Me on Pinterest <a href="http://pinterest.com/parsifal32/"><img src="http://passets-cdn.pinterest.com/images/pinterest-button.png" width="78" height="26" alt="Seguimi su Pinterest" /></a>
Follow Me on Pinterest <a href="http://pinterest.com/parsifal32/"><img src="http://passets-cdn.pinterest.com/images/big-p-button.png" width="61" height="61" alt="Seguimi su Pinterest" /></a>
Follow Me on Pinterest <a href="http://pinterest.com/parsifal32/"><img src="http://passets-cdn.pinterest.com/images/small-p-button.png" width="16" height="16" alt="Seguimi su Pinterest" /></a>

Occorre sostituire solo il proprio nome utente al mio username "parsifal32". Come detto il codice va incollato su Layout > Aggiungi un gadget > HTML/Javascript e posizionato a piacere. Ho pubblicato in rete una

Fonte | Blogger Sentral -





15 commenti :

  1. ciao Ernesto,
    ho provato ad inserirlo nel codice del template, ma non mi funziona, non so perché.. ho anche provato in due punti diversi, visto che di "data post body/" ce ne son due, almeno nel mio.. poi mi chiedevo se era possibile inserire il bottone all'interno di una SideBar Floating Share Buttons, visto che farselo fare da ShareSidebardotcom ora costa ben 9 dollari, rispetto ai 5 di qualche settimana fa e rispetto al gratuito di mesi fa.. posso inserirlo personalmente prendendo il codice direttamente dal sito di pinterest, ma mi dice di inserire l'url dell'immagine e io vorrei che mi desse automaticamente la scelta tra le immagini dell'url in uso..

    RispondiElimina
  2. @niki starnino
    Non so perché non ti funzioni. Inserirlo in una barra verticale al momento mi sembra piuttosto arduo, comunque dai una occhiata a questo post
    http://www.ideepercomputeredinternet.com/2011/06/barra-con-i-pulsanti-di-facebook-google.html

    RispondiElimina
    Risposte
    1. in realtà mi piace, direttamente nel post.. ora riprovo

      Elimina
  3. Non funziona anche a me e anch'io ho due "data post body". A dire il vero qualche giorno fa andava, adesso no...

    RispondiElimina
    Risposte
    1. @Sandra
      Allora non dipende dal codice ma dal loro server

      Elimina
  4. Ciao Ernesto, avrei bisogno di un piccolo aiuto.
    Vorrei affiancare il pulsante di Pinterest a quello di mi piace di facebook ma non so cosa andare a modificare...per affiancarlo.
    Mi potresti dare una mano.
    Grazie

    Questo è link al mio blog:
    http://creazionifusionorconfusion.blogspot.it/2012/03/taralli-al-pepe-e-mandorle.html

    RispondiElimina
    Risposte
    1. Che maleducata, non mi sono presentata, io sono Alysha molto piacere.

      Elimina
    2. @Alysha
      Prova a usare questa soluzione
      http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html
      Ovviamente inserisci solo i codici che ti interessano e metti quello di Pinterest con la stessa sintassi di quelli già presenti. Se invece che nel modello volessi posizionarli in una sidebar basta che incolli il codice in un gadget HTML/Javascript

      Elimina
  5. ciao ernesto questo col contatore non mi funziona ma quello per condividere sì..non capisco

    RispondiElimina
    Risposte
    1. @ LadyBella
      Per il pulsante con il contatore è arrivato un widget più recente e funzionante
      http://www.ideepercomputeredinternet.com/2012/12/pinterest-blogger-count-button.html
      All'inizio installalo senza quello della condivisione e poi prova con entrambi.

      Elimina
    2. grazie ernesto ora tutto ok !!!!!!!!

      Elimina
  6. Ciao Ernesto scusa la domanda forse sciocca...cosa intendi per nome utente...mettere l'indirizzo del blog ??? grazie.

    RispondiElimina
    Risposte
    1. @# Se sei iscritta a Pinterest il tuo profilo avrà un indirizzo simile a questo
      http://pinterest.com/parsifal32
      dove al posto di parsifal32 ci potrebbe essere edvige. Quello è il nome utente

      Elimina
  7. grazie.... finalmente sono riuscita a piazzare questo pulsante!!!
    ciao

    elisa

    RispondiElimina

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.