El otro día nos surgió la necesidad de realizar un fanbox de facebook que se ubicara en una sola línea.

El proceso es muy sencillo, aunque previamente lo buscamos en internet y no encontramos ningún sitio donde explicaran este proceso (Quizás no dimos con la palabra clave para buscarlo).

De todas formas, y por si alguien le ocurre lo mismo, publicamos lo que nuestro departamento de desarrollo realizó.

1. Empezamos por el HTML:

• Insertamos el código javascript para conectarmos con Facebook:

<script type=”text/javascript” src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA”></script>

<script type=”text/javascript”>FB.init(“API_KEY”);</script>

Nota: Si ya tenemos el código javascript insertado no debemos duplicarlo.

• Insertamos la tag fb:fan:

<fb:fan profile_id=”YOUR_PAGE_ID” stream=”" size=”square” connections=”3″ width=”661″ height=”100″ css=”incluimos un vínculo a nuestro css para colocar el fan box en una línea”></fb:fan>

Los parámetros:

profile_id: El ID de la página asociada a la caja de fans. Especificar el  profile_id o el nombre, pero no ambos.

connections: es el numero de fans que vamos a mostrar (las fotos de los fans)

width: el ancho de la caja

height: el alto de la caja

css: la ruta a la hoja de estilos

Nota: se puede añadir un parámetro automático a la dirección del css para evitar el molesto cacheo. En php por ejemplo, utilizamos este parámetro: ?<?=mt_rand(1, 999999)?>

El código de la caja de fans lo podemos obtener aquí: http://www.facebook.com/facebook-widgets/fanbox.php

1. En el CSS hay que cambiar la clase “connections” para que se vea en una sola línea:

.connections {

width: 200px;  /*el ancho del div con las fotos de los fans*/

height:50px;    /*el alto del div con las fotos de los fans*/

/*la posición del div con las fotos de los fans (por defecto si ve abajo, con este código lo obligamos a que se vea arriba)*/

position:absolute;

left: 220px;

top: -1px;

}

Esperamos que os sirva de ayuda.

Departamento Desarrollo MarketiNet