Pubblicato il 04/06/17 - aggiornato il  | 3 commenti :

Come aggiungere i bottoni di condivisione di AddThiss a Blogger.

Come configurare i bottoni di condivisione di AddThis in un blog della piattaforma Blogger personalizzandone l'aspetto e i social.
Personalmente preferisco inserire nel blog i bottoni di condivisione creati da me senza dover rivolgermi a un servizio esterno. In questo modo non si creano link verso altri siti che d'altra parte guadagnano in autorevolezza proprio ricevendo tali backlink visto che i servizi che offrono sono spesso gratuiti.

Chi fosse interessato a una soluzione personalizzata fatta da noi può consultare il post su come mostrare i bottoni di condivisione su desktop e su mobile in un sito della piattaforma Blogger.

Bisogna però riconoscere che alcuni servizi specializzati in queste funzionalità offrono delle opzioni davvero interessanti. Per quello che riguarda gli Articoli Simili o Correlati viene molto usato LinkWithin mentre per le icone di condivisione uno dei preferiti è certamente AddThis.

AddThis non ha un tool specifico per inserire i suoi bottoni in siti di Blogger. In questo post vedremo come effettuare tutti i passaggi per registrarci al sito, per scegliere il tipo di bottoni, per selezionare quali bottoni visualizzare e per mostrarli subito sotto il titolo del post e/o subito alla fine dell'articolo.






In definitiva vogliamo che un generico post di Blogger prenda questo aspetto

addthis-buttons

Le icone possono essere mostrate all'inizio, alla fine o in tutte e due le posizioni. Passando con il mouse sopra alla icona del +Più si visualizzeranno altre opzioni di condivisione. Il navigatore cliccando su una icona condividerà il post (e non la home del blog) nel social network prescelto.






COME REGISTRARSI A ADDTHIS E SCEGLIERE I BOTTONI


Si apre la pagina di AddThis quindi si va su Continue with Google, Continue with Facebook, Continue with Email. Con le prime due opzioni si accede con il nostro account su Google o su Facebook mentre con la terza dovremo creare un account indicando un indirizzo email e una password.






Dopo il primo accesso vi sarà chiesto se aggiungere un collaboratore. Andate su Not Now. Nel Menù in alto andate su Tools. Non occorre indicare l'indirizzo del blog. A ogni Profilo verrà assegnato un ID.

addthis-tools

Si va poi su + Add New Tool per scegliere e configurare i nostri bottoni

tool-addthis

I tool disponibili sono Share Buttons, Follow Buttons, Related Posts, List Building, Link Promotion e Website Tip Jar. In questo articolo mi limiterò al tool Share Buttons ma se il servizio interessa potrei scrivere altri articoli sugli altri tool. Si clicca quindi su Share Buttons per sceglierne lo stile. 

stile-sharing-buttons

Per mostrare i bottoni all'interno dei post si seleziona Inline. Con Sidebar verrà invece creata una barra laterale visibile al lato dei post. Image Sharing mostrerà i bottoni di condivisione sopra alle immagini per condividerle. La scelta di Popup è più invasiva visto che mostrerà una finestra modale di condivisione. Con Bar invece verrà mostrato un banner in alto della pagina con cui condividerla. Dopo la scelta si va su Continue.

Nella colonna successiva dovremo settare la configurazione dei bottoni

scelta-servizi

Con Automatic verranno mostrati i servizi scelti da AddThis. Mettendo la spunta Select your own si va poi su Add More Service per selezionare manualmente i servizi e i social da aggiungere. Quelli disponibili sono moltissimi. Ci si può aiutare digitandone il nome nel campo Search Services. Per avere l'icona del +Più come ultima si può eliminare per poi aggiungerla appunto per ultima cercando AddThis tra i servizi.

Quando abbiamo finito si va su Save & Continue. Ci verrà mostrata la pagina del codice da incollare nel Tema di Blogger. Si può anche in un secondo momento cambiare la scelta dei bottoni andando su Tools -> Settings per modificare tutti gli aspetti delle scelte effettuate.

codice-addthis

Anche il codice potrà essere trovato in un secondo momento cliccando su Get the Code.

COME CONFIGURARE IL CODICE DI ADDTHIS SU BLOGGER


Nel primo campo di Get The Code dovremo copiare il codice dello script. Si tratta di un codice uguale per tutti i tool con la sola differenza di una stringa tipo #pubid=ra-5933cce3add5ec02 che è l'ID del nostro sito

Tale primo codice va copiato su Tema -> Modifica HTML subito sopra alla riga </body>.
Ora si scorre la pagina verso il basso fino a trovare il secondo codice che sarà simile a questo

