Pubblicato il 10/07/12e aggiornato il

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
bottoni-condivisione-innagini
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="http://4.bp.blogspot.com/-pAlq-FAnp5w/T_FMiOMtMLI/AAAAAAAAY6A/oW-yQz06pzU/s1600/leopardo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-pAlq-FAnp5w/T_FMiOMtMLI/AAAAAAAAY6A/oW-yQz06pzU/s1600/leopardo.jpg" /></a></div>

Lo dovrete modificare in questo modo

<div class="addthis_shareable" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-pAlq-FAnp5w/T_FMiOMtMLI/AAAAAAAAY6A/oW-yQz06pzU/s1600/leopardo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-pAlq-FAnp5w/T_FMiOMtMLI/AAAAAAAAY6A/oW-yQz06pzU/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 -




7 commenti :

  1. per la prima parte è tutto ok, ma il codice delle immagini io proprio non lo trovo nel mio html =(

    RispondiElimina
  2. @gaiavincenzi
    Prima devi pubblicare un articolo con delle immagini oppure modificare un post gia' pubblicato che abbia delle foto.

    RispondiElimina
  3. inserito su un'immagine...viedne visualizzato ma senza le personalizzazioni dei servizi vari come pinterest..inoltre se clicco su un qualsiasi tasto si condivide il link della pagina e non l'immagine

    RispondiElimina
    Risposte
    1. @Domenico...
      Deve condividere la pagina e non l'immagine. Su Pinterest invece si condividono le immagini. E' ancora in Beta e dà dei problemi come ho scritto nel post.

      Elimina
  4. Credo che per me sia una procedura un po´complicata o per lo meno oggi che ho mal di testa. Lo trovo un consiglio validissimo

    RispondiElimina
  5. non ci siamo.... da subito errore nel html... :(

    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.