Come inserire i bottoni di condivisione di AddThis.

Come installare i bottoni, le barre verticali e i banner orizzontali di condivisione di AddThis in Blogger. Aggiornamento a fondo pagina.

AddThis è un servizio di condivisione che supporta che, attraverso le sue API, supporta più di 300 social network, aggregatori, portali e quant'altro. E' particolarmente interessante perché ci permette di crearci la nostra tabella di bottoni di condivisione in modo del tutto personalizzato inserendo i pulsanti relativi ai siti che più ci interessano. Sono presenti anche pulsanti per siti prettamente italiani come OKNotizie, Diggita, Fai Informazione, Upnews, ZicZac come anche i bottoni più classici che puntano a Facebook, Twitter, Digg, Reddit, Google Plus e LinkedIn. 

Nella homepage di AddThis si clicca su Get The Code. Viene richiesta una email se vogliamo creare un account per monitorare le condivisioni fatte sul nostro sito attraverso un report che ci verrà inviato mensilmente. L'iscrizione è comunque opzionale e non obbligatoria. Si può chiudere la finestra modale per copiare il codice di AddThis che avrà un aspetto simile a questo

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ee86a173ab78986"></script>
<!-- AddThis Button END -->

La stringa alfanumerica colorata di rosso (xa-4ee86a173ab78986) nella penultima riga del codice è l'ID identificativo del nostro sito e serve per ottenere le statistiche di condivisione che come già detto sono comunque opzionali. Ci sono quattro righe del tipo

<a class="addthis_button_preferred_X"></a>

che possono diventare di meno o anche molte di più e che vanno personalizzate secondo le nostre esigenze sostituendo alla parte in verde il codice del servizio di cui vogliamo visualizzare il pulsante di condivisione. Si può scorrere questa

• Directory dei servizi supportati da AddThis -

Per cercare il codice dei vari social bookmarking è opportuno cliccare su F3 o Ctrl+F e inserire il nome del sito esattamente come si fa quando si cerca una riga di codice nel modello di Blogger. Il codice del servizio si trova nella seconda colonna e in genere non è altro che il nome del social e dell'aggregatore

La seconda riga determina lo stile dei bottoni. Se viene lasciata quella di default i pulsanti avranno dimensioni di 16x16 pixel. Se invece desideriamo dei bottoni più grandi possiamo sostituire

<div class="addthis_toolbox addthis_default_style ">  con

<div class="addthis_toolbox addthis_default_style addthis_32x32_style ">

per avere dei pulsanti con dimensioni di 32 pixel. Fatte tutte queste premesse possiamo per esempio crearci un codice di questo tipo

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style addthis_32x32_style'>
<a class='addthis_button_twitter'/>
<a class='addthis_button_facebook'/>
<a class='addthis_button_tumblr'/>
<a class='addthis_button_oknotizie'/>
<a class='addthis_button_diggita'/>
<a class='addthis_button_upnews'/>
<a class='addthis_button_informazione'/>
<a class='addthis_button_print'/>
<a class='addthis_button_compact'/> <a class='addthis_counter addthis_bubble_style'/> <a class='addthis_button_google_plusone'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ee7df237c525c2f' type='text/javascript'/>
<!-- AddThis Button END -->

Ho scelto le icone da 32 pixel e inserito i servizi colorati di rosso. Le due righe colorate di verde rappresentano il bottone che apre la finestra di condivisione in cui scegliere tra altri 314 servizi (al momento) e il contatore delle condivisioni che sono state già effettuate

Ho messo il bottone di Google Plus per ultimo perché, almeno nel modello in cui ho testato AddThis, lascia un po' di spazio sulla sua destra. La stringa alfanumerica colorata anch'essa di verde è specifica del nostro sito e deve essere sostituita con quella fornitaci da AddThis. Ho anche aggiunto un utilissimo pulsante per stampare il post (print) che permetterà ai visitatori di procedere in questo senso.

Questo codice può essere posizionato a piacere e passo a indicare le opzioni più interessanti. Si può decidere di metterlo in un elemento pagina andando su Layout > Aggiungi un gadget > HTML/Javascript e quindi posizionarlo sotto l'area del post. Forse però è più funzionale inserirlo all'interno del modello nella parte finale del layout subito sotto l'articolo in modo da dargli una maggiore visibilità. In questo caso è consigliato mettere dei tag condizionali per visualizzare i bottoni di AddThis solo nei post e non in homepage, nelle pagine delle etichette e in quelle di archivio.

A questo scopo dobbiamo inserire il codice tra le due righe che impongono appunto questa condizione

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
   Codice di AddThis

  </b:if>

Per il posizionamento dipende molto dal nostro layout. Si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Il codice di AddThis si può mettere indifferentemente subito prima di una delle seguenti righe

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

Nel primo caso si visualizzerà subito sotto il contenuto del post mentre con le altre tre opzioni scivolerà sempre più in basso. Ho postato una

• Demo dei pulsanti di AddThis con Facebook, Twitter, OKNotizie, Diggita, UpNews, ecc -

La demo è stata inserita subito prima della quarta riga. Nel caso ci sia una vicinanza eccessiva tra questi bottoni e gli altri elementi del blog, si può inserire un tag <br/> (salto di riga) subito dopo la prima riga del tag condizionale o subito prima di </b:if>. Potete verificare il perfetto funzionamento dei bottoni cliccandoci sopra. Da notare che viene rilevata automaticamente la lingua del browser e che quindi molte espressioni originariamente in inglese vengono automaticamente tradotte. Se volete aggiungere altre opzioni date uno sguardo alle API di configurazione di AddThis. Avevo già parlato di questo tool nei post

1. Bellissimo widget di condivisione per Blogger -
2. AddThis per aggiungere bottoni di voto o di condivisione su Blogger -

Leggi il post più recente su AddThis
Come installare i bottoni di condivisione di AddThis