Pubblicato il 06/02/13e aggiornato il

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

bottone-pinterest-orizzontale
Per il contatore verticale che avrà questo aspetto
contatore-verticale-pinterest
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.




2 commenti :

  1. Molto utile! Lo cercavo da parecchio tempo!

    RispondiElimina
  2. Molto bello grazie. È un po' che pensavo di inserirlo.

    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.