Oloblogger

Incluir una Fan Box de Facebook en el blog y unos apaños

Posted: 24 Mar 2011 07:53 AM PDT

Esto no tiene ningún misterio, pero cómo nos hemos comprometido con los torpes, allá vamos. Atentos también los más avezados, porque explicamos un truquillo para que funcione bien la like box a los que les da problemas y al mismo tiempo, aprender a configurar su apariencia.

Una Fan Box es un simple gadget de Facebook, que permite mostrar en cualquier sitio web, datos relativos a una página Facebook. En concreto, un título con nuestra imagen de perfil más un botón Like y opcionalmente, una especie de stream con las últimas publicaciones en nuestro muro o los avatares de algunos seguidores elegidos al azar.

Ojo que esto es para páginas, no para perfiles personales. Las páginas son una modalidad especial de perfiles Facebook que en un principio estaban destinadas para sitios comerciales, pero que bien pueden ser usadas para otro tipo de sitios más amateur como los nuestros. Con la creación de una página podemos independizar nuestra actividad personal de la de nuestro sitio web.

Un ejemplo de mi perfil y un ejemplo de la página de Oloblogger. Son muy parecidos pero tienen algunas pequeñas diferencias. Por ejemplo, en un perfil tienes amigos, ya que este se supone que es el fin de esta red social. Sin embargo, en las páginas sólo puedes tener fans. Los primeros pueden ser invitados por tí, pero los segundos tendrán que pinchar en el Me gusta de la página (distinto del que sirve para compartir una entrada) para pasar a ser fans, sin existir ningún mecanismo automático de invitación o similar. Otra diferencia actualmente es que los perfiles permiten personalizar las imágenes superiores y en las páginas, estas salen aleatoriamente de entre los álbumes disponibles.

Hecho este preámbulo, la forma de conseguir el código para pegar en nuestra barra lateral o dónde se os antoje este artilugio, es accediendo a la página de Facebook para desarrolladores. Este sería el enlace directo para la fan box.

Ahora sólo hay que marcar las opciones de lo que se desea mostrar, teniendo en cuenta los siguientes conceptos:

Page URL: La dirección de nuestra página
Width: El ancho del gadget
Color Scheme: Fondo semi-transparente (light) u oscuro (dark)
Show Faces: Para mostrar los avatares de los fans
Show stream: Idem las últimas publicaciones
Show header: Idem la cabecera azul con el logo Facebook

Hay una vista previa, por lo que podemos experimentar lo que queramos, sabiendo de antemano cómo va a quedar la cosa. Una vez a nuestro gusto, con el botón Get Code, conseguimos el código para sólo copiar y pegar.

Y ahora los problemas y sus soluciones.

Cuando no seleccionáis el stream pero sí los avatares, por un fallo del sistema de esa interface, el gadget reduce la altura del iframe que mostrará el artilugio, a sólo 62px. Esto hace que aparentemente el cacharro no funcione, pero realmente lo que pasa es que no tiene espacio para mostrarse, quedando fuera del marco visible.

Y esto me lleva a mostraros el código estándar para que sepáis cómo modificarlo.

Lo que hay marcado en verde es lo que la interface que hemos visto en la página de desarrolladores, introduce de forma variable en el código, según nuestra selección. En este mismo orden, aparecen los siguientes valores que podemos modificar diréctamente en el código:

la dirección de la página (href)
el ancho del artilugio (width)
el tono del fondo, con las únicas opciones dark o light (colorscheme)
los avatares, con true para que se vean y false para que no se vean (show_faces)
las últimas publicaciones, idem anterior (stream)
la cabecera azul del gadget, idem anterior (header)
la anchura del iframe, que tiene que ser la misma que la del gadget (width)

Y para terminar, el truquillo.

Como habréis podido comprobar, el programa para crear el código no nos pregunta el alto (height) y lo inserta automáticamente según su criterio. Son las cifras marcadas anteriormente en azul (427). Este dato también lo podemos modificar, aunque sólo afectará a la parte inferior del iframe, es decir, principalmente a la cantidad de avatares a mostrar.

Así que conociendo las medidas de cada elemento podemos juguetear un poco. Hay que tener en cuenta que el logo y el nombre de la página saldrá siempre:

Cabecera: 31px
Logo y nombre página: 63px
Stream: 301px
Primera fila avatares: 119px
Segunda y siguiente fila avatares: 73px

Si por ejemplo marcamos (o cambiamos false/true) para mostrar sólo header y stream, pero para encoger el gadget, ponemos menos de 395px de altura (31px + 63px + 301px = 395px), parte del stream no se verá al no haber espacio suficiente. En ese caso concreto, no hay mayor problema porque seguiremos teniendo la barra de desplazamiento y nos podremos apañar. Si además hemos marcado mostrar los avatares (recordamos que seguimos con menos de 395px), estos no se verán, ya que quedarán fuera del marco.

Y el uso más práctico que veo para esto es el de poder mostrar la cantidad de filas de seguidores que nos plazca.

Por ejemplo, un gadget sin header, con stream y con cuatro filas de seguidores, tendría que tener 63px + 301px + 119px + (73px * 3) = 702px. Y de igual manera tenéis que calcular para cada uno de vuestros casos particulares.

Tened en cuenta que hay que cambiar los dos HEIGHT que aparecen en el código para que no pasen cosas raras. El primero no necesita los caracteres px, pero el segundo sí.

Y una vez más, ya estáis tardando en seguirnos en Facebook, que por allí también damos enlaces presuntamente interesantes, que posiblemente os vengan bien :D