> Manuales > Ayudas técnicas

Dificultades cuando fallan los social plugins de Facebook y en concreto el botón Me Gusta. Finalmente di con una solución al problema.

Llevo días pegándome con el botón "Me gusta" de Facebook, los ratos que buenamente he podido, porque sinceramente, no tengo todo el tiempo que me gustaría para dedicarle a estas cosas. En este artículo explicaré por donde ando, las soluciones que he encontrado hasta el momento y dejo abierta la puerta para vuestros comentarios y la posibilidad de que alguien pueda aportar algo más de luz a este asunto.

¿Es importante el botón social de Facebook? pues creo que lo suficiente para darle el tiempo necesario para dejarlo funcionando correctamente. Igual que otros plugins sociales de otras plataformas nos pueden dar notoriedad y algunas visitas extra.

El problema del botón Me gusta de Facebook

Nosotros tenemos el botón "Me gusta" implementado desde hace tiempo y por mis pruebas y la administración de DesarrolloWeb.com, que llevamos a cabo durante el día a día, todo funcionaba correctamente. Hasta que un día, sin mucha explicación, las cosas están cambiando y algunas veces no contabiliza los "Me gusta".

Nota: Fijarse en la fecha de este artículo, puesto que quizás en unos días, semanas o meses, este post ya no tenga mucha validez y hayan podido resolver estos problemas desde el propio Facebook.

Ante este problema, he revisado varias cosas sobre la implementación del botón y como digo, me he pegado a ratos con el bug durante varias jornadas:

Primero cambié el código del plugin social de Facebook. Ellos ofrecen dos posibilidades, una con IFRAME y otra con scripting Javascript "XFBML". Las dos me han dado problemas. Incluso el código que proporcionan ellos en el plugin parece tener algún error, porque me aparece un "&" en lugar de un "&" en una URL y eso según mi sentido común está mal. Pero bueno, puedo equivocarme.

No conseguí nada implementando códigos descargados de nuevo del sitio de Facebook. Pero es que el caso es todavía más extraño, porque que el botón "Me gusta" funciona bien en la mayoría de los post, pero en algunos no. En los que no funciona simplemente no contabiliza el voto. Al pulsar "Me gusta" aparece durante un segundo el voto contabilizado y después desaparece, descontándose el "Me gusta". Luego, en el perfil de mi cuenta Facebook tampoco aparece ese "Me gusta" fantasma.

Lo más raro es que, por mucho que busco un patrón que me permita entender por qué en unos post funciona y en otros no, no he encontrado nada en especial que me haga entender cuál es el fallo. Es decir, los post donde no funciona no tienen nada en especial que no tengan los post donde sí funciona.

Luego me he dedicado a trabajar con el Firebug, examinando la respuesta de la solicitud Ajax dada al pulsar el botón y si me puede dar alguna pista para saber reconocer esa posible causa. Tampoco conseguí nada en claro, por mucho que examine la respuesta, las cabeceras del HTTP, etc. no hay ninguna cosa que me aclare nada.

Con todo, me he dado cuenta que, por mucho que investigue, este botón es una caja negra. Si funciona, está todo bien, pero en el momento que algo no va, no permite mirar dentro para saber qué es lo que está haciendo funcionar el asunto mal. Ojo, que no me estoy quejando de que sea una caja negra, al contrario, así debe ser atendiendo al principio de encapsulación (algo deseable en los widgets o componentes), pero claro que si algo no funciona uno se siente frustrado por no saber qué hacer.

Solución encontrada! pero sigo sin saber qué es lo que pasa

Bueno, ahora voy a comentaros que he hecho para hacerlo funcionar, pero advierto que, a pesar que he conseguirlo, no puedo explicar qué es lo que está mal. El plugin ahora, "funcionar, funciona", pero esto no quiere decir que esté bien.

Claro que están los foros de Facebook para encontrar soluciones a estos problemas con sus plugins. Lo primero que me tranquiliza es ver que no soy el único con este problema. Hay diversas personas que experimentan exactamente lo mismo, que el "me gusta" no se contabiliza. Lo que es más difícil es encontrar una discusión en el foro que de una solución buena, principalmente porque muchas personas que participan son usuarios con el mismo problema y hay poco administrador de la red social que de respuestas "oficiales".

Pero bueno, al menos me he enterado del siguiente link: URL Linter.

En esa página podemos introducir una URL para que Facebook la explore y nos de alguna información sobre la página. Entre la información que da también nos muestra una implementación del botón "Me gusta" que sí funciona!!

He puesto en producción esa implementación del botón en nuestro sitio y ha funcionado bien de nuevo el botón en la URL donde no funcionaba antes. Pero otros post donde también fallaba, siguen sin funcionar. Esto me da a entender que verdaderamente hay un bug suelto en el botón que no es relativo a la implementación en nuestro sitio.

La solución que he encontrado es pasar por el "URL Linter" cada uno de los post que voy encontrando donde no funciona el botón "Me gusta". Una vez se introduce allí la URL del post conflictivo, el plugin social comienza a funcionar bien.

