Pubblicato il 10/05/12e aggiornato il

Come installare i pulsanti di ShareThis per condividere i post su Facebook, Twitter, Google Plus, Pinterest, ecc.

Barra verticale con i pulsanti di ShareThis per condividere su tutti i social network quali Facebook, Twitter, Google Plus, Pinterest, OKnotizie, ecc.
In un articolo di qualche tempo fa avevo già parlato dello ShareThis Egg che presentava i pulsanti di condivisione nei vari social network all'interno di un uovo che si apriva al passaggio del mouse.

Sempre dallo stesso ShareThis vado a illustrare una serie di pulsanti che possono essere inseriti a inizio, a fine post o flottanti in una barra verticale per condividere i contenuti sui social network o per spedirli via email. La ragione che ci potrebbe far privilegiare questo tool ai bottoni creati da noi è la facilità di installazione e la vasta possibilità di scelta tra i vari social network.

Oltre a una guida su come installare il widget di ShareThis alla fine di questo post troverete un codice di esempio che può essere usato da chi è meno esperto con le configurazioni dei gadget.E' opportuno registrarsi cliccando su Register e inserendo un indirizzo email con la relativa password. Successivamente si potrà accedere alla personalizzazione dei pulsanti andando su Get The Button > Get It Now. Nel passaggio successivo se deve scegliere la piattaforma

sharethis-piattaforma-blog
Si può optare per Blogger e allora l'installazione sarà automatica ma per un maggior controllo consiglio di lasciare la prima opzione generica cioè Website. Si clicca su Next per passare alla scelta dello stile

sharethis-bars

Oltre al già citato Uovo ci sono i bottoni classici, i bottoni con contatore orizzontale e i bottoni con contatore verticale, la barra verticale e le barre orizzontali da inserire in alto e in basso del layout. Poniamo che la nostra scelta vada sui pulsanti da inserire in verticale denominata Bars

barra-verticale-sharethis

Dopo averla selezionata si clicca ancora su Next. In questo caso si può anche inserire della pubblicità, cosa che comunque non tratterà in questo articolo.

sharethis-button

Si selezionano i pulsanti dei vari social network spostandoli da destra a sinistra con il trascinamanto del mouse e eventualmente riordinandoli o eliminandoli. Successivamente si va su Finish Get the Code. Si aprirà una finestra popup in cui selezionare e copiare il codice

codice-sharethis

Si va su Modello > Modifica HTML > Procedi. La prima parte del codice dovrà essere inserita sopra il tag </head> mentre la seconda parte di codice sopra il tag </body>. Ecco un esempio dei due codici:

Codice di Facebook, Twitter, Google Plus, Pinterest, OKnotizie da incollare sopra a </head>

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

Codice da incollare sopra a </body>