<!-- Go to www.addthis.com/dashboard to customize your tools --> <div class="addthis_inline_share_toolbox"> </div>

Se lo incollassimo così com'è nel Tema di Blogger condivideremo solo la Homepage e non i singoli post. La parte del codice veramente importante è quella evidenziata di giallo e che individua lo stile del nostro tool. Nel caso dell'esempio in questione i bottoni di condivisione inline.

Il codice precedente va modificato in questo modo

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='addthis_inline_share_toolbox' expr:data-title='data:post.title' expr:data-url='data:post.url'/>
</b:if>

dove dovremo solo personalizzare la stringa evidenziata di giallo copiandola dal codice che ci è stato fornito. I tag condizionali aggiunti servono per mostrare i bottoni solo negli articoli mentre le stringhe expr:data-title='data:post.title' e expr:data-url='data:post.url' sono necessarie per condividere rispettivamente il titolo del post e il suo indirizzo.

POSIZIONAMENTO DEI BOTTONI DI ADDTHIS


Si torna su Tema -> Modifica HTML e si cerca la riga

<b:includable id='post' var='post'>

che è quella che indica l'inizio della versione desktop di Blogger. Si scorre la pagina verso il basso fino a trovare

<div class='post-header-line-1'/>

Per mostrare i bottoni subito sotto il titolo del post il codice precedente va incollato subito sotto a tale riga. Scorrendo ancora la pagina del codice verso il basso troveremo la riga

<div class='post-footer'>

Per mostrare i bottoni alla fine del post si incolla il codice subito sopra a tale riga. Ovviamente possono essere mostrati in entrambe le posizioni come mostrato nella Demo incollando il codice due volte.


APPENDICE FINALE


Se avete più di un sito in cui volete aggiungere i bottoni di AddThis dovete andare su My Site -> Add Profile per poi dare un nome al nuovo Profilo. Verrà creato un altro ID che sarà aggiunto al primo script in modo da poter settare un nuovo tool di bottoni di condivisione

profili-addthis


Nella Dashboard di AddThis potremo passare da un sito a un altro per configurarli separatamente.
Le impostazioni dei bottoni possono essere personalizzate ulteriormente. Andando su Tools -> Settings, dopo aver eventualmente modificato i bottoni di condivisione ci sono anche le sezioni Design e Advanced Options.

addthis-opzioni-avanzate

In Design si possono scegliere le dimensioni delle icone (Large 48px, Medium 32px, Small 16px) e il colore di sfondo mentre in Advanced Options possiamo scegliere di nasconderle nella versione mobile o in quella desktop oppure di renderle Responsive fissando il breakpoint cioè la risoluzione di passaggio dalla visualizzazione desktop a quella mobile. Quest'ultima opzione è utile per chi usa i Temi Responsive.

Chi vuole mostrare queste icone anche nella versione mobile di Blogger e non ha un Tema Responsive deve incollare il secondo codice sempre sopra e/o sotto alle righe indicate che però devono essere trovate scorrendo il codice verso il basso a partire dalla riga

<b:includable id='mobile-post' var='post'>

che è quella che indica l'inizio della versione mobile di Blogger.




3 commenti :

  1. Un milione di grazie Ernesto! Finalmente dopo un numero infinito di tentativi fatti nei giorni scorsi, sono riuscita ad inserire i bottoni di AddThis nel nuovo blog.

    Avrei voluto metterli sia sotto il titolo che in fondo al post ma, pure inserendo il codice nei due punti da te indicati, compaiono solo sotto il titolo.
    Ho provato un sacco di volte e non riesco a capire quale sia il problema.

    Eppure ho visto nella tua demo che ci sono in entrambi i punti.
    Comunque quelli sotto al titolo funzionano :).
    Grazie ancora!

    RispondiElimina
    Risposte
    1. Credo dipenda dal fatto che hai inserito il codice nella versione mobile invece che in quella desktop. Devi scorrere il codice verso il basso fino a trovare
      <div class='post-footer'>
      e incollarlo subito sopra o
      <data:post.body/>
      e incollarlo subito sotto
      @#

      Elimina
    2. Siii evviva, ora è tutto a posto!
      Volevo anche aggiungere che, grazie ai tuoi post, ho scoperto che per mostrare le cose anche sul cellulare bisogna inserire i codici in un altro punto rispetto al desktop ed anche che è possibile mostrare i bottoni solo nei post e non nella home.
      Ho un blog da molti anni e ho imparato questa cosa solo in questi ultimi giorni.
      Nel nuovo blog lo farò da subito.
      Grazie, grazie grazie.

      Ti auguro una buona giornata.

      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.