Este es el primero de una serie de artículos en la que repasaremos las distintas posibilidades que tenemos para integrar Facebook en nuestra propia página. La complejidad y el nivel de interacción irán subiendo poco a poco dentro de la serie. En este primer artículo, empezaremos viendo cómo integrar el módulo más sencillo, pero que al mismo tiempo más visibilidad nos pueden aportar: el botón Like.

Botón Like

Incluir el botón de “like” en una página es algo muy sencillo. Simplemente basta con ir a la página del plugin en facebook. Desde esta página podemos obtener ya un código que podemos pegar directamente en nuestra página dónde queramos colocar el botón:

<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like show_faces=”true” width=”450″></fb:like>

Pengando este código html en nuestra página, tendremos ya un botón que actuará sobre ella.

Facebook nos ofrece dos posibilidades para pegar este código:

  • iframe: Nos permite pegar el código mediante código html estándar.
  • XFBML: Utiliza una etiqueta propia de facebook. Es necesario incluir también un fichero javascript que al cargarse reemplazará todas las etiquetas xfbml de la página por el código final correspondiente.

Personalmente, prefiero la opción del XFBML, ya que nos permite tener un código final mucho más reducido y claro. En adelante, los ejemplos se referirán siempre a esta opción.

Por defecto, el código que nos proporciona facebook es siempre para la versión en inglés. Si queremos pintarlo en la versión en castellano, podemos hacerlo cambiando la referencia al fichero javascript a la siguiente:

Inclusión del botón en un listado

Si pegamos el código que facebook nos ofrece tal cual, tendremos un botón que actuará sobre la url de la página que se esté navegando en ese momento. Pero puede ocurrir, por ejemplo, que tengamos un listado de productos y queramos tener botones de Like para cada uno de los productos por separados. Para ello, antes que nada, tenemos que tener claro un concepto. El botón siempre actúa sobre una url. Es decir, si queremos controlar likes por producto, cada uno de los productos debe tener una url diferente. Esto habitualmente suele ser así.

Por poner un ejemplo real, ésta es una página con un listado de productos, cada uno de los cuales tiene su ficha. En cuanto al código, lo primero que hay que saber es que el fichero javascript sólo es necesario incluirlo una vez. Así, antes de cerrar la etiqueta HEAD de nuestra página incluiríamos lo siguiente:

Y ya no es necesaria ninguna referencia más al fichero javascript.

Después, en cada ítem del listado incluimos el botón con un código como el siguiente:

<fb:like href=”http://www.ozongo.com/OZONFirst.html” show_faces=”false” width=”80″ layout=”button_count”></fb:like>

Si se compara con el que nos da facebook por defecto, hemos hecho lo siguiente:

  • href: Incluido el enlace a la página sobre la que queremos que actúe
  • show_faces: Lo hemos puesto a false, ya que cómo el espacio que tenemos es más reducido no queremos mostrar el detalle de los usuarios
  • width: La hemos reducido para que cuadre con la maquetación
  • layout: En este caso, nos valía con que únicamente sacase el contador de likes, no había espacio en la maquetación para más información

Espero que el artículo os haya sido útil. Próximamente, uno sobre cómo integrar el login del usuario con el de Facebook.