Aggiungere i bottoni di Pinterest, Facebook e Twitter alle immagini.

Come inserire i bottoni di Pinterest, Facebook, Twitter, Google Plus e More nelle immagini di Blogger.

Ho presentato molte alternative per la condivisione di articoli nei vari social network e social bookmarking. Non mi pare però di ricordare di aver mai illustrato un metodo per condividere gli articoli del blog tramite le immagini presenti nei post su Blogger.

Con questo tool, quando si passa con il mouse sopra a una immagine, vengono infatti mostrate le icone per la condivisione su Facebook, Twitter, Google Plus e Pinterest. Ci sono anche il tasto Print per la stampa della immagine e l'icona More del più bianco su sfondo rosso per accedere a molti altri social.

Viene utilizzato il servizio AddThis Labs Photo Sharing che fornisce le API. E' anche possibile registrarsi a AddThis per ottenere un ID e accedere alle statistiche della condivisione. Dopo la registrazione e il login, sarà possibile ottenere il nostro Profile ID aprendo la pagina Publisher Profiles.

Dopo che si sarà installato questo script di AddThis, le immagini nel cui codice HTML sarà inserita class="addthis_shareable", mostreranno i bottoni di condivisione se puntate con il cursore

E' una funzionalità che può essere molto utile per i blog che fanno delle immagini il loro punto di forza. Per l'installazione si va su Modello > Backup/Ripristino e si salva il template per sicurezza. Si torna su Modello > Modifica HTML > Procedi e si cerca la riga </head>. Subito sopra si incolla questo codice 

<!-- AddThis Buttons Start -->
<script src='http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ffad8a708febd2c' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
services_overlay:&#39;facebook,twitter,print,pinterest,google_plusone_share,more&#39;
}
</script>
<!-- AddThis Buttons End-->

dove al posto del mio ID in rosso incollate il vostro. Si salva il modello. Per fare in modo che nelle immagini appaiano i bottoni di condivisione quando ci si passa il cursore sopra, occorre fare una piccola modifica al codice delle foto. Se le avete inserite con l'Editor di Blogger, andando su HTML vedrete un codice simile al seguente

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQX20vcEGzdr7KdUIHVaxmX3LxJz3-bHdO0EI4x3-BHQYJe0HL4u9Qk5omfV13ZzuQpQojAGKUr-_sszf6FvHxxjoXTLExiMqW6kdfGlJT1XkoNueQ5u22b4kNchy1_hEPK3pXSLEOtoo/s1600/leopardo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQX20vcEGzdr7KdUIHVaxmX3LxJz3-bHdO0EI4x3-BHQYJe0HL4u9Qk5omfV13ZzuQpQojAGKUr-_sszf6FvHxxjoXTLExiMqW6kdfGlJT1XkoNueQ5u22b4kNchy1_hEPK3pXSLEOtoo/s1600/leopardo.jpg" /></a></div>

Lo dovrete modificare in questo modo

<div class="addthis_shareable" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQX20vcEGzdr7KdUIHVaxmX3LxJz3-bHdO0EI4x3-BHQYJe0HL4u9Qk5omfV13ZzuQpQojAGKUr-_sszf6FvHxxjoXTLExiMqW6kdfGlJT1XkoNueQ5u22b4kNchy1_hEPK3pXSLEOtoo/s1600/leopardo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQX20vcEGzdr7KdUIHVaxmX3LxJz3-bHdO0EI4x3-BHQYJe0HL4u9Qk5omfV13ZzuQpQojAGKUr-_sszf6FvHxxjoXTLExiMqW6kdfGlJT1XkoNueQ5u22b4kNchy1_hEPK3pXSLEOtoo/s1600/leopardo.jpg" /></a></div>

dove in sostanza si è inerito class="addthis_shareable" al posto di class="separator" che comunque si può anche lasciare. Nel caso abbiate postato l'immagine usando direttamente il suo URL, avrete un codice HTML di questo tipo

<a href="URL_IMMAGINE"><img src="URL_IMMAGINE" /></a>

che dovrà essere integrato in questo modo

<a href="URL_IMMAGINE"><img class="addthis_shareable" src="URL_IMMAGINE" /></a>

Il widget Share Pages Using Photos fa parte dei gadget sperimentali di AddThis Labs e quindi non è detto che funzioni in tutti i modelli specialmente in quelli gratuiti del tipo Blogspot che come è noto hanno il problema dei domini localizzati.

Fonte | Spice Up Your Blog -