No creáis que estoy satisfecho con el modo de resolver este problema. En la universidad me enseñaron justamente que, a pesar que algún programa informático pueda funcionar, no tiene por qué haberse implementado una buena solución. Me conformaré de momento con esta vía Durante unos días me conformé con esta vía para validar botones Me gusta, pero estaré vigilado unos días (o semanas) a ver si Facebook publica alguna solución oficial o modifica el plugin "Me gusta", para que no de errores aleatoriamente en algunos post pero durante una semana hemos observado que no es una solución definitiva y que, a pesar de enviar la dirección de nuestra página a URL Linter, en ocasiones no arreglaba el problema, o mejor dicho, no lo arreglaba instantáneamente. Al cabo de un rato de enviar el link al URL Linter sí que funcionaba, pero con ello la solución se me antojaba peor todavía. También me encomiendo a los lectores de este artículo que quizás tengan otras experiencias y hayan llegado a otras soluciones más interesantes. Afortunadamente, hemos dado con otra solución mucho más atractiva, en parte gracias a los comentarios de las personas que han leído este texto.

Etiquetas META de Open Graph de Facebook

Después de una semana de experiencias basadas en la anterior solución del URL Linter, hemos recibido varios comentarios que nos han dado pistas sobre qué podría estar pasando. En el comentario de Goyito nos hace referencia a unas etiquetas META que realmente no teníamos tampoco en la página. En el URL Linter nos daba algunas advertencias sobre la falta de esas META, como Goyito mismo apuntaba.

Sin embargo, tengo que admitir que la posible solución estaba delante de nuestras narices. En la propia página del plugin en Facebook, donde generas el código para insertar en la web, un poco más abajo hablan de un "step 2", con otro formulario para generar una serie de etiquetas META para definir los "Open Graph Tags". Hemos incluido esas etiquetas en todos los artículos donde está el botón Me gusta y de momento parece que todo funciona correctamente.

Espero que no sea otra solución a medias y es algo que vamos a ir observando durante los próximos días. Por supuesto, si tengo otras novedades que comunicar, actualizaré el artículo.

Puedes consultar el código fuente de esta misma página para ver cómo hemos insertado esas etiquetas META, que Facebook parece que busca en nuestras páginas. Puedes encontrar esas META en el HEAD. No obstante, voy a poner aquí el código que nosotros estamos utilizando, para una referencia más rápida.

<meta property="og:title" content="Problema y solución sobre el Me Gusta de Facebook" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.desarrolloweb.com/articulos/problema-solucion-me-gusta-facebook.html" />
<meta property="og:image" content="http://www.desarrolloweb.com/images/logo-desarrolloweb100x60.gif" />
<meta property="og:site_name" content="DesarrolloWeb.com" />
<meta property="fb:admins" content="0000000000" />

Como digo, vosotros podéis generar vuestras META desde la página para generar el código del botón. Lógicamente, tendréis que personalizar vuestras META para cada artículo o página donde se desee colocar el botón. En el campo "fb:admins" tenéis que poner el identificador del perfil de los administradores de la página (los usuarios de Facebook que hacen de webmasters o editores de vuestro sitio web), separados por comas si son más de uno. Ese identificador aparece en el formulario para generar el botón Me gusta, si es que tenéis iniciada la sesión en Facebook.

Conclusión

Bueno, como habéis visto, este artículo trata mucho de prueba y ensayo. Afortunadamente ya puedo escribir esta conclusión pues parece que esta solución es definitiva. Ahora bien, quiero expresar mi descontento con Facebook por modificar el funcionamiento del plugin y no avisar (si avisaron a alguien, su manera de comunicar fue bastante deficiente). Tampoco me gusta que nos obliguen a insertar nuevo código en todas las páginas del sitio, con etiquetas META que en principio solo están para satisfacer sus servicios. No es que pese mucho, en bytes, ese nuevo código a insertar en cada artículo, pero si lo multiplicamos por varios millones de páginas vistas, pues ya empieza a ser representativo.

Aparte de todo, esa información que colocamos en las META, hasta ahora, ellos la estaban extrayendo a través del procesamiento de nuestras páginas ¿Por qué ahora la tenemos que hacer explícita? Debe haber alguna razón, pero tampoco he visto una comunicación al respecto. Entiendo que debe tener algo que ver con Facebook Open Graph, presentado hace poco. Pero claro que nosotros, simples mortales que aun no conocemos todos los detalles de esa nueva iniciativa de Facebook, necesitamos que haya una comunicación más fluida para no darnos con la cabeza contra la pared por culpa de que las cosas dejen de funcionar de la noche a la mañana y sin motivo aparente.

Espero que los problemas de este botón "me gusta", sean más fáciles de solucionar gracias a este artículo. Por mi parte, Facebook se ha ganado un "No me gusta". Se agradecen comentarios con vuestras experiencias y opiniones.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual