Inserire un pulsante nel blog per condividere gli articoli su Facebook, con contatore delle segnalazioni fatte


imageDopo aver segnalato la possibilità di inserire un pulsante nei post del blog per condividerli su Twitter, con tanto di contatore delle segnalazioni fatte, presento la stessa modifica ma fatta per Facebook, che al momento ha un volume di iscritti maggiore in Italia e può rivelarsi più proficuo come strumento per la promozione dei nostri articoli.

Il bottone è fornito dallo stesso Facebook e ovviamente va riadattato alle nostre esigenze, ma esiste anche un sito specializzato in questo servizio, fbShare.me: io qui presento entrambe le versioni, lasciando a voi decidere il look dei pulsanti. Il risultato finale è comunque equivalente.

Utilizzare il pulsante di Facebook

Dalla pagina di generazione del pulsante, è possibile personalizzare l’aspetto e altre opzioni minori del pulsante. Fondamentalmente è possibile scegliere tra questo meno invasivo:

image

che va benissimo messo sia sopra che sotto il post, e questo:

image

Le varie opzioni permettono altre personalizzazioni ma, visto che il codice va modificato e non voglio complicare la vita a me e a voi, propongo il codice solo per questi due pulsanti, lasciando ai più tecnici il compito di sbizzarrirsi col codice.

Per il primo:

<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'>Condividi</a>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>

E per il secondo:

<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'>Condividi</a>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>

Scegliete il codice che preferite, copiatelo e mettetelo da parte.

Generare il pulsante con fbShare.me

Se i pulsanti proposti da Facebook non vi piacciono, potete provare quello di fbShare.me:

image

Anche questo pulsante è altamente personalizzabile, ma richiede di inserire codice HTML particolare nel template e la guida è solo in inglese. Quello proposto va comunque benissimo e il suo codice (con qualche piccola modifica per adattarlo a Blogger) è:

<script>var fbShare = {
  url: &#39;<data:post.url/>&#39;
}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

Se preferite questo pulsante, copiatene il codice e mettetelo da parte.

Pulsante in alto nel post

Una volta scelto il pulsante e messo da parte il relativo codice, dovete scegliere la posizione dove farlo apparire. Se volete il pulsante in alto a destra nel post, modificate queste righe aggiungendo il codice scelto da voi:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right; margin-left:10px;'>
...codice del pulsante scelto...
</div>
</b:if>

Se invece lo volete in alto a sinistra, modificate queste righe:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left; margin-right:10px;'>
...codice del pulsante scelto...
</div>
</b:if>

La riga in rosso va sostituita col codice del pulsante che avete scelto. Le righe in blu invece sono opzionali e se lasciate faranno apparire il pulsante solo nella pagina del singolo post e non nella pagina principale del blog (è sempre l’opzione che suggerisco).

Pulsante in fondo al post

Se volete inserire il pulsante in fondo al post e allineato a sinistra, personalizzate questo codice:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='text-align:left;'>
...codice del pulsante scelto...
</p>
</b:if>

Se invece lo volete allineato a destra:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='text-align:right;'>
...codice del pulsante scelto...
</p>
</b:if>

Anche in questo caso le righe blu sono opzionali e se le togliete i pulsanti appariranno anche nella pagina principale del blog.

Inserire il pulsante nel template

Una volta scelto il pulsante e fatte le dovute personalizzazioni, andate in Layout –> Modifica HTML, selezionate “Espandi i modelli widget” e cercate questa riga di codice:

<data:post.body/>

che può presentarsi con qualche differenza, tipo:

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

o qualcosa di molto simile.

Se avete scelto di mettere il pulsante sopra, incollate il codice sopra questa riga, altrimenti incollatelo sotto. A questo punto potete salvare il template e provare il vostro nuovo pulsante.

Per concludere

Come dicevo all’inizio dell’articolo, Facebook in Italia ha una diffusione più capillare di Twitter al momento, per cui un pulsante di questo tipo si rivela utilissimo, specialmente per chi è una presenza costante nel grande social network. Personalmente, sto pensando di aggiungerli entrambi, sia quello di Twitter che quello di Facebook.

Se decidete di aggiungerlo al vostro blog, fatemi sapere come vi trovate.

Per qualsiasi difficoltà, se siete di sesso maschile, fatemi un fischio. Se siete di sesso femminile, evitate il fischio: mia moglie potrebbe male interpretare il gesto. Fate semplicemente “ciao” con la manina.

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:

Davida ha detto...

Ciao, scusami il disturbo fuori del tuo programma, ma vorrei chiederti se si poteva avere la spiegazione italiana di come riuscire a aggiungere lo script a mano per i titoli dei post sul proprio blog.
Ho visto questo sito, dove lo spieganno bene in inglese, ma non riesco capire molto bene, magari potresti farlo meglio te ?
http://www.kevinandamanda.com/whatsnew/tutorials/how-to-use-a-cute-font-for-your-blogger-post-titles.html

Grazie mille per la considerazione della mia richiesta,
Davida

