Pubblicato il 18/07/12 - aggiornato il  | 24 commenti :

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

bottoni-di-condivisione-twitter-facebook-googleplus

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.


24 commenti :

  1. Belli questi pulsanti, ben visibili ed esteticamente piacevoli!

    P.S. Ernesto, sogno o son desta? In blogger hanno aggiunto la possibilità di assegnare un url personalizzato agli articoli? :O
    Se è così... è fantastico!!

    RispondiElimina
    Risposte
    1. @dietaedintorni
      Leggi qui sotto
      http://www.ideepercomputeredinternet.com/2012/06/blogger-permalink-url-personalizzare.html
      anche l'aggiornamento di oggi

      Elimina
  2. Funziona anche nei modelli dinamici?

    RispondiElimina
    Risposte
    1. @pier
      Nei modelli a Visualizzazione Dinamica al momento non si può accedere a Modifica HTML e quindi non possiamo inserire codice.

      Elimina
  3. due cose vorrei chiederti: 1° i pulsanti li posso aggiungere in un widget html/javascript ? 2° si potrebbe creare un altro bottone così, per feedburner ?

    RispondiElimina
    Risposte
    1. @Manager
      Non ho provato a inserire il codice in un widget HTML/Java quindi non ti so dire. Puoi aggiungere anche un altro pulsante (se ti riesce) basta che modifichi l'immagine
      https://lh3.googleusercontent.com/-X2gzUAgqcx4/UAZrB3EBXJI/AAAAAAAAZJs/7yONLUyHSFQ/s516/condivisione.png
      e inserisca un nuovo bottone

      Elimina
    2. ti farò sapere, e se poi mi esce un bottone fatto pene te lo posto,e con relativo codice... se serve =D

      Elimina
    3. ops... volevo scrivere bene, scusami xD

      Elimina
  4. poi ci sono riuscito, questo codice, per come l'ho modificato, lo si può usare anche in un widget html/Java, ti posto il codice con google documenti:
    https://docs.google.com/open?id=0BwWutB6KjplDYzNFVThPQWNBaWs
    invece questo è il bottone di feedburner:
    http://i48.tinypic.com/v2vho6.png

    RispondiElimina
    Risposte
    1. @Manager
      Ottimo lavoro però per condividere un file su Google Drive devi prima pubblicarlo. Poi non devi postare l'indirizzo che vedi tu nel tuo account ma quello del file pubblicato.

      Elimina
    2. OK, credo di aver risolto: https://docs.google.com/open?id=0BwWutB6KjplDd1VUSXEzbnJTQTA

      ah mi scordavo :D, se vuoi vedere il widget in azione, lo puoi vedere nel mio blog: http://ps3gameita.blogspot.it/

      Elimina
    3. @Manager
      Gran bel lavoro, complimenti. L'idea di inserirlo nella parte alta è molto buona.

      Elimina
  5. Ciao! grazie per il post! volevo chiederti una cosa. Nel riquadro dei tre widget, facebook, google plus e twitter mi compare come se avessi già postato per quattro volte i post. Questo vale anche se vado a prelevare il codice sorgente direttamente dai corrispettivi siti ufficiali per mettere i bottoni. Uso il template di blogger predefinito non personalizzato. Mi potresti dare una mano?

    RispondiElimina
    Risposte
    1. @TheSound OfTheNews
      Forse la ragione è da ricercare in ripubblicazioni automatiche tramite Wikio, Liquida, oppure con le applicazioni di Facebook quali NetworkedBlogs o RSS Graffiti o ancora nella ripubblicazione automatica dell'articolo su Twitter.

      Elimina
    2. E' strano perchè se inserisco i bottoni di quest'altra guida http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html mi da nei corrispettivi riquadri numeri diversi.

      Elimina
    3. @TheSound OfTheNews
      Quello dipende dai server di Facebook

      Elimina
  6. ho provato ad inserie ma non succede nulla. Volevo togliere il bottone di wikio ma non so dove andare a toglierlo. mi puoi aiutare?

    RispondiElimina
    Risposte
    1. @ Marzia
      La demo come puoi vedere funziona ... Per il bottone di Wikio dovresti dirmi a quale blog ti riferisci dei quattro che vedo nel tuo profilo

      Elimina
  7. Ciao Ernesto,
    mi chiedevo come posso fare ad inserire quei bottoni di condivisione che ci sono qui sulla destra (tweet, google plus e mi piace di facebook) Quelli che hanno una specie di fumetto sopra con il numero dei mi piace e delle condivisioni, subito sotto "ricerca personalizzata".

    Grazie mille, Roberta.

    RispondiElimina
    Risposte
    1. @ tuttavitarobi
      Non ci ho ancora fatto un post ma puoi seguire questo tutorial
      http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html
      Invece di incollare il codice nel modello lo devi semplicemente mettere in un gadget HTML/Javascript senza la prima e l'ultima riga vale a dire

      b:if cond='data:blog.pageType == "item&quot
      e
      /b:if
      che sono tag condizionali e che vanno inseriti solo nel modello.

      Elimina
    2. Grazie mille.
      Questo mi è davvero utile. Però non voglio i bottoni sulla destra mi vanno benissimo sotto ogni post. In pratica il mio problema è che non ho capito come fare a far diventare il "mi piace" di facebook in versione Count_box. Cioè se nel codice sostituisco a "standard" la parola "count_box" mi fa solo il fumetto senza il tasto "mi piace" e quindi diventa inutile perché non è attivo.

      Elimina
    3. @tuttavitarobi
      Mi sa che dovrò fare un post con il codice dei tre bottoni perché è molto richiesto. Per la personalizzazione del bottone del Mi Piace puoi leggere questo post
      http://www.ideepercomputeredinternet.com/2011/03/come-inserire-e-personalizzare-il-mi.html

      Il codice del bottone con contatore è questo

      <div class='fb-like' data-layout='box_count' data-send='false' data-show-faces='false' data-width='55'
      expr:href='data:post.url'/>
      </div>

      però devi installare open graph nel modello
      http://www.ideepercomputeredinternet.com/2012/06/come-usare-open-graph-di-facebook-in.html

      Elimina
  8. Sono un pò troppo invasive... Mi piacerebbe qualcosa di più pulito :\

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy