I bottoni per condividere il post sono davvero molto importanti all'interno di un blog. Se non avete grandi pretese potete utilizzare quelli che Blogger mette a disposizione.
Se invece pensate che niente deve essere lasciato al caso, e che quindi persino gli share buttons debbano essere abbinati alla grafica corrente del vostro template... beh allora questo è il post che fa per voi.
Il codice si poggia su uno script di AddThis.com, che vi consiglio di visitare ed esplorare per questo genere di risorse, dopodiché non resta molto da spiegare.
Infatti vi basterà copiare ed incollare il codice qui sotto all'interno del vostro HTML.
Il meccanismo di ricerca è sempre lo stesso: cliccate all'interno della finestra del codice CTRL+F e incollate questa riga <b:includable id='post' var='post'> e premete 'invio'.
Fatto ciò, vi sarà evidenziata in giallo la parte interessata. Scendete pian, piano fino ad arrivare a questa riga <span class='post-labels'> e incollate subito sotto il codice degli share buttons:
<!-- AddThis Button BEGIN -->
<div style='text-align: center;margin-top:20px;'>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'>
<img alt='Facebook share' border='0' src='URL_IMMAGINE' style='margin-right:5px;'/></a>
<a class='twitter' expr:href='"https://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter share' border='0' src='URL_IMMAGINE' style='margin-right:5px;'/></a>
<a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' src='URL_IMMAGINE' style='margin-right:5px;'/></a>
<a class='addthis_button_google_plusone_share + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank'><img alt='Share on Google Plus' border='0' src='URL_IMMAGINE' style='margin-right:5px;'/></a>
</div></div></div>
<script type='text/javascript'>var addthis_config = {"data_track_addressbar":false};</script><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
<!-- AddThis Button END -->
<div style='text-align: center;margin-top:20px;'>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'>
<img alt='Facebook share' border='0' src='URL_IMMAGINE' style='margin-right:5px;'/></a>
<a class='twitter' expr:href='"https://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter share' border='0' src='URL_IMMAGINE' style='margin-right:5px;'/></a>
<a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' src='URL_IMMAGINE' style='margin-right:5px;'/></a>
<a class='addthis_button_google_plusone_share + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank'><img alt='Share on Google Plus' border='0' src='URL_IMMAGINE' style='margin-right:5px;'/></a>
</div></div></div>
<script type='text/javascript'>var addthis_config = {"data_track_addressbar":false};</script><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
<!-- AddThis Button END -->
Per completare il tutto non vi resterà che inserire l'URL delle vostre immagini che raffigureranno i vari social: facebook, twitter, pinterest e google+.
Io ho inserito solo questi quattro, perchè credo siano quelli che abbiano maggiore influenza e affluenza.
Spero che questo tutorial vi sia di aiuto: se così è stato vi prego di condividerlo e magari lasciare un commento, che non fanno mai male :)
Baci!!!!
.jpg)
Quindi devo inserire i link dei tasti che mi piacciono? Dove li trovo sul web uguali? Grazie mille per il tuo aiuto :)
RispondiEliminaQuesti li ho creati io con photoshop. Li ho fatti colorati, ma con un codice ho tolto la saturizzazione...in pratica li resi quasi grigi :)
EliminaCiao, io ho inserito i bottoni personalizzati seguendoil tuo tutrial però oltre a questi mi appaiono anche quelli base di blogspot. come li tolgo?
RispondiEliminace lho fatta :) grazie mille per tutti i tuoi tutorial...il mio blog migliora giorno dopo giorno. Complimenti
EliminaGrazie Ale per le tue parole ♥
EliminaMi danno una grande carica per tornare a fare tutorial ♥♥♥