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!

33 commenti:

manig0ldo ha detto...

non funziona

Tenebrae ha detto...

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

Anonimo 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?

Alice Martini ha detto...

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

Enrico Bo ha detto...

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

Unknown 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!

Unknown 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è?

Anonimo 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? :(

Unknown 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

I Dolci di 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?

Anonimo 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 Bo 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 - Liliana Paoletti 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 "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!

I Dolci di 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?

Alida 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?

Unknown 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.
Do ha detto...

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

Mimmo

Micy Lela ha detto...

Grazie!! veramente carini!

Alessandra Inzerillo 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!

Unknown 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

Danilo Andreini 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.

x232 ha detto...

A me non funzionano :((((


Prima di lasciare un commento, leggete qui

Posta un commento

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