30 gennaio 2010

Come personalizzare i servizi di AddThis

Dopo aver spiegato come aggiungere il pulsante di AddThis per dare la possibilità ai lettori di segnalare gli articoli nei vari network della rete, ecco come personalizzare i servizi per includere i grandi assenti in lingua italiana.

Personalizzare i servizi di AddThis si è rivelata un’operazione più complicata del previsto, visto che non sono presenti guide complete in nessuna lingua e sullo stesso sito la documentazione è relativamente scarna. Tuttavia, ho fatto io lavoro e basterà fare un semplice copia e incolla nel template.

Configurare un servizio personalizzato

Per dovere di cronaca, anche se è riservato ai più tecnici, spiego come indicare i servizi personalizzati. Basta aggiungere questo codice a quello del pulsante:

var addthis_config = {
      services_custom: [
            { name: "nome servizio",
              url: "indirizzo base?url={{URL}}&title={{TITLE}}",
              icon: "indirizzo icona"}
,
            { name: "nome servizio 2",
              url: "indirizzo base 2?url={{URL}}&title={{TITLE}}",
              icon: "indirizzo icona 2"}

            ],
      services_compact: 'dominio servizio 1,dominio servizio 2'
}

I singoli servizi vengono indicati seguendo lo schema del codice in rosso chiuso tra { e }, separandoli con la virgola. Nella parte in verde vanno invece indicati i domini di base. Questo codice personalizzato va inserito in quello che abbiamo messo precedentemente del pulsante:

<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
var addthis_config = {
     ui_language: "it",

        … codice servizi personalizzati …

     }
</script>

<div><a expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' class='addthis_button'><img src="http://s7.addthis.com/static/btn/v2/lg-share-it.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xxx"> </script></div>
</b:if>
<!-- AddThis Button END –>

Per esempio, per avere un pulsante con solo Wikio per votare/segnalare il post, il codice diventerebbe:

<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var addthis_config = {
     ui_language: &quot;it&quot;, 
    services_custom:
        [            
            {           
            name: "Wikio",
            url: "http://www.wikio.it/vote?url=&#39;<data:post.url/>&#39;&amp;title=&#39;<data:post.title/>&#39;",
            icon: "http://tinyurl.com/yd3hjtv"
            }
        ],
    services_compact: 'www.wikio.it'

    }

</script>
<div><a class='addthis_button' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'><img alt='Bookmark and Share' height='16' src='http://s7.addthis.com/static/btn/v2/lg-share-it.gif' style='border:0' width='125'/></a>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=xxx' type='text/javascript'> </script></div>
</b:if>
<!-- AddThis Button END –>

Ovviamente, ho fatto qualche piccola modifica per farlo funzionare perfettamente in Blogger. Ricordatevi di cambiare quel xxx con il codice che vi viene proposto quando generate il pulsante.

I principali servizi italiani, da copiare e incollare

Ecco la versione con gli stessi servizi che ho proposto io per i bottoni da inserire sotto i post:

  <!-- AddThis Button BEGIN --> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var addthis_config = {
     ui_language: &quot;it&quot;,      services_custom:
        [
            {
            name: &quot;TechNotizie&quot;,
            url: &quot;http://www.technotizie.it/posta_ok?action=f2&amp;url=<data:post.url/>&amp;title=<data:post.title/>&quot;,
            icon: &quot;http://tinyurl.com/ycojoej&quot;
            },
            {            name: &quot;Wikio&quot;,
            url: &quot;http://www.wikio.it/vote?url=<data:post.url/>&amp;title=<data:post.title/>&quot;,
            icon: &quot;http://tinyurl.com/yd3hjtv&quot;
            },
            {            name: &quot;fai.informazione&quot;,
            url: &quot;http://fai.informazione.it/submit.aspx?url=<data:post.url/>&amp;title=<data:post.title/>&quot;,
            icon: &quot;http://tinyurl.com/y9cdwvf&quot;
            },                        {            name: &quot;UpNews&quot;,
            url: &quot;http://www.upnews.it/submit?url=<data:post.url/>&quot;,
            icon: &quot;http://tinyurl.com/ybf6gvy&quot;
            },                        {            name: &quot;ZicZac&quot;,
            url: &quot;http://ziczac.it/a/segnala/?gurl=<data:post.url/>&amp;gtit=<data:post.title/>&quot;,
            icon: &quot;http://ziczac.it/a/e/zzsmall.png&quot;
            }
        ],
    services_compact: 'facebook, twitter, favorites,oknotizie,www.technotizie.it,www.wikio.it,fai.informazione.it,reddit,www.upnews.it,ziczac.it,delicious,segnalo,stumbleupon,technorati'
    }