<script>
var options={ "publisher": "9900249f-10bd-4218-9962-6eb51859a787", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "googleplus", "oknotizie", "pinterest", "email", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>

a seconda dei servizi scelti il codice potrà ovviamente mutare.




22 commenti :

  1. preferisco addthis che ha anche l'analytics

    RispondiElimina
  2. Ciao, hai idea del perché dopo aver seguito le istruzioni i bottoni mi vengono anche in cima al blog? Non saprei cosa modificare!

    RispondiElimina
    Risposte
    1. @ Flame
      Ho visto che ti si posizionano sopra anche alla Navbar. Hai però scelto i bottoni con il contatore. Forse non supportano il loro posizionamento in una barra verticale ma si tratta solo di una ipotesi. Quando ho fatto il test funzionavano ed è tuttora così nella pagina di Demo. Non saprei come aiutarti :(
      Prova a incollare esattamente il codice di questo post per vedere se è tutto OK. Se fosse così non sono supportate le configurazioni che hai scelto.

      Elimina
    2. ok grazie! domani faccio una prova!

      Elimina
  3. E possible inserire sotto la sidebar il bottone di Skype ?

    RispondiElimina
    Risposte
    1. @ Antonio
      Sul bottone di Skype ho scritto solo questo tutorial
      http://www.ideepercomputeredinternet.com/2011/08/come-inserire-un-bottone-per-essere.html

      Elimina
  4. Ciao Ernesto, ma come si può metterli sotto il titolo di ogni post (spuntando l'opzione Blogger) piuttosto che alla fine del post, poichè fa a pugni con il gadget LinkWithin.
    Grazie mille come sempre.

    RispondiElimina
    Risposte
    1. Non so se questi pulsanti possano essere inseriti in quella posizione. Comunque il codice dovrebbe essere incollato subito sotto a
      <div class='post-header-line-1'/>
      Per trovare la riga leggi qui
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      @#

      Elimina
  5. per caso sapete come fare a scegliere la foto di anteprima? ho trovato su google qualcuno che sostiene di aggiungere un tag nella head "image_src" ma a me non funziona

    RispondiElimina
  6. per caso sapete come fare a scegliere la foto di anteprima? ho trovato su google qualcuno che sostiene di aggiungere un tag nella head "image_src" ma a me non funziona

    RispondiElimina
    Risposte
    1. Ti prego di postare un solo commento e di non raddoppiarlo. Intendi la miniatura della condivisione su Facebook e Google+? Si devono aggiungere i metatag e le Preferenze di ricerca
      http://www.ideepercomputeredinternet.com/2012/03/come-personalizzare-le-preferenze-di.html
      http://www.ideepercomputeredinternet.com/2012/03/la-descrizione-nelle-preferenze-di.html
      http://www.ideepercomputeredinternet.com/2013/03/open-graph-facebook.html
      @#

      Elimina
    2. La miniatura verrà scelta tra quelle delle immagini presenti nei post mentre se ne vuoi fissare una fissa puoi impostare la miniatura del logo presente nei metatag togliendo i tag condizionali che la mostrano solo quando non ci siano immagini nei post ma non funziona in tutti i modelli
      @#

      Elimina
  7. ciao ernesto, ho sempre usato uno script per la condivisione dei post con share this (visualizzato in fondo al post) che mi permetteva di condividere con l'immagine di anteprima costituita dalla prima immagine del post, da ieri invece , l'immagine che appare in anteprima non è più la prima immagine del post, ma un'icona del blog, cosa può essere successo e come posso ovviare a questo?

    RispondiElimina
    Risposte
    1. Prova a leggere nel sito in questione se altri utenti hanno avuto il tuo problema, se i gestori del plugin ne sono a conoscenza e se nel caso è prevista una soluzione. Per condividere in modo corretto le immagini leggi questo post
      http://www.ideepercomputeredinternet.com/2013/03/open-graph-facebook.html
      che è per Facebook ma che può essere utile anche in altri casi
      @#

      Elimina
  8. Ciao Ernesto,
    complimenti per l'articolo. Sono molto interessanti gli 8 pulsanti inseriti alla fine del post. Credo che hanno una visibilità molto alta perchè sono alla fine della lettura del post
    Mi puoi indicare il link per l'installazione?
    Grazie

    RispondiElimina
    Risposte
    1. Su quei pulsanti ci ho fatto almeno tre post
      http://www.ideepercomputeredinternet.com/2015/07/icone-sociali-blogger-mobile.html
      http://www.ideepercomputeredinternet.com/2015/07/blogger-icone-social-network-mobile-desktop.html
      http://www.ideepercomputeredinternet.com/2015/07/sprite-css-immagini-blogger-seo.html
      @#

      Elimina
    2. Grazie, sei molto gentile, era proprio l'ultimo post che non trovavo Come creare CSS Sprite per le icone anche con effetto Hover ed è quello che mi serve.
      Scusa ancora una domanda: se voglio inserire una scritta del tipo:"CONDIVIDI SU": per esempio prima delle icone che codice devo usare e dove devo inserirlo.
      Grazie ancora e, con un po' di anticipo, Buon Ferragosto

      Elimina
    3. @# È meno semplice di quanto possa sembrare. In questo post
      http://www.ideepercomputeredinternet.com/2015/07/blogger-icone-social-network-mobile-desktop.html
      nel secondo codice, prova a sostituire queste righe
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <table cellpadding='0' cellspacing='0'>

      con quest'altre tre

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <p style='font-size:20px; font-weight:bold; color:#f00;> CONDIVIDI SU!</p>
      <table cellpadding='0' cellspacing='0'>

      Elimina
    4. @# Scusa manca un apostrofo nella seconda riga che deve essere così
      <p style='font-size:20px; font-weight:bold; color:#f00;'> CONDIVIDI SU!</p>
      altrimenti non ti salva il template

      Elimina
    5. Grazie mille ancora. Roba da matti: sei stato tu più veloce a rispondermi che io a ringraziarti. Voto 10 e lodi

      Elimina
  9. Ciao Ernesto, complimenti per l'articolo.
    Ho cercato di applicare nel mio Blog le istruzioni del commento precedente ma purtroppo viene fuori la scritta CONDIVIDI SU soltanto senza le icone sociali. Sai mica che codice devo aggiungere e/o togliare per visualizzare correttamente il tutto
    Grazie mille come sempre

    RispondiElimina
    Risposte
    1. No. No, Il codice funziona. Leggi però anche il commento 8.d perché in quello precedente mancava un apostrofo nel codice. Forse è per quello che non vedi correttamente le icone
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.