Pulsanti per condividere su Facebook, Twitter o Google Buzz con immagini personalizzate per Blogger


Sembra che i pulsanti per condividere gli articoli su Facebook, Twitter e Google Buzz siano stati molto apprezzati e così ho deciso di pubblicare il codice da inserire nel template, anche per dare la possibilità, a chi volesse, di testare se effettivamente il rendimento cambia rispetto alla classica pletora di mini bottoni in fondo al post, come discusso in uno dei ultimi articoli, senza dover fare troppo lavoro per crearseli da sè.

Avrei potuto farvela più breve con uno script esterno, ma vi propongo direttamente il codice HTML così chi vorrà personalizzare le immagini potrà farlo liberamente. Tranquilli che si tratterà comunque solo di un copia e incolla.

Come sempre ricordo di fare un backup del template in modo da poter tornare indietro senza problemi e, se non vi sentite sicuri, di fare prima l’esperimento su un blog di prova.

Social network

Modifichiamo il template

Dalla bacheca, andate in Design –> Modifica HTML, selezionate “Espandi i modelli widget” e cercate queste righe di codice:

<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->

Al solito, potrebbero essere leggermente diverse. Il vostro riferimento deve essere post.body o clear for photos floats.

Subito sotto, incollate il seguente codice:

<!-- codice pulsanti facebook, twitter e Buzz - inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align:left;'>
<br/>
<small>Condividi su Facebook, Twitter o Google Buzz:</small>
<br/>

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Condividi su Facebook'><img alt='Condividi su Facebook' src='http://tinyurl.com/38cvx84'/></a>

<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' target='_blank' title='Condividi su Twitter'><img alt='Condividi su Twitter' src='http://tinyurl.com/2vzxxvg'/></a>

<a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url' target='_blank' title='Pubblica su Google Buzz'><img alt='Pubblica su Google Buzz' src='http://tinyurl.com/38vvb59'/></a>

<br/>
</div>
</b:if>
<!-- codice pulsanti facebook, twitter e Buzz – fine -->

E salvate il template. Visualizzando il blog, nella pagina del singolo post vedrete già i nuovi pulsanti così come li ho usati io.

Se volete che i pulsanti siano visualizzati anche nella pagina principale del blog, eliminate le due righe che ho evidenziato in verde. Se volete personalizzare le immagini dei tre servizi, basta cambiare le parti in rosso sostituendole con gli indirizzi di quelle che volete usare rispettivamente per Facebook, Twitter e Google Buzz.

Rimuovere i pulsanti

Se dopo averli provati deciderete di toglierli, basterà tornare in Design –> Modifica HTML, selezionare “Espandi i modelli widget” e eliminare tutte il codice compreso tra:

<!-- codice pulsanti facebook, twitter e Buzz - inizio –>

e:

<!-- codice pulsanti facebook, twitter e Buzz – fine -->

Per concludere

Se provate i nuovi pulsanti fatemi sapere se noterete delle differenze nel tempo, se notate un maggior traffico da Facebook o una maggiore condivisione dei vostri articoli.

Vista la sudata che mi sono fatto per scrivere quest’articolo, che ne direste di cominciare a condividere proprio questo?

Ulteriori approfondimenti:

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!

36 commenti:

DEUSEXMACHINA™ ha detto...

non funziona

Tenebrae ha detto...

@deus: hai ragione, solita odiosa formattazione del testo... problema risolto

Nickycalo ha detto...

lo sto provando, e partirò escludendo Buzz perchè penso che sia superfluo vista la quantità ridicola di visite del mio blog, quindi provo a concentrare sui 2 maggiori servizi, ti farò sapere come va.

PS. non hai ancora pensato a come integrare il nuovo bottone "MI PIACE" di facebook in automatico per ogni singolo post?

Azabel ha detto...

Grazie per il riepilogo, volevo inserirli ma la pigrizia mi aveva assalito ;)

enrico ha detto...

non l'ho trovato, non c'è, maledizione, non sono capace!!!!!! aiuto

Devilnax ha detto...

Grazie Orazio, penso ne approfitterò anche io!

Se posso da qui ne approfitto per chiederti un consulto.

Ho notato che quando clicco sul pulsante "condividi" di facebook, nell'anteprima di condivisione che appare sul popup vedo correttamente il titolo ma poi l'anteprima del post in questo modo: "var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=....... " non consentendomi quindi avere una reale anticipazione del testo del post.
Ho reinserito più volte il codice di share di facebook ma una volta che salvo mi da questo problema.

Sai per caso a che cosa è dovuto?

Grazie in anticipo!

Alessandra M. ha detto...

