El Like Box de Facebook, es la típica caja con fotografías que vemos en muchas web. A través de este plugin, los usuarios de tu web o blog pueden hacerse seguidores de tu página de Facebook e incluso pueden ver las últimas publicaciones (dependiendo de cómo configures el plugin). Éste es el aspecto que suele tener un Like Box estándar:

Antes de continuar debemos saber que este plugin únicamente funciona con los perfiles de empresa o fan page de facebook. No lo intentéis con los perfiles personales porque no funciona.

Para añadir el plugin debemos acceder a la página oficial de Facebook para desarrolladores (Facebook Developers) Aquí vamos a ver que los plugin sociales de Facebook actualmente son diez, pero nosotros vamos a centrar el artículo en el llamado Like Box.

Para acceder directamente a la configuración del plugin nos vamos a https://developers.facebook.com/docs/plugins/like-box-for-pages

Únicamente tenemos que ir completando los campos que nos pide e iremos previsualizando nuestro plugin social. Tenemos:

1. Facebook Page URL.- Esta es la URL de tu página en Facebook, accede a tu cuenta de Facebook y copia la dirección web aquí
2. Width.- El ancho, en píxeles, que tendrá la caja, intenta que se ajuste al lugar donde la colocarás
3. Height.- El alto, en píxeles, de la caja. Cuanto más grande hagas la caja, más fotos contendrá
4. Color Scheme.- Plantilla de la caja, dispones de dos: light (clara) y dark (oscura)
5. Show Friend's Faces.- Marca esta opción si deseas que se vean las fotos de tus fans
6. Show Header.- Si marcas esta opción, se mostrará la cabecera de la caja "Búscanos en Facebook"
7. Show Posts.- Si la habilitas, se mostrarán las últimas publicaciones de tu página de Facebook
8. Show Border.- Indica si quieres bordes en la caja

Juega con estos parámetros y configúralo a tu gusto, una vez hayas terminado pulsa sobre el botón "Get Code", obtendrás una pantalla emergente como esta:

Por defecto te aparece el código HTML5 pero tienes otras tres opciones disponibles (XFBML, IFRAME, URL). En cada una de ellas te muestra el código que necesitas insertar en tu web y las instrucciones oportunas.

Elije el que te interese e insértalo en tu web. Y ya tendrías tu plugin Like Box como este.

Opciones Avanzadas:

Si a la hora de añadir el código en nuestra web hemos elegido la opción HTML5, aún tenemos algunas opciones más para configurar nuestro plugin.

Nos centraremos en la etiqueta DIV, recuerda:

<div class="fb-like-box" data-href="https://www.facebook.com/controldedominios" data-width="500" data-height="320" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>

Mediante atributos "data" del elemento DIV, podremos pasarle  parámetros al plugin de Facebook. La herramienta de construcción del Like Box es muy completa, de hecho solo hay un parámetro que no incluye: data-force-wall.

Estos son todos los parámetros disponibles:
 

Haz pruebas hasta que el plugin quede a tu gusto, como ves es muy sencillo.

Y cómo ya sabes este blog no lleva mucho tiempo y tenemos pocas caritas en nuestro plugin. ¿Me ayudas a rellenar huecos? :-) 

¡¡ Gracias !!