</script>
<div><a class='addthis_button' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'><img alt='Bookmark and Share' height='16' src='http://s7.addthis.com/static/btn/v2/lg-share-it.gif' style='border:0' width='125'/></a>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=xxx' type='text/javascript'> </script></div>
</b:if>
<!-- AddThis Button END -->



Seguite l’operazione indicata nel post precedente per generare il codice del pulsante e recuperare quel xxx da sostituire nel codice qui sopra, e fate riferimento allo stesso articolo per l’inserimento del tutto nel template.



In questo caso, consiglio vivamente di lasciare il codice per la visualizzazione dei pulsante solo nella pagina del singolo post, altrimenti potreste avere problemi.



Per concludere



L’operazione è un po’ complessa ma chi vorrà cimentarsi avrà questo risultato:



image



Per semplificarvi la vita, potete benissimo lasciare i servizi proposti da AddThis. Per chiarimenti, non esitate a lasciare un commento.

10 commenti:

  1. ottima spiegazione...COME SEMPREEE! ;;)

    RispondiElimina
  2. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  3. io ho usato la versione già pronta di AddThis, quella con il pulsante con accanto le icone di facebook, twitter, google per gli altri siti di condivisione c'è il menù a tendina; per vedere tutti i servizi disponibili c'è la finestra che appare al centro dello schermo.
    I pulsanti già pronti di AddThis per me vanno bene.

    RispondiElimina
  4. Grazie Orazio sono riuscita a mettere almeno quello normale sono le faccine che non c'è niente da fare pensa che sul blog di prova funzionano ciaoooooooooo :)) :)) :))

    RispondiElimina
  5. Troppo difficile per me, che sono un quasi analfabeta della tastiera, ma approfitto per chiederti una cosa anche se è OT.

    Esiste un sito a prova appunto di analfabeti come me (tipo quelli per creare blog come Blogger e altri)per creare applicativi per iPhone et similia? Ho delle idee ma non ho alfabetizzazione da programmatore (neanche htlm) eppure riesco a compilare se pur maldestramente un blog. Possibile che nessuno abbia pensato a fornire uno strumento idiot proof per fare applicativi per i nuovi telefonini , che mi sembra un bel business?
    Grazie dell'attenzione, so che se c'è qualcosa tu lo sai!!!

    Enrico

    RispondiElimina
  6. Ho provato ma mi dà questo errore:

    Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto.
    Messaggio di errore XML: The element type "b:if" must be terminated by the matching end-tag "".


    Cosa devo fare?

    RispondiElimina
  7. Ciao, sapete come si fa a fare in modo che la notizia condivisa su (esempio) facebook abbia il titolo e l'immagine della mia notizia e non una fittizia (cosa che mi accade adesso..)?

    RispondiElimina
  8. ciao, ho personalizzato grazie alla tua guida, ma
    come posso fare per togliere il click dal bottone e lasciare solo l'over? in modo che non me li rimostri tutti al click?
    è possibile?
    grazie!

    RispondiElimina
  9. Salve ragazzi, ho provato a inserire il pulsanti di addthis sul mio sito fatto con jjomla 2.5 e virtuemart per condividere i prodotti sui social, tutto ok ma non riesco a capire perche se provo a condividere ad esempio su facebook il popup che compare si apre bene e visualizzo l'immagine del prodotto da condividere , ma squando poi clicco su condividi, nella mia pagina facebook vedo l'ultima immagine relativa al prodotto e non quella visualizzata nel popup. qualcuno ha già affrontato questo problema? Grazie anticipatamente.

    RispondiElimina

Nota. Solo i membri di questo blog possono postare un commento.