Síguenos:

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

Publicado por Marketinet el 22 de febrero, 2010

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