Cómo crear un fanbox en una sola línea

Publicado por Santiago Tabuenca el 22 de febrero, 2010
Encuéntrame en:

En estos días nos ha surgido la necesidad de realizar un fanbox de Facebook que se ubicara en una sola línea. Tras buscar y buscar no conseguimos encontrar nada, pero nuestro gran departamento de desarrollo web... ¡encontró la solución! Y queremos compartirla con vosotros por si os encontraís la misma solución, encontréis en nuestro blog una buena respuesta.

Continúa leyendo y sabrás como crear un fanbox en una sóla línea.

crear_una_fanbox_en_una_sola_linea.jpg
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

Hemos realizado una selección de artículos que podrían interesarte:

Cómo optimizar los anuncios de Facebook
La importancia del marketing de contenidos en Facebook
El mejor momento para publicar un post en Facebook

m


Categoría: Diseño Web, Redes Sociales

Guía Marketing Automation

Pautas para el éxito de tu web con Wordpress