Con más de 500 millones de usuarios registrados en todo el mundo, está claro que Facebook es una de las herramientas de promoción más potentes que podemos encontrar para nuestra página web. Si conseguimos que las acciones que nuestros visitantes realicen contra nuestra web se vean reflejadas en su muro, estaremos haciendo nuestra web visible para todos sus amigos. Y si sus amigos interactúan de nuevo, seguiremos con la rueda, obteniendo así, de forma gratuita, publicidad para nuestra página.
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:
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:
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.
La forma de definir al boton like que elegiste es bastante reducida. El boton like es mucho mas que esto.
Hay algo muy importante que estas dejando de lado que es el protocolo open graph, que es lo mas importante en facebook. La idea basica de este protocolo es hacer “sociables” las paginas web. Una de las opciones pueden ser el boton me gusta, los comment, y los otros plugins.
Pero la magia ocurre con los metatags.
Ahi donde podemos marcar todas las paginas de nuestro sitio web de tal forma que podamos aprovechar todo el potencial del boton me gusta, principalmente.
Cuando entramos a un sitio por ejemplo Maestros del web, y entramos en un post, y le damos al boton me gusta, Maestros, tiene la capacidad de poder escribir en nuestro muro 😉
Cada vez que se crea un post nuevo en Maestros, y alguien da por primera vez en el me gusta de ese post, automaticamente se crea una pagina de administracion en Facebook, para que puedas ver las personas a las que le gusto tu post,y poder publicar contenido en sus news Feed.
Pero claro, como haces para administrar todas las paginas que te crea Facebook, y poder postear en los muros de todas esas personas? A traves del SDK de facebook, el cual engloba todas tus paginas facebook, con la api id de maestros en facebook.
Ahora puede ser que en la pagina facebook.com/maestrosdelweb solo tenga 5000 fans. Pero sumando los post internos llegues a 30 000, en ese caso, podes postear en 300 000 muros, contenido relacionado.
Promocionando no solo el articulo que le gusto al usuario, sino todos los futuros.
Esto puede ser bastante complejo pero es muy interesante.
Otra cosa es que tus sitios van a aparecer en las busquedas internas de facebook, y el motor que usan es bing, asi que tambien vas a indexar en bing 😉
Siempre me costo indexar en bing, pero desde que estructure todo con los metatags en opengraph, ni siquiera tengo que dar de alta el sitio en bing com / webmasterrs
Acabo de ver que puse “postear en 300 000 muros y es en 30 000 muros ”
😀
Hola Pablo,
Efectivamente esa era una forma bastante reducida de presentarlo, pero mi idea es ir poco a poco presentando las posibilidades de facebook en varios artículos, no hacerlo todo de golpe. De hecho, los metatags y el opengraph iban a ser el tema del próximo artículo.
perdon pero no me gusto el articulo, ya que iban a tocar el tema del buton like hubieran empezado por Opengraph como mencionó Pablo, o al menos like+opengraph y no algo tan basico que ya no se debe usar, sino desperdiciamos las bondades de facebook utilizando esto que escribieron.
Hola, he intentado poner el boton con el codigo que me dio FB pero en mi blog de WordPress no funciona… aparece parte del código. Se supone que lo tengo que insertar mediante un Widget de texto verdad?
Ya que estoy te pregunto, algunos códigos HTML se han de insertar en el Body o the head y no tengo ni idea que es esto…
Gracias.
Hola Lucía,
La verdad es que no sé mucho de WordPress, y he entrado en tu blog pero no veo dónde has puesto el código (supongo que lo has quitado si salía mal).
De todas formas, creo que en este caso lo mejor sería que usases un plugin como http://wordpress.org/extend/plugins/facebook-ilike/.
Hola, agradezco que comiences con algo tan básico pues esto es muy bueno para personas que como yo estamos iniciando.
Saludos.
[…] Maestros del Web window.fbAsyncInit = function() { FB.init({appId: "", status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement("script"); e.async = true; e.src = document.location.protocol + "//connect.facebook.net/en_US/all.js"; document.getElementById("fb-root").appendChild(e); }()); Share and Enjoy: […]
Hola José,
Estoy comenzando un blog y me sirvió tu tutorial para poner el botón de “Me gusta”. Ahora, mi problema es que cuando alguien le da a me gusta en cada post este lo pone en todo los demás. Quisiera poner cada contador independiente, ¿me ayudarías a saber cómo solucionar esto?
Saludos y de antemano, muchas gracias.
Hola Gerardo,
Viendo el código fuente, veo que lo que has puesto como url en el iframe es lo siguiente:
http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Ftechtres.net&layout=button_count&show_faces=true&width=450&action=like&colorscheme=light&height=21
Si te fijas, le estás pasando un parámetro href como http://techtres.net. Por tanto, le estás diciendo que la url sobre la que aplica el like es esa. La forma más sencilla que tienes, es cambiar la url del iframe por esta:
http://www.facebook.com/plugins/like.php?layout=button_count&show_faces=true&width=450&action=like&colorscheme=light&height=21
Así, al no poner un href, el like aplicará sobre la página actual.
Hola amigos, alguien sabe como utilizar la aplicacion facebook comments para wordpress?
Yo he conseguido introducir el código de mi single, pero los comentarios me aparecen en todas las entradas y me gustaria saber si es posible hacer que cada entrada tenga sus comentarios independientes.
A ver muchachos, checken este sitio, utiliza facebook connect y es una alternativa a algunos otros con la diferencia q este interactua con facebook
Espero sus comentario
el sitio es http://www.amukifriend.com
Sorry
Para mi es mas facil con el iframe, quedan algunas lineas de mas pero no tengo que subir el archivo javascript.
alguien me podria ayudar lo que pasa es que quiero saber como bloquear mi contenido hasta que alguien ponga like
Este post no sirve!
Lucha como humano o cylon en el juego Battlestar Galactica Online por la supremacía en el espacio. ¡Gráficos 3D increíbles y una experiencia de juego única! Juega ya online.
Mi situación es esta.
Tengo un website de la empresa donde trabajo, sin nada de facebook o botones like.
En el área de mercadotecnia hicieron un page de facebook.
Lo que quiero hacer ahora es hacer social el website de la empresa pero no perder todo lo que se ha logrado en el page de facebook (tiene más de 2000 seguidores).
Si uso el open graph se crea un nuevo page para mi sitio web y lo que yo quiero es que cualquier cosa que se publique en el page (que ya tiene tiempo funcionando) le llegue a todos aquellos que le dieron like a alguna sección del website.
Se aceptan sugerencias, gracias de antemano!!!
Hola chicos, lo que yo estoy tratando de hacer es integrar una aplicacion que tengo en java con Facebook, por ejemplo tengo un articulo que quiero publicar en el faceb. entonces me tendria que mandar a mi pagina de logueo y desde alli lo publico, si alguien sabe como hacerlo me seria de gran ayuda.
Que esten bien