keira_91 ha detto...

ç_ç è complicatino...
soprattutto cercare sti cacchio di codici -.-
ma ci proverò U.U

p.s.
hai un post dove potremo farti domande?

Noemi Montanari ha detto...

Grazie... l'ho giò applicato ai mie 3 blog! Sei un mito!

Nurix ha detto...

Aggiunto insieme a quello per twitter.
Vediamo se daranno i loro frutti.

Lesnek ha detto...

io uso questo servizio

http://www.addthis.com/

ti permette di inserire un pulsate, oltre a Facebook e Twitter permette di condividere il post in moltissimi servizi (occupa poco spazio in fondo al post). Il servio genera un codice facilmente installabile nel modello HTML.

ciao.

Chico ha detto...

Non ci riesco! Perché non ci riesco? Perché non riesco a metterci niente? E' FRUSTRANTE. Sto perdendo un sacco di tempo.

Non mi appare niente. Ho provato anche addthis come hai detto tu qualche post fa ma niente.

Tra l'altro di data:post.body ne ho due. Dopo quale dei due devo inserire il codice? Naturalmente li ho provati entrambi ma niente.

Ciao e grazie.

Chico ha detto...

Ce l'ho fatta, ma mi funziona solo senza le aggiunte che proponi. Grazie comunque.

Jacopo ha detto...
Questo commento è stato eliminato dall'autore.
Jacopo ha detto...
Questo commento è stato eliminato dall'autore.
Jacopo ha detto...

Come si fa a mettere in alto a destra nei post il bottone di twitter e SOTTO sempre in alto a destra quello di facebook?

Un post a caso dal mio blog x rendere l'idea: http://www.doctorbrand.it/2010/01/ipad-dal-personal-computer-alla.html

Grazzzzzieeeee

fabietto ha detto...

Grazie mille. Utilissimo come sempre! ;)

RedFenyx ha detto...

Ciao!
Lascio un commentino qui perché credo sia il post che più si avvicina a ciò che stavo cercando.
Ultimamente non risco più a visualizzare l'anteprima immagine dei link dei post di facebook, cosa che capita solo con il mio blog, pur non avendo ultimamente cambiato l'html di base (l'ultima volta che l'ho fatto è stato seguendo il tuo tutorial sulle 3 colonne, da lì non ho più osato mettere mano in quella zona delicata XD)
Ho trovato soltanto questo al riguardo: http://wiki.developers.facebook.com/index.php/Facebook_Share/Specifying_Meta_Tags#Basic_Tags
Ma se voglio linkare un post non funziona, mi linka solo l'immagine...
E' possibile che nel mio html di base manchi qualche codice?
Ti ringrazio in anticipo per l'attenzione!
S.

ENRIQUEZ ha detto...

non riesco a trovare le righe da te specificate(data:post.body) o niente di simile quando devo inserire il pulsante nel template...come posso fare? il mio blog e' www.radiobrasile.blogspot.com
ciao grazie

ENRIQUEZ ha detto...

CIAO SONO ENRIQUEZ
HO TROVATO LE RIGHE DI CUI PARLAVI NELLA SPIEGAZIONE...HO PORTATO PARI PARI I CODICI SOTTO QUEL TAG ...MA QUANDO CLICCO SU ANTEPRIMA DEL BLOG NON MI FA COMPARIRE I PULSANTI...BOH NON CAPISCO..COUNQUE SE VOLESSI DARE UN OCCHIATA AL MIO BLOG PER CAPIRE IL PERCHE' TI RINGRAZIO...RIPETO WWW.RADIOBRASILE.BLOGSPOT.COM
GRAZIE ANCORA
ENRIQUEZ

Betz ha detto...

Ciao,
io aggiungo tutto il codice, ma dopo aver salvato scopro che il codice non si salva!
Che abbia qualche blocco nella modifica dei widget?
Dove devo guardare?
grazie

Alessandra ha detto...

Ciao, volevo solo ringraziarti per l'aiuto, il mio blog "http://sandraincucina.blogspot.com/, a poco a poco prende vita. Che bello, ho letto che sei un mio concittadino, sei un genio.
grazie ancora.

Sandra............................ ha detto...

Sei gentile chiaro e preciso nello spiegare cose , per me, ancora un po' difficili. Grazie mille :0)Sandra Maccaferri

scanzifarm ha detto...

6 1 grande!!! grz 1000!!!!

Emanuele ha detto...

grazie per il consiglio! una sola cosa.. come faccio a centrarlo nel modulo html di blogspot? con text align center non funziona..

pino ha detto...

ottimo!!! l'unica difficoltà è stata cercare la riga di codice...nel senso che la vista è scarsa ;-)

Lorenzo ha detto...

http://monetizzailtuosito.blogspot.com

Perchè a me non compaiono allineati?

Chi mi da una mano?

Lorenzo ha detto...

Inoltre i bottoni si visualizzano solo quando sono nella home. se entro in un post, ad esempio http://monetizzailtuosito.blogspot.com/2010/04/benvenuti-nel-nostro-blog.html non si vede nulla!!!

