Muchas veces hemos querido crear nuestro like box de nuestro fan page, por lo que religiosamente, hemos ido a la siguiente url https://developers.facebook.com/docs/plugins/like-box-for-pages, sin embargo muchos de los diseños desarrollados, no se adaptan al diseño propuesto por Facebook

1. Personalizar el contador
de Like de Facebook con
JQuery
ENRIQUE G. LAZO BELLO
contacto@enguilabe.info

2. Muchas veces hemos querido crear nuestro like box de nuestro fan page, por lo que religiosamente, hemos ido
a la siguiente url https://developers.facebook.com/docs/plugins/like-box-for-pages, sin embargo muchos de
los diseños desarrollados, no se adaptan al diseño propuesto por Facebook, ver Imagen 01.
Imagen 01: Diseño proporcionado por Facebook
En muchas de sus actualizaciones Facebook, nos ha brindado el uso de su api, utilizando el opengraph, por lo
que al unir el nombre de usuario de nuestro fan page, nos proporciona los datos generales de nuestro fan
page, ver imagen 02
Imagen 02: Api OpenGraph de Facebook
Al revisar la imagen 02 encontramos que el api nos devuelve un JSON, y dentro de sus propiedades tenemos la
propiedad like, ver imagen 03
Imagen 03: Numero de likes

3. Entonces podemos tener un diseño mas personalizado, ver imagen 04
Imagen 04: Diseño personalizado
Primero vamos a agregar el css, para agregar la parte de diseño, ver imagen 05.
Imagen 05: Estilos CSS de nuestro diseño

4. Luego agregamos , las etiquetas html, ver imagen 06
Imagen 06: HTML del sitio
Vamos agregar el código javascript, se recomienda que debe estar antes de cerrar la etiqueta </body> y
agregaremos primero la librería JQuery, ver imagen 07
Imagen 07: Agregando la librería JQuery
Luego agregamos el código que nos ayudara a detectar la cantidad de likes y agregarlo al div con la clase
“number”, ver imagen 08
Imagen 08: Código que captura los likes

5. Acerca del Autor
Soy de origen peruano, también programador web, móvil y escritorio, inicie
mi carrera desarrollando páginas web con HTML desde el 2003, interesado en
las nuevas tecnologías, siempre aposte por la tecnología Microsoft, de lo cual
soy MCTS en Aplicaciones Web con .NET aunque actualmente desarrollo
sitios web con Joomla, Wordpress, CakePHP, CodeIgniter y próximamente
Laravel, y del lado de Front End, HTML5, CSS3 y Jquery.