Quasi sempre durante la fase di sviluppo di un sito abbiamo l'esigenza di inserire i bottoni dei principali social network che consentono all'utente di condividere sui propri profili social, i post o le pagine di un sito che trovano interessanti.
In quest'ottica il servizio che utilizzo più di frequente è AddThis.
AddThis offre un set completo di codici che consentono di incorporare nel proprio sito i bottoni dei principali social network.
Anche dal punto di vista grafico le soluzioni offerte sono più che buone e si può scegliere tra fari tipi di layout che coprono il 90% di tutti i tipi di esigenze.
Ma se nel nostro sito dovessimo inserire delle icone particolarmente customizzate estrapolate direttamente dal layout grafico che abbiamo costruito o che ci è stato consegnato?
I seguenti codici funzionano solo con i pulsanti AddThis nativi. Puoi usare qualsiasi immagine per i tuoi pulsanti AddThis. Puoi anche utilizzare il testo, una combinazione di immagini e pulsanti o anche delle semplici classi CSS nel caso utilizzassi la libreria Font Awesome o un altro CSS font che renderizza le icone.
Ecco come procedere.
Esempio con immagine diversa
Usare un'immagine diversa per un pulsante AddThis è semplice, basta inserire il tag “<img />â€, all'interno del pulsante.
<a href="http://www.addthis.com/bookmark.php" class="addthis_button" style="text-decoration:none;">
<img src="http://s7.addthis.com/static/btn/sm-plus.gif" width="16" height="16" border="0" alt="Share" />Share</a>Stesso concetto espresso qui sopra ma applicato ad un intero set di bottoni
<div class="addthis_toolbox">
<div class="custom_images">
<a class="addthis_button_facebook ico-social"><img src="images/fb.png" width="24" height="24" border="0" alt="Condividi su Facebook"></a>
<a class="addthis_button_twitter ico-social"><img src="images/tw.png" width="24" height="24" border="0" alt="Condividi su Twitter"></a>
<a class="addthis_button_linkedin ico-social"><img src="images/ln.png" width="24" height="24" border="0" alt="Condividi su Linkedin"></a>
<a class="addthis_button_google ico-social"><img src="images/g.png" width="24" height="24" border="0" alt="Condividi su Linkedin"></a>
<a class="addthis_button_tumblr ico-social"><img src="images/tb.png" width="24" height="24" border="0" alt="Condividi su Linkedin"></a>
</div>
</div>Esempio con immagine e testo
<a href="http://www.addthis.com/bookmark.php" class="addthis_button" style="text-decoration:none;">
<img src="http://s7.addthis.com/static/btn/sm-plus.gif" width="16" height="16" border="0" alt="Share" />Share</a>Esempio con solo testo
<a href="http://www.addthis.com/bookmark.php" class="addthis_button" style="text-decoration:none;">Share</a>Esempio con classe CSS che renderizzano le icone della libreria Font Awesome, nello specifico caso l'icona di Facebook
<a class="addthis_button_facebook"><span aria-hidden="true" class="social_facebook"></span></a>Link utili