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

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

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

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.

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

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.