AddThis: condividere i propri articoli nei maggiori servizi social della rete


Ho proposto tempo fa una mia soluzione per aggiungere in fondo agli articoli i pulsanti per permetterne la condivisione con i maggiori servizi “social” della rete italiana. Per chi volesse un’alternativa allo script proposto da me (magari per esigenze grafiche o per personalizzarne i link), esistono numerosi siti specializzati che offrono (gratuitamente e senza registrazione) i pulsanti da inserire nel proprio blog, come Post<li>, ShareThis o AddThis. Ho trovato particolarmente interessante quest’ultimo, sia per l’estrema possibilità di personalizzazione, sia per i risultati grafici che ritengo i migliori.

Inserendo i pulsanti di AddThis in fondo al post, daremo la possibilità agli utenti di aggiungerlo ai preferiti, di inviarlo via mail, di aggiungerlo a qualche servizio di bookmark o di segnalarlo ai vari social network, con un menù a scomparsa che si apre al passaggio del mouse:

image

Come si vede, AddThis mostra automaticamente, per la lingua scelta, i servizi più usati in quel paese, come OkNotizie o Segnalo, ma non mancano Facebook o Twitter.

Vediamo come inserirlo nel blog e come personalizzarlo.

Generiamo i nostri pulsanti

Per prima cosa andiamo nella pagina principale di AddThis e scegliamo la nostra piattaforma (passo 1, nel mio caso Blogger) e lo stile del pulsante che vogliamo (passo 2):

image

E poi clicchiamo su “Get Your Button” al passo 4.

E’ anche possibile avere delle statistiche sul nostro blog (passo 3), tra l’altro integrabili con Google Analytics, ma lascio approfondire l’argomento a chi è interessato.

Nella pagina successiva, più sotto, preleviamo il codice che ci viene proposto e mettiamolo da parte:

image

Modificare il codice

Prima di aggiungerlo al blog, dobbiamo fare un po’ di modifiche. Il codice che ci è stato proposto è qualcosa come:

<!-- AddThis Button BEGIN -->
<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-en.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>
<!-- AddThis Button END -->

Modifichiamolo aggiungendo le parti colorate:

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

Le parti in blu sono opzionali e faranno visualizzare il pulsante solo nella pagina del singolo post, e se le eliminate saranno visibili anche nella pagina principale del blog. Vi faccio notare che, a parte le righe che ho aggiunto, ho modificato il nome dell’immagine da lg-share-en.gif a lg-share-it.gif, per avere l’etichetta in italiano.

Scegliamo noi i servizi

Mentre con le modifiche esposte nel precedente paragrafo sarà AddThis che sceglierà quali pulsanti usare, possiamo essere noi a deciderlo con una versione diversa:

<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
var addthis_config = {
     ui_language: "it",
 
     services_compact: 'favorites, email, facebook, twitter, oknotizie' 
     }
</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 -->

Rispetto alla versione sopra, è presente una riga in verde:

services_compact: 'favorites, email, facebook, twitter, oknotizie'

Questa riga va personalizzata inserendo i codici dei servizi separati da una virgola. Nell’esempio, ho messo l’aggiunta ai preferiti, l’invio via mail, la possibilità di pubblicare il post su Facebook e Twitter, e la possibilità di segnalarlo o votarlo su OkNotizie. Possiamo scegliere i servizi che vogliamo prelevando i relativi codici da questa pagina:

image

Per fare un altro esempio, vediamo che Segnalo ha come codice “segnalo” (seconda colonna):

image

E se vogliamo aggiungerlo ai pulsanti, basta aggiungerlo in coda separandolo dal resto con una virgola:

services_compact: 'favorites, email, facebook, twitter, oknotizie, segnalo'

Può sembrare un po’ macchinoso, ma basta fare alcune prove per venirne a capo.

Aggiungere il codice al template

Una volta personalizzato il codice, per aggiungerlo al template del blog (nel caso di Blogger) basta andare in Layout->Modifica HTML, selezionare “Espandi i modelli widget” e cercare questa riga:

<data:post.body/>

che può anche presentarsi leggermente modificata, come così:

<p><data:post.body/></p>

Subito sotto, incolliamo il codice e salviamo il template. Ecco come apparirà la versione senza i servizi personalizzati:

image

Per concludere

