Box di condivisione sui social network per Blogger.

Come inserire i bottoni e le icone in un box dei più importanti social network: Facebook, Twitter, Google Plus, Youtube, Linkedin, Stumbleupon e i pulsanti per iscriversi ai feed e alla newsletter.

In verità il widget che vado a presentare può anche essere usato su Wordpress o altri CMS oltre a Blogger che da sempre rappresenta il focus principale di tutti i miei articoli.

Si tratta di un box che è usato in prestigiosi siti internazionali di informatica con un aspetto elegante ma nello stesso tempo funzionale. Sono presenti i bottoni del Mi Piace della pagina fan su Facebook, il bottone per aggiungere alle Cerchie su Google Plus e il pulsante con contatore per seguire su Twitter.

In basso ci sono anche le icone direttamente collegate ai profili su Linkedin, Stumbleupon e Youtube oltre a quelle per sottoscrivere la newsletter e a quella per iscriversi ai feed

E' difficile farlo più corto di 300 pixel perché il badge di Google Plus non si presta facilmente a essere personalizzato in larghezza. Per la installazione si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il codice seguente (si può tralasciare il titolo)

<style type="text/css">
.contenitore{
margin-bottom: 10px;position: relative;width: 300px;background-color:#fff;margin-left: 10px;
}
#cbfacebook{
width: 300px;overflow: hidden;margin-bottom: 10px;margin-top: 10px;border: 1px solid gainsboro;height: 100px;
}
#cbfacebook iframe{
padding: 12px 15px 0 12px;
}
#cbfacebook iframe{
height: 28px;width: 300px;
}
#cbtwitter
{width: 300px;overflow: hidden;margin-bottom: 10px;border: 1px solid gainsboro;margin-top: -10px;
}
#cbtwitter iframe{
padding: 19px 15px 19px 15px;}#hb-social-widget-google{width: 300px;margin-bottom: 10px;
}
#icone{
width: 270px;overflow: hidden;text-align: center;padding: 19px 15px 19px 15px;border: 1px solid gainsboro;
}
#icone div{
width: 32px;height: 32px;display: inline-block;margin-right: 10px;
}
#icone a{
width: 32px;height: 32px;display: block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn-t5IGq0fCRhpnJJ1UQQu5DgqAa82cRJm5EoAzZyD4DLleja1NqlR3tJ4Mo4KFM118KxYzTayA0uFm5gV76EUNULeyiNiFdfIwljcvUY83PLBfIwDN9JlYxl2qgp1ccKZ-8qp_5La-cI/s160/icone-sociali.png) no-repeat;}#icone-linkedin a{background-position: 0 0;
}
#icone-stumbleupon a{
background-position: 0 -33px;
}
#icone-youtube a{
background-position: 0 -65px;
}
#icone-feedburner a{
background-position: 0 -97px;
}
#icone-rss a{
background-position: 0 -129px;
}
</style>
<div class="contenitore"><div class="hb-configuration"><div id="cbfacebook"><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fideepercomputeredinternet&width=292&height=70&colorscheme=light&show_faces=false&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:292px;height:70px;" allowtransparency="true"></iframe></div>
<script type="text/javascript">window.___gcfg={lang: 'it'};(function(){var po=document.createElement("script");po.type="text/javascript";po.async=true;po.src="https://apis.google.com/js/plusone.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(po, s);})();</script>
<div id="hb-social-widget-google"><g:plus href="https://plus.google.com/111056841635962157738" size="smallbadge"></g:plus></div>
<div id="cbtwitter"><a href="https://twitter.com/parsifal32" class="twitter-follow-button" data-show-count="true" data-size="normal">Segui @parsifal32</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
<div id="icone"><div id="icone-linkedin"><a href="http://www.linkedin.com/in/parsifal32" target="_blank"></a></div><div id="icone-stumbleupon"><a href="http://www.stumbleupon.com/stumbler/parsifal32" target="_blank"></a></div><div id="icone-youtube"><a href="http://www.youtube.com/parsifal32" target="_blank"></a></div>
<div id="icone-feedburner"><a href="http://feedburner.google.com/fb/a/mailverify?uri=ideepercomputeredinternet/zUQN&loc=it_IT"></a></div><div id="icone-rss"><a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN"></a>
</div>
</div>
</div>
</div>

I parametri da personalizzare sono colorati di viola e riguardano il nickname di Twitter, l'username di Linkedin, il nome del canale di Youtube, il nick di Stumbleupon, l'ID del Profilo di Google Plus e la parte finale dell'URL di Feedburner

Si possono modificare anche tutti gli altri parametri del codice facendo un minimo di attenzione. Le icone sono state inserite in una unica immagine verticale. Per inserire altri social occorre modificare questa immagine il cui URL è colorato di verde oltre a ricalibrare le distanze verticali del background.