Personalizar el FanBox de Facebook

Hace unos días CebicheTV me decía que había visto en Daddy Design un Fanbox personalizado que quería aplicar pero que no entendía muy bien cómo hacerlo.

La forma como lo presentan es un estilo minimalista que se adapta muy bien a plantillas de diseños más simplistas, aunque a partir del código CSS se puede modificar para hacer una readaptación del mismo.

Como puedes ver se ha eliminado la cabecera del Fanbox, se han quitado los bordes, el botón 'Me gusta' se ha puesto debajo, y el número de fans está en otro color.

Para conseguir personalizar el FanBox de esta forma necesitaremos saber la ID de nuestra página de Facebook.

Para saberla entra a tu página de Facebook y haz click en el botón Editar la página que se encuentra en el lado superior derecho.

En la barra de direcciones de tu navegador verás al final una serie de números, esa es la ID.

https://www.facebook.com/pages/edit/?id=XXXXXXXXXXXXXXX

Ahora descarga este archivo, descomprímelo y sube el archivo a un hosting.
Luego entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pega este código:

<script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script>
<fb:fan profile_id="XXXXXXXXXXXXXXX" stream="0" connections="8" logobar="0" width="240" css="URL del archivo CSS"></fb:fan>

Cambia las equis que están en rojo por la ID de tu página de Facebook que conseguiste anteriormente. Y agrega la URL de tu archivo CSS que subiste al hosting. Con eso será suficiente para tener el FanBox con este estilo minimalista.
¿Se puede personalizar más? Claro, si abres el archivo facebook.css te encontrarás con este código:

.fan_box a:hover{
text-decoration: none;
}
.fan_box .full_widget{
height: 200px; /* Altura del FanBox */
border: 0 !important; /* Eliminamos el borde */
background: #fff !important; /* Color de fondo del FanBox */
position: relative;
}
.fan_box .connect_top{
background: none !important;
padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
display: none; /* Con eso eliminamos la cabecera */
}
.fan_box .connect_action{
padding: 0 !important;
}
.fan_box .connections{
padding: 0 !important;
border: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
}
span.total{
color: #FF6600; /* Color de la fuente para el número de fans */
font-weight: bold;
}
.fan_box .connections .connections_grid {
padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-weight: normal;
color: #666 !important; /* Color del nombre de los fans */
padding-top: 1px !important;
}
.fan_box .connect_widget{
position: absolute;
bottom: 0; /* Con eso colocamos abajo el botón 'Me gusta' */
right: 5px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}

En esas anotaciones color verde se indica cuáles son las áreas que podemos modificar, como el color de fondo, el color del nombre de los fans, el color del número de fans, etc.

Se recomienda no cambiar el tipo de letra para evitar desajustes con los espacios. Y si cambias la altura del gadget deberás hacerlo tanto en el código que va en el HTML/Javascript como en el archivo CSS, tomando en cuenta que la altura en negrita deberá tener aproximadamente 40px más que la altura establecida en el CSS.

Seguro podrán hacerse modificaciones interesantes, pero así como está a mí me parece bastante lindo el diseño :)