6 PULSANTE CONDIVIDI.. come personalizzarlo

Spiego in questo post come cambiare la tristissima icona grigia del pulsante "condividi" per le pagine Facebook.Per capirci si passa da questo...

....ad una cosa tipo questa

Cosa vi occorre :

•Pagina Facebook con applicazione FBML installata ma questo è scontato e non mi dilungo

•Una immagine o un pulsante da sostituire quello solito;la potete fare da voi o ne trovate tante carine in rete, ad esempio qui.Il bottone verde nell'esempio dovrebbe essere della grandezza massima consentita (152px largo x 32 px alto), non superate queste misure, il bottone rischia di non apparire correttamente.

•Un sito "Host" dove poter caricare l'immagine creata (o scaricata) ed un documento css che vedremo in seguito.Il sito Host vi da la possibiletà di avere un vostro spazio web, un vostro sito appunto dove potrete caricare qualsiasi tipo di documento.
Naturalmente non è necessario creare un vero e proprio website ma per avere il bottone personalizzato è obbligatorio possedere uno spazio su internet.
Io ad esempio uso altervista che è italiano, gratuito e ci si iscrive in un secondo.Qui trovate una lista di molti altri Host gratuiti.




Cominciamo

PUNTO 1) CODICE DEL PULSANTE CONDIVIDI


<fb:share-button class="url" href="http://www.facebook.com/pages/ODIO-IL-MIO-PC/156951767696237?sk=app_7146470109"<?php the_permalink(); ?>"></fb:share-button>

Copiatelo ed incollatelo nel riquadro grande della vostra FBML personalizzandolo con il vostro indirizzo di pagina che ho evidenziato in rosso.

Se tutto è andato liscio otterrete il bottone grigio di condivisione che , se cliccato vi aprirà la solita finestra

PUNTO 2) FOGLIO DI STILE CSS

Andiamo ora a sostituire l'icona grigia con la nostra.

Per fare ciò utilizziamo il seguente codice :

#share a {
text-indent:-9999px;
display: block;
border:0; padding:0; margin:10px auto;
width: 152px; height: 32px;
background:url(http://www.miosito.it/immagine.png)top left no-repeat;
overflow: hidden;
text-decoration:none !important;
}

Questo codice non è riconosciuto da Facebook se caricato direttamente nella fbml, ecco perchè dobbiamo appoggiarci ad un sito esterno.

Copiate ed incollate su blocco note il codice sopra e salvatelo con estensione css (ad esempio pulsante.css)
La parte di codice che ho segnalato in rosso è l'unica da sostituire ed è l'indirizzo della immagine che avete scelto per sostituire l'icona grigia e che avete caricato sul vostro sito.
Caricate ora il foglio di stile (share.css) nel vostro sito.
copiatene poi il link che sarà qualcosa del tipo

http://www.miosito/pulsante.css

Tenete bene a mente questo indirizzo perchè vi servirà a breve.


PUNTO 3) COLLEGARE IL PULSANTE AL FOGLIO DI STILE


Andate sulla vostra pagina Facebook e copiate nel riquadro grande della fbml questo codice subito all'inizio:

<link rel="stylesheet" type="text/css" href="http://www.miosito.it/pulsante.css" />

Il codice collega il bottone al foglio di stile, la stringa in rosso è l'indirizzo del foglio che avete creato al punto 2.

Ecco come si presenta il codice finito:

Ricapitolando abbiamo :

1) Titolo della applicazione QUELLO CHE VOLETE

2) Collegamento al foglio di stile 

3) Codice del bottone condividi

Se tutto è andato ok avrete il vostro pulsante condividi personalizzato e funzionante come questo

Spero sia tutto chiaro, in effetti è più facile farlo che spiegarlo, provate e sappiatemi dire

bye

Luca

Pin It