Partendo da questa pagina, chi mastica l’inglese potrà approfondire le mille altre personalizzazioni permesse dal servizio, davvero tante. Per il resto, per qualsiasi dubbio o perplessità, lasciatemi pure un commento.

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

37 commenti:

Mariana & Roberta ha detto...

Ci proveró...grazie per l'idea ;)
Ho messo anche il link di Creare Blog :)

mondoinformatico ha detto...

Anch'io utilizzo questo servizio ma devo dire che approfondisci sempre in maniera completa l'argomento offrendo sempre spunti di ottima qualità... Continua così

LeNny ha detto...

Come sempre ottimo Tenebrae.
Uso già questo servizio me leggerlo mi è stato utile per cambiare la scritta "condividi" e metterla in italiano. Tnx. :)

Ti chiedo dove posso trovare i codici per inserire il voto e la segnalazione su Wikio. Nella lista manca. Grazie mille.

LeNny.

Staff di Italy-lowcost ha detto...

Caro amico, grazie per i suggerimenti!! Sempre molto importanti, sempre molto validi!!!

Ho implementato nel mio blog http://italy-lowcost.blogspot.com/ share... vorrei tirarlo su dove si sn i pulsanti di facebook, blog-news e twitter.... come si fa?

GRAZIE

Pasquale

Lauradv ha detto...

Fatto! Grazie Mille!!! Buona giornata Laura

Michele ha detto...

Ciao Orazio
ho inserito questo bottone perche' l'altro sul mio pc non compariva, su altri si
Questo invece sembra ok anche sul mio pc
Unica cosa che non va e' che manca WIKIO che e' importante
Non e' possibile aggtiungerlo?
ciao
Michele pianetatempolibero

roro ha detto...

Ciao caro Tenebrae, come sempre sei di una semplcità unica, lo sai che stravedo per te ma questa non è solo piaggeria, è, invece una constatazione che non sempre chi è padrone della materia sia capace di renderla semplice anche a chi come me non ne capisce una...ehm...un tubo. Tuttavia, volevo approfittare di questo post per dirti che qualche giorno fa non vedevo più sotto i tuoi post gli articoli correlati, così come erano spariti a me ed ero convinta che fosse una manovra del Sig. Blogger per farli sparire, così sono ricorsa a Linkwithin, ovviamente sempre seguendo i tuoi dettami. C'è la possibilità di ripristinarli anche nel mio blog o bisogna fare altro? UN abbraccio Ros

Vinnie ha detto...

Tene perfetto come sempre

TuttiSostenibili ha detto...

Ciao ! io usavo il vecchio sistema. Tuttavia da ieri sono spariti i bottoncini e inoltre non si visualizza più la versione ridotta del post in homepage. Tutto questo senza che io avessi fatto alcuna modifica al blog... potrresti aiutarmi a capire cosa è successo?? ho provato a rifare la procedeura ma nulla...
tuttisostenibili.blogspot.com

grazie

arrgianf ha detto...

l'ho utilizzato per mesi ma l'ho tolto. Lentissimo a caricare la pagina, mai nessuno che abbia "condiviso" i miei post.

Corredi on Line ha detto...

Grazie, ....ancora un'altro consiglio utile;)

Tenebrae ha detto...

E' possibile aggiungere altri pulsanti, ma prima di approfondire il discorso (e di far diventare chilometrico il post) volevo il vostro feedback per capire se eravate interessati

A quanto pare si. Tratterò presto la cosa in un post a parte, indicando le modifiche da fare per avere i maggiori servizi in uso in italia (upnews, wikio, diggita, e così via... gli stessi proposti nel mio script, per intenderci) e fornendo già un esempio completo da copiare e incollare

@mondo: grazie!

@staff: per i pulsanti facebook e twitter basta vedere il relativo codice, ma se usi la versione non modificata dovrebbe mettertelo da sè. per maggiori info future, rimando a quanto scritto a inizio commento.

@roro: devo verificare se lo script ha qualche problema... sai com'è, ogni tanto c'è bisogno di togliere un po' di ruggine. controllerò al più presto e farò sapere qui sul blog o a te privatamente

grazie per i complimenti, essere sempre capiti non è facile ma dalle parole che scrivi sembra che ogni tanto ci riesco... fa piacere sentirselo dire :)

non so cosa sia la piaggeria, ma fai pure... continua, continua... :D

