Creare un badge di Facebook e visualizzarlo nel blog


image Come avete potuto notare da un paio di giorni, ho inserito il mio badge di Facebook nel blog. Devo dire che inizialmente ero un po’ perplesso riguardo all’utilità di questo strumento. In 15 anni di Internet ne ho visti tanti, servizi “social”, raggiungere una notorietà esplosiva per poi scomparire nel limbo del dimenticatoio. Ma devo dire che Facebook, in un certo senso, ha finito per colpire anche me.

Il fatto di avere davanti la faccia di una persona che magari conosci solo tramite quello che leggi nel suo blog (o tramite i commenti che lascia nel tuo) inevitabilmente crea un rapporto in un certo senso più stretto, sicuramente più umano.

Facebook si può rivelare anche un ottimo strumento per pubblicizzare il proprio spazio personale, anche se a quest’argomento dedicherò presto altri post. Intanto cominciano dalle basi: inseriamo il nostro badge nel blog.

Creare un badge di Facebook

Una volta effettuata la registrazione al servizio, cliccate su Profilo in alto e in basso a sinistra noterete questo link:

image Questo link è talmente anonimo che rischia di passare inosservato. Io stesso non sarei riuscito a trovarlo se non fosse stato per Carmen. Cliccandoci accederete a questa schermata:

image  Cliccate su Crea un badge per cominciare:

image

A sinistra potrete personalizzare il vostro badge, a destra viene visualizzata un’anteprima del risultato finale.

Impaginazione: potrete scegliere se utilizzare un badge orizzontale o verticale. Diciamo che dipende da dove volete visualizzarlo: quello verticale sta meglio in una colonna laterale del blog, quello orizzontale  magari sopra i post.

Elementi: qui potete scegliere quali elementi visualizzare: la foto, il nome, la mail, lo stato, e così via… Vengono proposti quattro elementi, potrete aggiungerne altri cliccando su Aggiungi un elemento o rimuoverli cliccando su “rimuovi” corrispondente all’elemento da rimuovere.

Ricordatevi di controllare a destra quale sarà il risultato finale.

Una volta fatto, cliccate su Salva e vi verrà visualizzato il codice HTMl che vi servirà per visualizzarlo nel blog:

image

Visualizzare il badge di Facebook nel blog

Potrete inserirlo automaticamente nel blog cliccando sul pulsante Add to Blogger (o myspace.com), ma consiglio di copiare il codice (come faccio nell’immagine precedente) e incollarlo in un elemento di tipo HTML/Javascript.

Consiglio di farlo manualmente per eliminare le righe (a mio avviso fastidiose) che Facebook mette sopra e sotto l’immagine (“Il profilo di xxx” e “Crea il tuo badge”):

image

Le righe da eliminare sono quelle evidenziate in rosso:

<!-- Facebook Badge START --><a href="http://www.facebook.com/people/Orazio-Leotta/1457708782" title="Profilo Facebook di Orazio Leotta" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal;font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;">Il profilo di Orazio Leotta</a><br /><a href="http://www.facebook.com/people/Orazio-Leotta/1457708782" title="title" target="_TOP"><img src="http://badge.facebook.com/badge/1457708782.445.2047036766.png" alt="Profilo Facebook di Orazio Leotta" style="border: 0px;" /></a><br /><a href="http://www.facebook.com/badges.php" title="Make your own badge" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal;font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;">Crea il tuo badge</a><!-- Facebook Badge END -->

Praticamente cancellate tutto fino al primo <br />, e tutto dal secondo <br /> in poi, e quei link scompariranno.

Come già detto, il codice rimanente va semplicemente incollato in un elemento di tipo HTML/Javascript.

Aggiungetemi!

Se utilizzate Facebook, vi invito ad aggiungermi ai vostri amici! Sarà un piacere “guardarvi in faccia”, o semplicemente essere più in contatto con voi!

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!

30 commenti:

Boby ha detto...

perchè non crei anche una gruppo su Creare Blog?
io forse ne creo uno per il mio blog, anche se facebook non mi ha ancora convinta...

Tenebrae ha detto...

@Boby: è una cosa che mi stanno chiedendo tante persone, ci sto facendo un pensierino :)

MacchioMan ha detto...

ciao so che non riguarda per nulla il post, ti rinnovo i complimenti per il tuo blog, stupendo e volevo chiederti una cosa:

ho creato ieri pomeriggio un blog a tre colonne;
però in realta avendo inserito una marea di video youtube nelle due colonne ai lati della main-wrapper, mi servirebbe inserire sotto ogni html un opzione per fare commenti, come se fossero una casella di post.

c'è un modo per farlo...?!

inoltre non capisco perchè il mio blog è inesistente nel web, ho solo ricevuto una visita, il resto nada.. uff

