Risorse per Web Designer, Developer, Web Marketing, Seo e Photoshop

Personalizzare stile e grafica del Fanbox di Facebook

Pubblicato in Social Network

Fan Box è un widget di Facebook che, incorporato su un sito web, mostra informazioni relative alla nostra fanpage, tipo i post inseriti, il numero e la foto dei fan, e il tasto ”Become a Fan” .
Inserirlo è semplicissimo basta andare sulla Pagina Fan di Facebook, cliccare sul link “Aggiungi riquadro dei fan al tuo sito”, copiare il codice che è stato generato ed incollarlo sul sito dove volete far comparire il Widget.

Il codice da inserire sarà simile a questo:

<script type="text/javascript" src="http:...................../it_IT"></script>
<script type="text/javascript">FB.init("e7cd4ad4e769e764c0c5b84f7a");</script>
<fb:fan profile_id="TUOID" stream="" connections="10" width="300"></fb:fan>
<div style="font-size:8px; padding-left:10px">

Molto semplice e veloce.

Lo scopo di questo tutorial però è mostrarvi come fare a modificarlo.

Per modificare la larghezza basterà operare qui:

<fb:fan profile_id="TUOID" stream="" connections="10" width="300"></fb:fan>

modificando il valore del parametro width, per modificare il numero di foto di fan da visualizzare invece basterà modificare il parametro connections, mentre discorso a parte va fatto se siete intenzionati a cambiarne il design. Per farlo avete bisogno di crearvi un foglio di stile ad hoc.

Per prima cosa nel codice va inserito il parametro “CSS” al quale va assegnato l’url del foglio di stile.

Ecco un esempio:

<fb:fan profile_id="VOSTRO ID" stream="" connections="10" width="287" 
css="http://www.yeswebcan.it/fbstyle.css"></fb:fan>

Ora non ci resta che creare il css. Per conoscere i nomi dei blocchi da modificare vi occorrerà uno strumento come la Barra Web Developer di Firefox.

Questo è il foglio di stile che ho creato per yesWEBcan. Per me non ho dovuto modificare moltissimi parametri.

@charset "utf-8";
/* Facebook Fanbox */
 
.fan_box
.full_widget
.connect_top 
{
display: block;
background-color: #e19238;           /* Cambio il background al blocco connect */
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: center;
}
 
a
{
cursor: pointer;
color: black;              /* Cambio il colore del link col nome della fanpage */
outline-style: none;
text-decoration: none;
}
.fan_box .connections
{
border-top-width: 1px;
border-top-style: solid;
border-top-color: #d8dfea;
padding-top: 10px;
padding-right: 0pt;
padding-bottom: 4px;
padding-left: 5px;            /* Riduco i margini per far comparire più foto */
min-height: 150px;
 
}
 
.fan_box
.full_widget
{
margin:2px;                         /* Imposto margine 2 */
margin-bottom:10px;
border:1px solid #455c6c;     /* Aggiungo un bordo di un pixel */
}

Potete scaricarlo anche qui.

IMPORTANTE: Una volta pubblicato, il css rimane in memoria, quindi se successivamente vorrete effettuare altre modifiche queste non saranno a voi visibili neanche cancellando o disattivando la cache del browser. Il problema è facilmente risolvibile e ne parlo in quest’articolo

L’occasione è gradita per invitarvi a iscrivervi alla fanpage di yesWEBcan.it

[ 19 Commenti ]