Personalizzare il Like/Fan-box di Facebook e validazione W3C

Come anche in questo sito, molti di voi hanno la necessità di personalizzare il famoso Fan-Box di Facebook, ora divenuto Like-Box, per meglio adattarlo allo stile del sito. Tutto questo è possibile caricando un file di stile css personale. Per far ciò però dovremo usare il vecchio codice ovvero il fan-box perchè il like-box non permette di caricare stili personali. Vediamo come procedere. In questa guida spiegherò come caricare Javascript SDK, e i vari procedimenti per il fan-box.

Creazione di un applicazione su Facebook:

Andiamo subito su questa pagina e impostiamo una nuova applicazione, diamo un nome e andiamo avanti, successivamente dobbiamo modificare l’applicazione appena creata e alla scheda Website dobbiamo inserire l’URL completo del nostro sito ad esempio “http://www.p2warticles.com/” e il dominio ad esempio “p2warticles.com”. Salviamo e teniamo aperta questa pagina.

Inserimento del Javascript SDK:

Per avere un caricamento rapido della pagina indipendentemente dai widget di FB che installerete inseriamo questo codice subito prima del tag </body> (su WordPress si trova nel file footer.php del vostro tema):

<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'APP_ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/it_IT/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

Al posto di APP_ID dovrete inserire l’id dell’applicazione che avete appena creato su FB.

Inserimento del Like-Box:

Come già detto in precedenza il like-box di Fb non permette di caricare css personalizzati quindi utilizzeremo il codice per il fan-box dato che cambia poco o niente:

<fb:fan profile_id="FB_PAGE_ID" width="170" height="320" connections="6" stream="false" header="false" css="INDIRIZZO/fbstyle.css?1"></fb:fan>

questo codice dovrete inserirlo dove volete che appaia il box nella vostra pagina, al posto di INDIRIZZO inserite l’url fino al vostro file fbstyle.css, quello che vedete dopo ovvero ?1 va cambiato ogni volta che modificate il file css, altrimenti non visualizzerete le modifiche in quanto il file si memorizzerà nella cache di FB. Al posto di FB_PAGE_ID inserite l’id della vostra pagina, ad esempio per una pagina con indirizzo http://www.facebook.com/pages/P2WArticles-il-paid-to-write-che-ti-da-il-100/279835234538 l’id sarà 279835234538. Un esempio di codice css da salvare sul file fbstyle.css è il seguente:

@charset "utf-8";
/* CSS Document */

.fan_box .full_widget {
   background: none; border: none;
}
.fan_box .connections_grid .grid_item {
   padding: 0 2px 7px 3px;
}
.fan_box .connections_grid .grid_item a img {
   box-shadow: 0px 0px 10px #333; -moz-box-shadow: 0px 0px 10px #333; -webkit-box-shadow: 0px 0px 10px #333;
}
.fan_box .connections_grid .grid_item a:hover img {
   box-shadow: 0px 3px 10px #333; -moz-box-shadow: 0px 3px 10px #333; -webkit-box-shadow: 0px 3px 10px #333;
}
.fan_box .full_widget .connect_top {
   background: #efefef; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;
}
.fan_box .connections .connections_grid {
   padding-top:10px;
}
.fan_box .connections {
   border-top: none; padding:9px 0 0; color: #390; font: italic 14px SegoeUI; text-align: center; text-shadow: 0px 1px 4px #aaa;
}
.fan_box .connections span.total {
   color: #b30300;
}

.fan_box .connections_grid .grid_item .name {
   color: #390; font-size: 11px;
}
.fan_box .profileimage {
   margin: 0;
}
.fan_box .connect_action .name {
   font-size:10px; font-weight:bold; font-style:italic; line-height:15px; font-family:"Segoe UI", Verdana; color:#b30300; text-shadow:1px 1px 4px #390;
}

Ovviamente potete modificare anche altri elementi del box ispezionandolo con Firebug o con Web Developer.

Validazione W3C:

Questi tipi di plugin hanno il problema che non fanno passare la validazione W3C. Si può ovviare a questo con un semplice file javascript scaricabile da qui.
La procedura è semplice:

• caricate il file fbObjectValidationV3.js sul vostro hosting
• subito prima di <div id=”fb-root”></div>dobbiamo aggiungere questo:

  <script type="text/javascript" src="INDIRIZZO/fbObjectValidationV3.js"></script>

  sempre sostituendo INDIRIZZO con l’url preciso fino al file indicato.

• ora dovete aggiungere al codice del fan-box dei tag di commento quindi il codice inserito in precedenza diventerà:

  <!-- FBML <fb:fan profile_id="FB_PAGE_ID" width="170" height="320" connections="6" stream="false" header="false" css="INDIRIZZO/fbstyle.css?1"></fb:fan> FBML -->

  ora il codice passerà la validazione W3C

Tags: facebook, fan box, grafica, like box, w3c, w3c validation

Category: Facebook