Pulsanti con contatore di Twitter, Facebook e Google Plus per la sidebar di Blogger.

Come inserire dei pulsanti con contatore in tutte le pagine di Blogger senza modificare il modello.

Dopo che molti lettori mi hanno chiesto come abbia fatto a inserire i pulsanti di condivisione di Facebook, Twitter e Google Plus nella sidebar di destra mi sono finalmente deciso a farci un post. Non illustrerò esattamente il procedimento che ho seguito visto che i javascript di Google Plus e di Facebook li ho inseriti nel modello dato che mi servono anche per la altri widget come il Like Box. Il codice che vado a presentare è invece funzionante senza dover modificare il template.

La particolarità di questi bottoni è che sono visibili in tutte le pagine del blog e permettono quindi di condividere oltre ai post anche le pagine di etichette, quelle di archivio e la homepage.

L'unica operazione che occorre fare è quella di creare una applicazione per Facebook che è diventata necessaria per installare i bottoni con questa modalità. Per farlo si accede semplicemente a Facebook Developers con il nostro account Facebook. Si va in alto a destra su Crea Applicazione, si digita il nome della App, si mette la flag sulla accettazione dei Termini e delle Condizioni e si clicca su Continua.

Si va quindi su Edit App per compilare i campi essenziali tra cui l'URL del nostro sito e il suo nome

Da notare che su App Domains non si mette http:// che invece va inserito in Indirizzo del sito. Si va su Salva modifiche e nel frontespizio saranno visibili un numero seriale e una stringa alfanumerica

Si tratta dell'App ID e dell'App Secret. In questa sede quello che ci serve è solo l'App ID che deve essere copiato per poi essere inserito nel codice. Si va su Layout > Aggiungi un gadget > HTML/Javascript e in Sezioni del sito si incolla appunto questo codice

<style type="text/css">
.tabellabottoni {
display:block;
float:left;
}
</style>
<table cellpadding='0' cellspacing='0' class='tabellabottoni'>
<tr> 
<td style='padding-top: -1px;'> 
<a class='twitter-share-button' data-count='vertical' data-via='parsifal32' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
    </td>
    <td style='padding-left: 32px; padding-top: -3px;'>
    <script type='text/javascript'>
//<![CDATA[
  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>
     <g:plusone size='tall'/>
    </g:plusone></td>
<td style='padding-left: 32px; padding-top:-4px;'>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1&appId=479289442099719";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class='fb-like' data-layout='box_count' data-send='false' data-show-faces='false' data-width='55'
expr:href='data:post.url'/>
    </div></td>
  </tr>
</table>

Si salva dopo aver opzionalmente inserito anche un titolo. Le modifiche fondamentali sono colorate di viola e riguardano il nome utente di Twitter e l'ID della applicazione su Facebook. I parametri in rosso servono per allineare e distanziare adeguatamente i vari bottoni.

Nel codice proposto i pulsanti sono stati posizionati a una distanza di 32 pixel uno dall'altro tramite il tag padding-left. Se la larghezza della sidebar è piccola si può diminuire questo numero. L'allineamento orizzontale è stato invece eseguito operando su padding-top. Inserendo dei numeri positivi si abbassa il relativo pulsante che invece viene alzato se si mettono dei numeri negativi. Il settaggio può variare da modello a modello. Questa metodologia può essere usata anche per posizionare i bottoni di alla fine o all'inizio del post. Volendo si possono aggiungere anche pulsati o icone di altri social considerando che è stato usato un codice di una tabella a una riga e che si possono aggiungere altre colonne.