@vinnie: ops, mi sono ricordato che aspetti notizie in privato da me... pardon...mi sa che dovrai aspettare il prossimo fine settimana... abbi pazienza :(

@tuttisostenibili: sembra che adesso siano ricomparsi... mistero!

@arrgianf: devo dire che non ho notato particolare lentezza, ma invito anche gli altri a farmelo presente casomai... anzi, come servizio del genere è abbastanza veloce!

quanto al fatto che nessuno condivida i post, per mia esperienza ho notato che dipende molto dal genere di utenza. in certi casi può andar bene, in altri potrebbe essere miglior il semplice pulsante di twitter con contatore di cui ho parlato nello scorso post, magari abbinato all'equivalente per facebook (di cui parlerò presto)

vale la pena provare le varie soluzioni e farsi un'idea, anch'io sto pensando di cambiare qualcosa. Se non altro, comunque, servono a noi stessi per segnalare il post!

LeNny ha detto...

Attendo il tuo prossimo articolo sull'argomento. Grazie. :)

Vinnie ha detto...

Tene,

tranq, capisco gli impegni ;)

Lauradv ha detto...

Ho notato che quando a vado a selezionare l'opzione condividi non mi viene proposta l'immagine del post che voglio condividere (colonna centrale) bensì posso scegliere solo tra le immagini che ho sulla colonna di destra.
Può essere dovuto all'aggiunta della terza colonna? C'è qualche cosa che devo modificare io manualmente affinchè insieme al post venga condivisa anche la foto corretta?
Grazie Mille

Buona giornata
Laura

Fallen Angel ha detto...
Questo commento è stato eliminato dall'autore.
Tenebrae ha detto...

@lauradv: è possibile, è una cosa che può succedere e dipende dalla struttura del template

hai provato a cambiare browser per vedere se il problema persiste?

Vinnie ha detto...

Tene stesso tipo di bottone, questa volta per tradurre le pagine in varie lingue, è ConveyThis Translator. Dici che è buono?

Eco della Terra ha detto...

Io ho messo "Add to any", che qui non è segnalato, anch'esso molto personalizzabile, ad esempio nei colori...con add this è possibile?

Magari se trovi interessante anche Add to any ci potrai fare il prossimo post in cui approfondirai Add this.

Comunque grazie, sempre consigli pratici e utili.

Tenebrae ha detto...

@vinnie: molto interessante, non conoscevo il servizio! sembra carino, penso che approfondirò e magari ne parlerò nel blog

@eco della terra: add to any è un ottimo servizio, non è nell'elenco semplicemente perchè non ci ho pensato

preferisco addthis tuttavia per la sua molto più ampia diffusione (che dà un minimo di garanzia di affidabilità del servizio) e per l'impatto grafico, che preferisco

per il resto, i servizi sono totalmente equivalente, permettono le stesse personalizzazioni

Wolfango Free ha detto...

Carissimo Orazio, articolo interessante. Vorrei sfruttarlo il metodo da te esposto, ma per modificare il codice ho bisogno di caratteri speciali che la mia tastiera non ha, es. < > e altri, ci sono programmi da scaricare dalla rete ( free download ) che sopperiscono a tale Andicap? Ti ringrazio e complimenti per le definizioni molto accurate.

Alvise-Marco Seno ha detto...

Bellissima risorsa,
grazie mille.

Una domanda: sarebbe possibile, secondo te, inserire la riga con i pulsanti addthis in una specie di tabellina con colore differente? Quella che mi appare nel mio blog http://tvrblog.blogspot.com è parecchio bruttina.

ciao e grazie

104389516133392848534 ha detto...

Grazie Orazio, ho risolto e aggiunto al mio blog, ho anche linkato il tuo blog qui: http://wwwrivogliolamiaitalia.blogspot.com/ , grazie ancora, ti seguiro' con più assiduità, ciao.

Wolfango Free ha detto...

Rieccomi Orazio, ho aggiunto il codice al template, ma non mi appare nulla sotto i post, come mai? Mi puoi dare qualche indicazione? Grazie.

OnAir ha detto...

perfetto! se vuoi dare un'occhiata al mio blog in moda da darmi qualche consiglio su come posso migliorarlo (attraverso le tue guide ovviamente) ti sarei grato ;)
grazie

Tenebrae ha detto...

