Come installare i bottoni di Pinterest nel template di Blogger.

Come installare i pulsanti di Pinterest nel modello di Blogger in modo da far pinnare le immagini dei post.

Pinterest è il social network delle immagini e sono in molti a preconizzargli un grande futuro. Personalmente rimango scettico sulla sua capacità di penetrazione anche in un pubblico non proprio di geek appassionati. Il social consiste nella condivisione di immagini che possono essere pinnate da una qualsiasi pagina web per poi essere ripinnate da tutti coloro che le visualizzeranno e che le apprezzeranno. Molte aziende stanno puntando su Pinterest per far conoscere meglio i propri prodotti. Le foto pinnate vengono inserite in dei board che non sono altro che cartelle in cui organizzare  il materiale. Recentemente sono state introdotti i board segreti per organizzare le foto che non vogliamo rendere di dominio pubblico.

Pinterest mette a disposizione degli utenti dei bookmarklet per condividere le immagini delle pagine web. I siti che hanno immagini interessanti nei loro post e vogliono agevolare i lettori nel condividerle su Pinterest possono inserire nel template dei bottoni ufficiali denominati Goodies. Questi pulsanti non funzionano però su Blogger se non si procede a delle modifiche.

Ricordandosi quelli che sono i tag specifici di Blogger possiamo utilizzarne alcuni per adattare il codice fornitoci da Pinterest. Nella fattispecie usiamo:

1. data:post.url - E' la variabile che individua l'URL del post
2. data:post.title - E' la variabile che individua il titolo del post
3. data:post.thumbnailUrl - E' la variabile che individua la miniatura del post

Con questo codice possiamo però condividere solo la prima immagine dell'articolo e con le dimensioni delle miniature che sono 72x72 pixel. Si può scegliere tra contatore orizzontale o verticale. Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Per mostrare il bottone alla fine dei post e solo in quelli si cerca il blocco di codice del Read More

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

e subito dopo incolliamo quest'altro codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;description=&quot; + data:post.title + &quot;&amp;media=&quot; + data:post.thumbnailUrl'>Pin It</a>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
</b:if>

Dopo aver salvato il modello si visualizzerà il bottone con il contatore orizzontale


Per il contatore verticale che avrà questo aspetto

si usa invece quest'altro codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;description=&quot; + data:post.title + &quot;&amp;media=&quot; + data:post.thumbnailUrl'>Pin It</a>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
</b:if>

posizionato sempre nello stesso punto del template. Se un utente ci clicca sopra si aprirà una finestra popup per selezionare la scheda (o board) in cui salvare l'immagine pinnata.