mi date una mano?

Zampetteamiche ha detto...

esatto .chi ha risolto???
grazie

"Alidyfata" Laboratorio Artistico ha detto...

Ho provato e riprovato a inserire il pulsante fb ma con scarsi successi...(non vuole proprio inserirsi il pulsante)...che peccato..sicuramente sbaglio qualcosa!!

katia ha detto...

grazie io ce l'ho fatta !!!! sono sempre ottimi i tuoi insegnamenti!!!!

AlessandroJ ha detto...

Ciao vorrei segnalarti un errore presente nel primissimo codice:
in fondo devi aggiungere un "/script" (non mi lascia mettere il tag giusto ma sarebbe < > e in mezzo /script) altrimenti lo script rimane aperto e il resto della pagina non funziona

Desrever ha detto...

Ciao! Io ho un problema nell'inserimento del primo pulsante, quello ufficiale con il counter a destra: inserendolo dove prescritto da tutti i tutorial, mi appare si all'interno di ogni post ma mi fa condividere esclusivamente la homepage del blog; qualcuno ha avuto questo problema? Sa forse come risolverlo?

Grazie mille!

Cristina ha detto...

Caro Orazio,
ci sto provando, ma proprio non mi riesce.
Per prima cosa, non capisco quante volte devo copiare il codice nell'html.
Prima dici di metterlo in un punto... poi in un altro...
Quindi lo devo inserire in 2 punti differenti?
La cosa che mi crea più confusione è che non ho alcuna porzione di codice che somigli nemmeno vagamente a
Quindi non ne vengo fuori.
Ho provato a mettere il codice in tutti gli altri punti possibili... ma non spunta alcun pulsante fb.

Cri

Monique ha detto...

Ciao, innanzitutto molte grazie per i consigli, davvero utili.
Ho però un piccolo problema, ogni volta che provo ad inserire pulsanti nel mio blog, seguendo alla lettera le tue indicazioni. Blogger mi segnala "È stato trovato più di un widget con ID: HTML3. Gli ID dei widget devono essere esclusivi." e non ne vado a capo: hai idea di come risolvere la cosa? Di nuovo grazie, M.

CalcioNapoli365.com ha detto...

Quando viene condiviso un post su facebook viene visualizzata una immagine casuale, spesso i banner, è possibile impostare che venga visualizzata esclusivamente l'immagine presente nell'articolo?

tanteguide ha detto...

ciao volevo chiederti come posso inserire un pulsante condividi che non sia standard,come mostri in questa guida, ed inserire un icona graficamente piu carina come hai fatto tu per questo blog.

Dany Depsa ha detto...

ciao e scusa x il disturbo..sono sicuramente la piu mbranata dei toi lettori i spieghersti dove e come devo mettere i codici?http://lafieradeisapori2.blogspot.it/ grazie

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

ray ban outlet store
tiffany and co outlet
nike free 5.0
birkenstocks
cartier love ring
ghd hair dryer
lacoste shoes
nike free flyknit 3.0
louis vuitton purse
cheap jordan shoes
adidas trainers
burberry outlet
michael kors outlet online
ghd
coach outlet online
longchamp outlet
cheap oakley sunglasses
christian louboutin uk
black timberland boots
michael kors outlet clearance
rolex replica watches
louis vuitton handbags
polo ralph lauren outlet
yeezy boost 350 white
louis vuitton handbags
adidas nmd runner
louboutin shoes
michael kors handbags
yeezy boost 350
jordan pas cher
michael kors uk
fake oakleys
louis vuitton pas cher
pandora jewelry
adidas gazelle
louis vuitton outlet
christian louboutin outlet
mont blanc pens outlet
christian louboutin outlet
fitflops
chenzhen201662

chenlina ha detto...

red bottom shoes
pandora jewelry
louis vuitton paris
jordan 11
ugg boots
kobe 9 shoes
cheap oakley sunglasses
true religion uk
louis vuitton outlet
giuseppe zanotti sneakers
coach factory outlet
michael kors handbags
longchamp sac
louis vuitton bags
jordan 6
adidas originals
nike tn pas cher
adidas ultra boost
ghd hair straighteners
christian louboutin shoes
christian louboutin sale
minnesota vikings jerseys
adidas yeezy
ugg canada
michael kors outlet
kate spade outlet
nfl jerseys wholesale
michael kors handbags
ugg sale
mont blanc pens for sale
kobe bryant shoes
pandora jewelry
oakley sunglasses wholesale
louis vuitton
air jordans
canada goose
ralph lauren outlet
insanity workout
adidas nmd
mont blanc pen
chenlina20160823

raybanoutlet001 ha detto...

replica rolex
michael kors handbags wholesale
golden state warriors jerseys
nike blazer pas cher
replica watches
raiders jerseys
michael kors handbags
kobe 9
true religion jeans
jets jersey


Prima di lasciare un commento, leggete qui

Posta un commento