@alvise: è possibile personalizzare in tutto e per tutto l'aspetto dei pulsanti, ma ovviamente non posso trattare qui tutte le casistiche... se te la cavi con l'inglese, puoi guardare la documentazione che ho linkato

Ska ha detto...

...ma è possibile che solo io non ci riesco??? Uff...
se lo aggiungo come gadget funziona, se lo inserisco nell'html non funziona.. eppure ho fatto tutto quello che hai detto tu!! poverina io... :( Mi aiuti?

Amministratore ha detto...

è possibile spostarlo a destra??

sempre alla fine del post ma a destra azichè a sinistra???

GRAZIE.........

Giuseppe ha detto...

ciao a tutti, forse sono hot ma non ho trovato l' articolo che cercavo, volevo sapere se era possibile mettere i bottoni di voto fuori dal template, sulla sinistra e che scorrono insieme al post

grattacapi ha detto...

Qualcuno sa come si fa ad aggiungere in Joomla il codice di "Add This" per fare apparire i pulsanti nel corpo di un articolo?
Grazie!

smaf ha detto...

Salve a tutti,
qualcuno sa spiegarmi come funzionano le cifre che compaiono a lato sei singoli bottoni e come vengono aggiornati?
Ho provato a fare dei test su un sito che sto realizzando e non mi fornisce il numero corretto.
Grazie per l'articolo e per l'attenzione

laboratorio progettincorso ha detto...

Salve, girovagando in rete, alla ricerca di come fare a spostare a destra il mio pulsante personalizzato addthis, sono arrivata qui.
La mia domanda è: come faccio a spostare il mio logo a destra (parte opposta ai commenti) sopra la linea divisoria che separa i post? Grazie mille in anticipo.

dong dong23 ha detto...

toms shoes
nike air max 90
louis vuitton handbags
louis vuitton handbags
christian louboutin
ghd hair straighteners
michael kors uk
nike factory outlet
louis vuitton outlet
michael kors outlet online
burberry outlet
oakley sunglasses
jordan 3
nike air force
kate spade handbags
coach factory outlet
louis vuitton
christian louboutin outlet
oakley vault
fitflops
michael kors outlet
coach outlet online
michael kors handbags
oakley sunglasses
hollister kids
true religion outlet
christian louboutin outlet
michael kors outlet
longchamp bags
michael kors outlet
jordan 8s
michael kors outlet
ralph lauren polo
michael kors outlet
kate spade outlet
kate spade outlet
coach factory outlet
michael kors outlet clearance
toms
tory burch outlet
20165.4wengdongdong

Chenzhen 20160303chenzhen ha detto...

ed hardy
coach outlet store
ralph lauren outlet
rolex submariner
kate spade outlet
fitflops
tiffany uk
polo ralph lauren
armani exchange
micahel kors
nike force 1
burberry outlet canada
michael kors outlet
nike huarache black
hollister clothing store
omega
gucci handbags outlet
coach factory outlet online
pandora jewelry outlet
adidas superstar white
omega speedmaster
polo ralph lauren outlet online
polo ralph lauren men
air max 90
ray bans
yeezy boost 350 white
true religion jeans outlet
coach factory outlet online
air jordan shoes
hollister hoodies
michael kors outlet online
michael kors bags
oakley sunglasses uk
oakley sunglasses outlet
kate spade bags
cheap ray bans
nike free runs
true religion jeans
ray ban sunglasses outlet
oakley sunglasses
chenzhen201662

Unknown ha detto...

detroit lions jerseys this
michael kors handbags wholesale I
new york knicks sheet}
nike trainers it
tennessee titans jersey Super
versace this
jimmy choo shoes the
patriots jerseys for
bears jerseys was
michael kors handbags wholesale graders

raybanoutlet001 ha detto...

converse trainers
skechers outlet
fitflops sale clearance
michael kors outlet
kansas city chiefs jerseys
cheap michael kors handbags
nike air huarache
patriots jerseys
nhl jerseys
michael kors handbags

xiaozhengsen ha detto...

2017-5-30 xiaozheng6666
oakley sunglasses wholesale
cheap oakley sunglasses
kate spade outlet store
adidas shoes for men
coach outlet
mcm backpack
coach outlet online
oakley sunglasses
pandora outlet online
oakley sunglasses


Prima di lasciare un commento, leggete qui

Posta un commento