grazie e vieni a trovarmi... ma occhio che potresti morire dalle risate...

animalia ha detto...

Ciao Ten, ri-eccomi.
Ho appena letto l'invito e.. ti ho mandato l'invito.. ;)

Federico Distefano ha detto...

Ciao!
Ho una domandina che potrebbe interessare anche altri disegnatori che ti seguono.
Ovvero:
Come si fa a postare un'immagine che sia sempre interamente visibile, anche se è più grande dell'area del monitor, visualizzando la piccola lente d'ingrandimento che compare in questi casi?
Mi spiego meglio, se ho fatto un disegno che eccede la misura (es: 1400x950, se io ho un 1024x768) come si fa a farlo vedere interamente?
Ciao e grazie!

Circuito Cinema Bologna ha detto...

Avrei bisogno di un consiglio, non si visualizzano i comenti, ne nella sidebar, e neanche nella nuvoletta affianco al post, non vorrei dipendesse dal servizio che uso per i commenti, se puoi dare una occhiata te ne sarei grato, un saluto Sandro, a dimenticavo ho messo il bannerino tuo nel blog.

Circuito Cinema Bologna ha detto...

Scusa di blog ne ho due, quello con il problema e http://trailerspool.blogspot.com

Tenebrae ha detto...

@circuito cinema bologna: esattamente, è dovuto al sistema di commenti che utilizzi... purtroppo non è mai consigliabile utilizzare un sistema di commenti esterno... soprattutto perchè i commenti non vengono registrati su blogger e ne perdi per sempre il controllo

puoi provare la nuova gestione dei commenti in blogger, come spiego qui

Iole ha detto...

Ciao Orazio,
ti ho appena aggiunto ai miei amici!
Avevo visto il tuo post già stamattina nel feed reader ma in ufficio ci hanno bloccato facebook e non riusciamo a visualizzare qualsiasi link che contiene la parola facebook. Quindi eccomi qua, appena rientrata a casa ad aggiungerti ai miei amici ;)

Lory ha detto...

Fatto! Grazie per i tuoi sempre preziosissimi consigli e vado ad aggiungerti alla mia lista amici in Fb ;-)

Valeria ha detto...

Effettivamente è comodo inserire il badge, ho conosciuto così diverse persone che avevano letto il mio blog e fa piacere.
anche a me farebbe piacere se ci fosse anche il gruppo su facebook
Domani provvederò ad aggiungerti tra gli amici :-)

Tenebrae ha detto...

bellissimo, tutti accettati!

Alessio Angelico ha detto...

Oltre al badge c'è modo di inserire, nel blog, dei test come quelli di facebook?

Stregatto ha detto...

visto che su ne avete parlato un pò così...se creando un profilo ad esempio del blog, come creo il badge?

Marina ha detto...

Sarebbe bello, un gruppo su Facebook, come ti hanno chiesto. Mi iscriverei subito

nunzy conti ha detto...

ciao tenebrae..
ho fatto tutto come hai scritto..ma su wordpress ho dei problemi..
quando puoi vieni a vedere..sul mio blog
l'ho inserito alla fine della colonna di destra
ciao
***sarà la mia solita allergia al pc :) !!!! ***

Anonimo ha detto...

scusa a che cosa serve?

Ugo ha detto...

ciao, volevo chiederti una cosa. Io ho un blog fatto con blogger ed in facebook ho creato il gruppo corrispondente. C'è la possibilità di visualizzare nel blog le anteprime dei post e dei commenti che vengono inseriti nel gruppo di facebook? Vorrei infatti avere tutto sotto controllo nella homepage del blog. Grazie!

Tenebrae ha detto...

@ugo: confesso che mi hai colto in fallo e non so risponderti. ho visto diversi gadget per il blog di facebook, ma non so risponderti in questo momento se esiste quello che chiedi tu... mi informerò e magari ne parlerò

Ugo ha detto...

ok allora mi iscrivo alla Tua news letter :P

GinCastelli ha detto...

Ciao! A proposito della richiesta di Ugo: ci sono molti gadgets di Facebook per le pagine, ma per i gruppi non c'è nulla... Come fare quindi per creare un badge dei propri iscritti? Grazie per la risposta.

Antonella Le Torte di Pezzettiello ha detto...

io non riesco più a metterlo quello del profilo come mai? grazie

Fangyaya ha detto...


