Pulsanti per Condividere Immagini con Smart Layer by Addthis su WordPress

Dopo aver visto come installare il plugin Smart Layer by Addthis voglio condividere con voi un piccolo hack che ci permette di abilitare una funzionalità nascosta: mostrare i pulsanti per condividere immagini sui social network.
Le immagini e video sono gli oggetti maggiormente condivisi sui social, quindi integrare tale funzionalità nel proprio sito WordPress può aumentare il coinvolgimento dell’utente, il traffico e, di conseguenza, i guadagni.

Come funziona

Il plugin Smart Layer funziona grazie ad un Javascript che viene integrato in tutte le pagine del sito. Attraverso la configurazione del plugin, però, possiamo accedere solo ad una piccola parte delle funzioni supportate dalle API di Addthis.
Una di queste funzioni sono proprio i pulsanti per condividere ogni immagine sui social network come Facebook, Google+, Pinterest,ecc…

Procedura

1. Innanzi tutto verifichiamo che nelle nostre pagine sia stato integrato il codice javascript creato dal team di Addthis per sfruttare le loro API. Basterà verificare che nel codice sorgente sia presente il seguente codice:

<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=[YOUR PROFILE ID HERE]"></script>

Per chi ha installato il plugin ufficiale sarà solo una “precauzione”, mentre per chi usa altri CMS o vuole implementare manualmente questa funzione anche senza installare Smart Layer sarà assolutamente necessario.

2. Ora finalmente possiamo sporcarci le mani infilandole sotto al cofano di WordPress! Abilitiamo i pulsanti per condividere le immagini inserendo il codice javascript necessario manualmente all’interno del file header.php contenuto del nostro tema WordPress.

Possiamo editare il file header.php contenuto all’interno della cartella /public_html/wp-content/themes/Nome TuoTema sul vostro server o, forse, più semplicemente, direttamente da WordPress accedendo alla pagina www.TuoSito.com/wp-admin/theme-editor.php e selezionando dall’elenco a destra della pagina il fileTestata ( header.php). Inseriamo, quindi, prima del tag </head> il seguente codice javascript:

<script type="text/javascript"> var addthis_config = {
services_overlay:'facebook,twitter,google_plusone_share,more,pinterest'
}</script>

Poi cliccate sul pulsante “aggiorna file in fondo alla pagina per salvare.

3. Personalizziamo i pulsanti dei social network da visualizzare: io ho messo Facebook, Twitter, Google+, Pinterest e il pulsante “More” per permettere all’utente di condividere uno qualsiasi tra le decine di social supportati da Addthis. In questa pagina potete trovare l’elenco completo

4. Ora per visualizzare i pulsanti basterà, subito dopo aver inserito in un nostro articolo un’immagine su cui vogliamo attivare la funzione, editare il codice HTML relativo aggiungendo, all’interno del tag IMG il codice:

class="addthis_shareable"

Ottenendo un codice simile al seguente:

<img class="addthis_shareable" src="http://www.example.com/example_image.png">

E finalmente riusciremo a visualizzare i pulsanti per condividere immagini:

Conclusioni

Dai social network possono arrivare molte visite e ottimizzare il proprio sito per i social network è molto importante per ogni webmaster sia professionale che amatore. Vorrai mica perderti questi potenziali visitatori? Così i tuoi utenti ti aiuteranno a portarti altri “clienti” grazie al loro passaparola.

L’articolo ti è piaciuto? Condividilo con chi vuoi attraverso il tuo social network preferito usando la barra a sinistra.

Hai testato altri script o hai apporta delle modifiche? Hai bisogno di aiuto? Condividi con noi la tua esperienza lasciando un commento!