16 Aggiungere il tasto "pin it" di pinterest (con il contatore) ai post di blogger

Pinterest è la nuova bacheca virtuale che permette agli utenti di condividere e scambiare immagini prese dal web e non solo.
Il pulsante in questione consentirà agli utenti del vostro blog di "appuntare" sulla loro bacheca pinterest una o più immagini provenienti dai post che avete scritto.
Alla fine della lettura, cliccando su "pin it" potranno scegliere l'immagine che più hano gradito.
Se la ritroveranno infine sulla loro bacheca online con il collegamento al blog di provenienza (per l'appunto il vostro).
Una bella pubblicità per il vostro blog, una occasione per farsi conoscere da sfruttare assolutamente!!



Vediamo in pratica come aggiungere il bottone pin ai vostri post.
Aprite le opzioni di Blogger e portatevi su "design" e poi su "modifica html"
Spuntate la voce "espandi i modelli widget" e (con ctrl + f) aprite la finestra di ricerca
Digitate <data:post.body/> e localizzate questo tag nella vostra pagina html.
Immediatamente dopo questa tag copiate il codice seguente :

<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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> 
<!-- Pinterest button End -->

Questo era il codice,potete effettuare delle leggere varianti stilistiche al bottone modificando i campi "count-layout" e "magin left" come segue :

Bottone con contatore verticale 

count-layout="vertical" e poi  margin-left : -46 px

Bottone con contatore orizzontale 

count-layout="horizontal" e poi  margin-left : -93 px

Bottone senza contatore 

count-layout="lasciate vuoto" e poi  margin-left : -46 px

Potete infine piazzare il bottone all'inizio del post copiando l'intero codice PRIMA della tag <data:post.body/>.

Se lo volete spostare al centro o a destra modificate il valore "text-align" rispettivamente in "center" o "right"

E' tutto per ora, buon lavoro con Pinterest!!!!

Luca

Pin It