fangyanting20150926
pandora jewelry, http://www.pandorajewelryoutlet.us.com/
cheap wedding dresses, http://www.cheap-weddingdresses.net/
louis vuitton bags, http://www.louisvuittonbag.us.com/
nike air force 1, http://www.airforce1.us.com/
chanel handbags, http://www.chanelhandbagsoutlet.eu.com/
north face jackets, http://www.thenorthfaces.in.net/
ghd hair straighteners, http://www.ghdhairstraightenerssale.co.uk/
michael kors outlet, http://michaelkors.outletonlinestores.us.com/
nike mercurial, http://www.nikemercurial.org/
louis vuitton outlet, http://www.louisvuittonus.us.com/
oakley sunglasses, http://www.oakleysunglassescanada.com/
louis vuitton handbags, http://www.louisvuittonhandbags.org.uk/
football shirts, http://www.cheapfootballshirt.org.uk/
prada outlet, http://www.pradaoutlet.us/
michael kors wallet, http://www.michaelkorswallet.net/
ralph lauren uk, http://www.ralphlauren-outletonline.co.uk/
toms shoes, http://www.toms.us.com/
michael kors factory outlet, http://www.michaelkorsfactoryoutlets.in.net/
ugg boots, http://www.uggbootsclearance.in.net/
hermes birkin, http://www.hermesbirkin.org/
oakley sunglasses, http://www.oakley.in.net/
polo ralph lauren, http://www.poloralphlauren.us.org/
cheap jordans, http://www.cheapjordanshoes.in.net/
tiffany and co jewelry, http://www.tiffanyandco.in.net/
michael kors handbags, http://www.michaelkorshandbag.co.uk/

方松腾 ha detto...

cheap jordans
michael kors outlet online,michael kors,kors outlet,michael kors outlet,michael kors handbags,michael kors outlet online sale,michael kors handbags clearance,michael kors purses,michaelkors.com,michael kors bags,michael kors shoes,michaelkors,cheap michael kors
mulberry handbags
tory burch outlet online
swarovski crystal
canada goose coats
toms outlet
michael kors factory sale
giuseppe zanotti sale
nba jerseys wholesale
fitflops shoes
hollister pas cher
longchamp outlet online
cheap mlb jerseys
swarovski outlet
swarovski outlet

chenlina ha detto...

CHENLINA20160308
louis vuitton handbags
toms outlet
ugg outlet
timberlands
jordan 11
louis vuitton
gucci outlet online
coach outlet online
kate spade outlet
oakley sunglasses
louis vuitton outlet stores
coach outlet store online
louis vuitton handbags
ugg outlet
ray ban sunglasses
ray ban sunglasses uk
louis vuitton outlet
coach factory outlet
michael kors outlet online
kate spade handbags
coach outlet
giuseppe zanotti
michael kors outlet online
ray bans
cheap jerseys
celine bags
asics outlet
cheap air max
oakley outlet
air max 90
uggs for women
air jordan 8
christian louboutin sale
kate spade outlet
cheap nfl jerseys
ray ban sunglasses outlet
louis vuitton
louis vuitton
ralph lauren outlet
christian louboutin outlet
AS

dong dong23 ha detto...

cheap oakley sunglasses
michael kors outlet online
nike sb
nike running shoes
true religion jeans
nfl jerseys wholesale
christian louboutin outlet
abercrombie & fitch
celine
polo ralph lauren
nike basketball shoes
coach outlet
michael kors handbags
nike roshe flyknit
polo ralph lauren
coach outlet online
rolex watches
coach factory outlet
celine
cartier watches
ray ban sunglasses outlet
coach factory outlet
michael kors outlet
caoch outlet
coach outlet
michael kors outlet online
louis vuitton handbags
nike air force 1
louis vuitton outlet
louis vuitton
louis vuitton outlet
giuseppe zanotti sneakers
michael kors outlet
michael kors handbags
cheap jordan shoes
replica watches for sale
michael kors outlet clearance
ray ban sunglasses
cheap jerseys
20165.4wengdongdong

Unknown ha detto...

converse shoes and
nike huarache trainers is
michael kors outlet store drawing.
ralph lauren outlet online am
ralph lauren pas cher button
miami heat jersey at
nike huarache blog
michael kors handbags clearance and
cheap nba jerseys the
oakley sunglasses for

Meiqing Xu ha detto...

michael kors bags
ralph lauren outlet
cheap oakley sunglasses
rolex watches
louis vuitton outlet
red bottoms
levis outlet online
ray ban sunglasses
cheap uggs
christian louboutin outlet
20161230caiyan

chenmeinv0 ha detto...

michael kors outlet
heat jerseys
louis vuitton handbags
christian louboutin
basketball shoes
celine outlet
louis vuitton outlet
golden state warriors jerseys
hilfiger outlet
retro jordans
20173.4chenjinyan

raybanoutlet001 ha detto...

gucci borse
michael kors handbags
birkenstocks
titans jersey
ray ban sunglasses
michael kors handbags
new york knicks
birkenstock sandals
cleveland browns jerseys
mont blanc pens outlet


Prima di lasciare un commento, leggete qui

Posta un commento