Come inserire il bottone con contatore di Pinterest nel blog direttamente nel modello oppure in un gadget HTML/Javascript da posizionare in una sidebar o nel footer.
Il social network Pinterest divide il mondo del web in modo pressoché radicale. C'è chi lo considera come il social del futuro e chi invece lo trova assolutamente inutile. Come spesso accade la verità sta probabilmente nel mezzo e la utilità di Pinterest è funzione del tipo di attività web che si sta svolgendo. Chi usa poco le immagini non è interessato all'utilizzo di Pinterest perché è proprio sulla condivisione di foto la sua caratteristica. D'altra parte chi lavora molto con le immagini può trovare Pinterest come uno strumento fondamentale per dare viralità alle sue realizzazioni.
La condivisione delle immagini può avvenire attraverso dei bookmarklet aggiunti al browser oppure tramite dei bottoni appositamente inseriti nel sito. Vediamo come si possano installare su Blogger dei bottoni con contatore che permettano agli utenti di pinnare le nostre foto. Si utilizzano i Goodies di Pinterest per ottenere il codice da inserire nel modello oppure anche in un gadget HTML/Javascript.
Se si preferisce inserire il bottone nel template si va su Modello > Modifica HTML > Procedi e si mette la flag a Espandi i modelli widget. Per posizionare il bottone alla fine di ciascun articolo si cerca la riga <div class='post-footer'> e, subito sopra, si incolla il seguente codice
<!-- Bottone con Contatore di Pinterest Inizio -->
<b:if cond='data:blog.pageType == "item"'>
<div id='pin-wrapper' style='margin:8px 8px 8px 0; text-align: left;'>
<a data-pin-config='above' data-pin-do='buttonPin' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-43px;'><a data-pin-config='above' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/>
</b:if>
<!--Bottone con Contatore di Pinterest Fine -->
<b:if cond='data:blog.pageType == "item"'>
<div id='pin-wrapper' style='margin:8px 8px 8px 0; text-align: left;'>
<a data-pin-config='above' data-pin-do='buttonPin' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-43px;'><a data-pin-config='above' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/>
</b:if>
<!--Bottone con Contatore di Pinterest Fine -->
Si salva il modello e in tutti i post verrà mostrato un bottone con contatore posizionato in basso a sinistra. Se si vuole centrato o posizionato sulla destra si sostituisce left con center o right
Quando un utente cliccherà su tale pulsante visualizzerà una pagina in cui pinnare una o più immagini di quelle presenti nell'articolo. Il contatore mostrerà il numero totale delle condivisioni delle immagini presenti in quel dato articolo
Le foto pinnate finiranno in un board del navigatore e potranno essere ricondivise da chi segue quel dato utente sul social. Andando invece su Cancella si ritornerà alla scheda iniziale dell'articolo. Con il codice proposto il contatore sarà visibile sopra al bottone in questo modo
E' possibile modificare lo stile del pulsante inserendo al posto di above un altro valore nell'attributo data-pin-config secondo questo schema:
- above per mostrare il contatore sopra al bottone
- beside per mostrare il contatore sulla destra del bottone
- none per non mostrare alcun contatore
Se invece si decide di mettere il bottone in un gadget HTML/Javascript dobbiamo usare un altro codice. In questo caso si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla in Sezioni del sito questo secondo codice
<a data-pin-config="above" data-pin-do="buttonBookmark" href="//pinterest.com/pin/create/button/">
<img src="//assets.pinterest.com/images/PinExt.png" /></a>
<script src="//assets.pinterest.com/js/pinit.js"></script>
<img src="//assets.pinterest.com/images/PinExt.png" /></a>
<script src="//assets.pinterest.com/js/pinit.js"></script>
Anche in questo secondo caso si può cambiare above con beside o none per visualizzare il contatore rispettivamente accanto al pulsante invece che al di sopra o per non vederlo affatto. L'idea di questo articolo l'ho avuta leggendo un post di Blogger Sentral. Ai cultori di Pinterest consiglio anche i post
Ciao Ernesto..io ho provato sia nella modificadell'htma siacome gadget ma in nessun caso funziona..anzi nel primo non si vede proprio
RispondiEliminaQuale può essere il problema?
@ Morena
EliminaHo appena provato la demo e funziona ancora. Altro non ti so dire :(
Grazie lo stesso!
EliminaCiao Ernesto, scusami ma ci sto provando anch'io e non capisco dove sta l'errore... Non è che per caso sul modello simple di blogger non funziona?
RispondiElimina@ Giovanna
EliminaProva con un altro bottone
http://www.ideepercomputeredinternet.com/2012/02/come-inserire-il-bottone-di-pinterest.html