Bottoni per condividere su Facebook, Twitter e Google Plus gli articoli di Blogger.

Come installare su Blogger un invito a condividere i post su Facebook, Twitter e Google Plus con i relativi bottoni.

Qualche anno fa alla fine dei post di molti blog si poteva notare tutta una serie di pulsanti per condividere l'articolo nei vari social network e social bookmarking. Da allora hanno perso ci sono diversi servizi che hanno perso importanza quali Technorati, Delicious e Digg mentre altri sono diventati assolutamente essenziali. Attualmente gli imprescindibili sono solo tre: Facebook, Twitter e Google Plus.

C'è stata quindi una certa pulizia nei layout dei siti che ha portato a lasciar perdere quei pulsanti che tanto non erano usati da nessuno e a dare invece una maggiore evidenza ai tre servizi appena citati. La proposta di questo articolo è l'installazione di un widget visibile alla fine di tutti i post che mostri un invito per condividere il contenuto appena letto mediante i classici bottoni resi in questo modo più visibili

Come mio solito ho anche pubblicato in rete una demo del widget

Per l'installazione, dopo aver salvato il template per ragioni di sicurezza, si va su Modello > Modifica HTML > Procedi e si mette la spunta a Espandi i Modelli Widget. Si cerca la riga

<div class='post-footer-line post-footer-line-1'>

e, subito sotto, si incolla il seguente codice

<!-- Bottoni Condivisione Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.condividi {
    height: 103px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRgZe1EWjPnP8a3XDLnhX-i3zZDvWrvFwqebiv1XK1odxmqSMr6xvjXWWmcc1f4A54vrajXA9RR4JgSuPInBEgDMw0mqqDXV9QLIE_Wlsk-uXQwX3pgky3MzemUN1f0xQQ_ROTKRBKBio/s516/condivisione.png) 0 -7px no-repeat;
    width: 516px;
    margin-left: 40px;
    margin-bottom:8px;
    margin-top:8px;
}
.ctwitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;
}
.cfacebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;
}
.cgoogle {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
    <div class='condividi'>
        <div class='ctwitter'>
            <a class='twitter-share-button' data-via='' href='https://twitter.com/share'>Tweet</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 = &quot;//platform.twitter.com/widgets.js&quot;;
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, &quot;script&quot;, &quot;twitter-wjs&quot;);
            </script>
        </div>
        <div class='cfacebook'>
       <fb:like action='like' colorscheme='light' expr:href='data:post.canonicalUrl' font='verdana' layout='button_count' send='false' show_faces='false'/>
            <div>
                <b:if cond='data:post.isFirstPost'>
                    <script>
                        (function (d) {
                            var js, id = &#39;facebook-jssdk&#39;;
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement(&#39;script&#39;);
                            js.id = id;
                            js.async = true;
                            js.src = &quot;//connect.facebook.net/it_IT/all.js#xfbml=1&quot;;
                            d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
                        }(document));
                    </script>
                </b:if>
                            </div>
        </div>
        <div class='cgoogle'>
            <g:plusone annotation='none' size='medium'/>
            <script type='text/javascript'>
            window.___gcfg = {lang: &#39;it&#39;};                 (function () {
                    var po = document.createElement(&#39;script&#39;);
                    po.type = &#39;text/javascript&#39;;
                    po.async = true;
                    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
                    var s = document.getElementsByTagName(&#39;script&#39;)[0];
                    s.parentNode.insertBefore(po, s);
                })();
            </script>
        </div>
    </div>
<p style='display:none;'>Widget per Blogger by <a href='http://www.ideepercomputeredinternet.com/'>Idee per Computer ed Internet</a></p>
</b:if>
<!-- Bottoni di Condivisione Fine -->

Si salva il modello. Si può cercare di centrare il widget operando su margin-left: 40px; che definisce la distanza in pixel dalla sinistra del layout. E' possibile anche settare la distanza tra il widget e la parte alta e bassa del layout (8 pixel). E' stata settata la lingua italiana sia per Facebook sia per Google Plus.