considerando che il mio blog è su msn e considerando che quei disgraziati non sono ancora riusciti ad aggiungere il java nelle impostazioni degli space, ho per caso qualche possibilità di poter aggiungere il tasto "condividi" o " mi piace" sui post del mio space?
Ho pensato anche di creare un mio pulsante, caricarlo nel sito di hosting che uso per il blog e aggiungere il collegamento con codice html...piccolo problema: e il link qual'è???
Qualcuno mi aiuto please?

Devilnax ha detto...

Rettifico..
quel codice nell'anteprima non mi compare più!

Quello che mi appariva era una porzione di stringe di una function di java. Mi prendeva quella perchè era all'interno del tag "p" e fine "p".

Da questo ho intuito che facebook vede tutto ciò che è inserito all'interno di quel tag. ed effettivamente è così. Solo che quando lo metto su data:post.body e provo la condivisione.. nel popup mi appare unicamente l'anteprima della foto del post, il titolo e l'url.. senza nessun incipit.. come se non trovasse niente e come se non vedesse data:post.body ...

UN PROBLEMONE!!! Qualcuno sa perchè?

marcorobutti ha detto...

interessante ... li proverò :D

Grazie come al solito !!!

Freebacoli ha detto...

Bellissimi i pulsanti, speravo che facessi un post come questo..
solo che non sono riuscita ad apportare la modifica..
se ho l'opzione automatica per i post espandibili dovrebbe funzionare lo stesso? :(

http://sapienza-finanziaria.blogspot.com ha detto...

Fantastico Post!

Complimenti per il tuo lavoro, ti seguo regolarmente.

enrico ha detto...

Ciao Tenebrae,
ho aggiunto il codice e funziona correttamente. Ora vorrei togliere la cornice celestina intorno alle tre immagini (come hai fatto anche tu!). Come posso fare? Ho provato a copiare l'URL delle immagini da te utilizzata ma stranamente la cornice resta...
grazie mille

enrico

Freebacoli ha detto...

Avevo combinato un pasticcio stupido!!
Funziona!!!
STUPENDI!!!
grazieeeeeeeeee

Pinella ha detto...

Ten...mi dai una mano?

Ho una connessione TIM sul mio portatile con una chiavetta. Quando cerco di entrare sul mio blog www.idolcidipinella.blogspot.com, cade subito la connessione. Non capita su altri blog...che succede? C'e' nel mio blog qualcosa che non va?

Nickycalo ha detto...

@Enrico, anche io ho lo stesso problema, ho provato dal designer dei modelli a mettere sfondo e cornice dell'immaggine trasparente ma niente, penso che si debba modificare a mano qualche CSS.

Per quanto riguarda le immagini io le ho sostituite con quelle in stile CS5 ... date un occhio e se volete "rubate" ... tanto mica le ho fatte io :)))

http://nickycalo.blogspot.com/2010/07/easy-listening-la-playlist-per-una.html

Tenebrae ha detto...

@nicky: potrebbe essere un'ottima idea per un prossimo post, già presa nota

@alessandra: genericamente, il codice per condividere su facebook è:

href="http://www.facebook.com/sharer.php?u=indirizzo&t=titolo"

sostituendo ovviamente indirizzo e titolo

@devilnax: strano, forse qualche conflitto con qualche altro script presente nel template, ma non so dirti di più

@enrico: è un problema del template, ora aggiorno il post così spiego come eliminarlo

@freebacoli: tutto è bene... :)

@pinella: qui si sfocia nel paranormale, mi dispiace ma non saprei dirti... dovresti cercare in rete se qualcun altro ha avuto un problema simile

enrico ha detto...

Non c'è niente da fare, se lo faccio come indicato su blogger, non compaiono, seguendo il tuo post per mettere i tre pulsanti, non trovo il punto indicato dell'html. Aiuto, vorrei proprio metterli sti pulsanti malefici!!!!

Veggie ha detto...

Grazie infinite Orazio, è andato tutto liscio, nessun ostacolo!
Volevo chiederti se ci fosse la possibilità di impiccolire i pulsanti.
Grazie ciao
Veggie

Penny di "Il mondo in due Penny" ha detto...

Grazie mille, Ten! Blogger adesso ha inserito questi tasti, ma non so il perchè a me, sul mio blog di prova appaiono quelli in dotazione (ed anche questi se li inserisco) ma non sul mio blog definitivo (quelli di blogger!) Ora ho risolto con i tuoi, forse per il mio blog serviranno poco, ma mi piaceva averli! Grazie!

Pinella ha detto...

Grazie comunque...il paranormale continua....a Villasimius cade la connessione, a Cagliari con la stessa chiavetta no....mah!

Recenso ha detto...

