Pubblicato il 14/12/11e aggiornato il

Come inserire i bottoni di condivisione di AddThis.

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
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
codice-sito-addthis
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
bottone-condivisione-addthis
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
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




17 commenti :

  1. Grazie!
    L'ho installato sul mio blog!
    Quando clicco su pulsante di condivisione per Twitter mi compare il titolo del post, il link e "via @Addthis".
    Noto, invece, che se clicco sul tuo pulsante Twitter compare "via @parsifal32".
    Come hai fatto a inserire il tuo account? Come hai modificato il codice HTML?
    Grazie :)

    RispondiElimina
  2. @Marco Stizioli
    Non ho usato questo metodo ma ho inserito il codice ufficiale di Twitter come illustrato in questo post
    http://www.ideepercomputeredinternet.com/2010/08/il-bottone-ufficiale-di-twitter-da.html
    ovviamente al posto di parsifal32 metti il tuo nick

    RispondiElimina
  3. Articolo grandioso! finalmente sono riuscito ad aggiungere quello che vole nella nuovo layout del mio blog e questo è il risultato http://www.justfishing.it/

    RispondiElimina
  4. Ciao, non ho ben capito una cosa...Dove trovo la stringa alfnumerica da sostituire a quella standard di addthis?
    Un'altra cosa: ho provato a seguire le tue indicazioni e riesco a inserire i bottoni bene, però il cpounter mi dà un numeor standard per ogni post, quindi credo non funzioni...A che cosa può essere dovuto?
    Grazie in anticipo...Martina
    http://trattoriadamartina.blogspot.it/

    RispondiElimina
    Risposte
    1. @Trattoria ...
      Ho controllato proprio adesso la Demo in questa pagina
      http://verypretty-blog.blogspot.it/2011/12/bottoni-di-condivisione-di-addthis.html
      e funziona perfettamente. Il contatore di AddThis è complessivo mentre quello accanto di Google Plus è individuale.

      Elimina
  5. volevo aggiungere i bottoni addthis dopo ogni post
    di blogger, ma non ci riesco
    cioè usando la funzione HTML/javascript me lo mette in alto a dx del blog
    correttamente , ma io lo voglio a d ogni post , esiste una funzione su addthis
    apposta per blogger , ma la vorrei personalizzare
    si può fare? In sostanza vorrei che apparisse : button tweet , button facebook, button google+ con il count dopo ogni post

    RispondiElimina
    Risposte
    1. @MauroMostardi
      Quello che si può personalizzare l'ho scritto nel post. Se vuoi mettere i bottoni dopo ogni post inserisci i tag condizionali e incolla il codice prima della riga
      < div class='post-footer' >
      come c'è già scritto nell'articolo

      Elimina
  6. grazie ..mi era sfuggito , ora ci provo :D

    RispondiElimina
  7. Per la cronaca: ho cercato il < div class='post-footer' >
    ma nel mio modello non c'è si sono altri footer
    es. .post-footer , ma sono nidificati in una serie
    di istruzioni html che non capisco..
    cmq ho risolto caricando un vecchio template e meraviglia! ha riportato
    i buttons dopo i post come volevo io

    RispondiElimina
  8. ciao, ho inserito il codice dei pulsanti add this senza problemi. Ora nella home page appaiono i pulsanti con gli stessi numeri nei vari contatori per ogni post, mentre cliccando su un singolo post sia mi piace che tweet sono a zero. come posso risolvere?

    RispondiElimina
    Risposte
    1. @ OneLifeInTravel
      Non so se si può risolvere. I codici sono tutti nei server di AddThis quindi è un problema che riguarda eventuali loro aggiornamenti.

      Elimina
  9. Grazie... proprio il post che cercavo per personalizzare i pulsanti di condivisione.

    Buona giornata!

    RispondiElimina
  10. ciao, anch'io mi sono cimentata e funziona perfettamente. E allora ti chiedo: si può fare in modo che questi pulsanti compaiano alla fine del post MA NON in home page? Perché così si potrebbe ovviare al problema di ripetere i pulsanti tutti con lo stesso numero di condivisioni, dato che mi sembra essi si riferiscono alla home page e non , effettivamente, al singolo post

    RispondiElimina
    Risposte
    1. Temo che tu non abbia letto attentamente il post. Dopo questa frase presente nell'articolo
      "A questo scopo dobbiamo inserire il codice tra le due righe che impongono appunto questa condizione"
      vengono mostrate due righe colorate di rosso da aggiungere al codice di AddThis per mostrare i bottoni solo nei post
      @#

      Elimina
    2. oh, cavolo hai ragione: troppe informazioni nuove tutte insieme; questa mi era sfuggita. Ci provo Grazie!

      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.