Funzia, grazie :)
Si può avere un bottone simile anche per condividere su friendfeed?

MC Nike ha detto...

Ciao! Sono molto belli questi pulsanti!
Ho provato a inserirli su splinder tra le stringhe div e blogger e i tasti compaiono in ogni post, però sembrano delle immagini fisse perchè non me le fa cliccare, potresti darmi una mano per favore?

Coki ha detto...

Ciao!! Volevo ringraziarti xkè senza i tuoi preziosi consigli e aiuti concreti nn avrei combinato niente finora!!
Pulsanti easy e belli!!

MC Nike ha detto...

Perchè su blogger funzionano e su splinder no? Cosa cambia?

Giovanni Brodu ha detto...

PERFETTAMENTE FUNZIONANTE AL PRIMO COLPO ! GRAZIE ORAZIO!

Luca ha detto...
Questo commento è stato eliminato dall'autore.
Luca ha detto...
Questo commento è stato eliminato dall'autore.
AAA Sezione Ginosa ha detto...

Ottimo!! Grazie...
Mi stai facendo appassionare...

Mimmo

Memy frog ha detto...

Grazie!! veramente carini!

Alessandra ha detto...

Fatto, veramente easy and understandable!!!Grazie Orazio.

Mari - Rose di Burro ha detto...

Io arrivo con quasi un anno di ritardo dalla pubblicazione del tuo post, ma a me le cose servono sempre dopo! Sono una delle tue lettrici silenziose e meno male che ci sei, altrimenti il mio blog sarebbe all'età della pietra! Diciamo che non sono proprio imbranata ma quasi, però ora ho i pulsanti di condivisione! Grazie!

nicola tufano ha detto...

grazie mille questo blog è fantastico ho aperto adesso il mio blog e sto imparando un sacco di cose.

solo un problema perchè a me si vedono i quadrati intorno ai pulsanti?
http://nicolatufano.blogspot.com/

grazie

Silvia Masaracchio ha detto...

Grazie per lo script!! Funziona correttamente!! Vorrei solo chiederti, è un problema solo mio se quando cerco di condividere un post su fb non compare l'inizio dell'articolo che voglio condividere ma la descrizione del blog (quella cioè che ho inserito nel metatag del template)?
Mio blog: http://bachecaebookgratis.blogspot.com/

artasdog ha detto...

Vorrei segnalarvi il pulsante di un nuovo social italiano in versione beta che permette di avere link dofollow. Il social si chiama Questioner ed il codice per il pulsante si trova qui http://www.help.questioner.it/il-pulsante-condivisione-di-questioner/ Ciao.

M. Rosaria ha detto...

A me non funzionano :((((

Fangyaya ha detto...

fangyanting20150926
gucci, http://www.borseguccioutlet.it/
prada handbags, http://www.pradahandbagsoutlet.co.uk/
ray ban sunglasses, http://www.raybansunglassesonline.us.com/
nba jerseys, http://www.nbajerseys.us.com/
replica watches, http://www.replicawatchesforsale.us.com/
moncler coats, http://www.moncler.us.com/
michael kors factory outlet, http://www.michaelkorsfactoryoutletonline.com/
ralph lauren shirts, http://www.poloralphlaurenshirts.us.com/
oakley sunglasses, http://www.oakleysunglasses-outlet.us.com/
vans shoes, http://www.vans-shoes.cc/
oakley sunglasses, http://www.oakleysunglassesdiscount.us.com/
the north face outlet store, http://www.thenorthfaceoutletstores.org/
beats by dr dre, http://www.beatsbydrdre-headphones.us.com/
links of london, http://www.linksoflondons.co.uk/
ugg uk, http://www.cheapuggboots.me.uk/
prada shoes, http://www.pradashoes.us/
soccer jerseys, http://www.cheapsoccerjersey.net/
tiffany outlet, http://www.tiffany-outlet.us.com/
longchamp outlet, http://www.longchampoutlet.name/
hollister uk, http://www.hollistershirts.co.uk/
nike huarache, http://www.nikeairhuarache.org.uk/
adidas outlet store, http://www.adidasoutletstore.us.com/
juicy couture outlet, http://www.juicycoutureoutlet.net/
ed hardy clothing, http://www.edhardy.us.com/
michael kors bags, http://www.michaelkorsbags.uk/
coach outlet online, http://www.coachoutletonline.in.net/
true religion jeans, http://www.truereligionjean.in.net/
tory burch shoes, http://www.toryburchshoesoutlet.com/
mulberry outlet, http://www.mulberryoutlet.com.co/
swarovski outlet, http://www.swarovski-outlet.co.uk/


Prima di lasciare un commento, leggete qui

Posta un commento