Cómo integrar el plugin de comentarios de Facebook en tu web

Desde hace un tiempo decidimos utilizar el plugin de comentarios de facebook para los testimonios de los alumnos asistentes a nuestros talleres y cursos. Tenemos la opción de moderar y contestar a los mensajes, además de ser muy sencillo su uso. 

Como principal ventaja de este sistema frente a otros, es la posibilidad de que el testimonio/comentario de un usuario aparezca publicado en su muro de Facebook, con un enlace a la página en cuestión. Además, los comentarios son mostrados según su relevancia para cada usuario, mostrándose primero aquellos comentarios de sus amigos o amigos de sus amigos, etc.

Pues bien, me disponía a agradecer a un alumno su comentario, cuando de repente me apareció el siguiente error:

Facebook tiene una herramienta llamada Lint que nos permite conocer cómo ve Facebook nuestra página. Introducimos la URL donde tenemos integrado el plugin de los comentarios y podemos observar que el resultado no es del todo bueno, dando varios errores:

Lo que nos está diciendo es que es necesario que la página donde integramos el plugin tenga una serie de meta-etiquetas sociales, que faciliten el cómo se comparten en las redes sociales. Entonces tendremos que agregar estas meta etiquetas en nuestra página web, ¿pero cómo se agregan las meta-etiquetas de Facebook en nuestra web?

En nuestro caso, siguiendo el mensaje que nos ha dado Lint, tenemos que añadir en un principio las siguientes etiquetas: og:title, og:type, og:url y og:image.

Pues bien, en este enlace podemos ver toda la información sobre estas etiquetas, observando que las cuatro etiquetas mencionadas son obligatorias y cada una tiene un uso, que se resume a continuación:

  • og:title es el título que aparecerá en el muro de un usuario
  • og:type indica el tipo de contenido de la página, habiendo una lista de valores permitidos para og:type. Si las categorías existentes no coinciden con la tuya, utiliza una propia anteponiendo un identificador que puede ser el nombre de tu web. En nuestro caso hemos utilizado "activity", pero en caso de querer utilizar una que no estuviera podríamos usar por ejemplo "ideinternet:workshop", aunque será considerada por Facebook perteneciente a la categoría "Other". Según Facebook, están monitorizando continuamente el uso de estas etiquetas, de modo que si mucha gente empieza a utilizar una, podrían añadirla a la lista.
  • og:url es la URL canónica de nuestra página, que será utilizada como identificador de la página. Atención si tenemos un gestor de contenidos que nos cambie la url cuando cambiamos el título, pues podría generar conflictos.
  • og:image es la imagen que solemos ver en el muro de los usuarios y páginas cuando comentamos con un enlace. Debería tener un formato 3:1

Sabiendo entonces qué significan estas etiquetas, ahora tenemos que incluirlas en el código de nuestra página, entre las etiquetas <head></head> como cualquier otra meta-etiqueta. En nuestro caso, para el Curso de Email Marketing utilizaríamos el siguiente código HTML:

<meta property="og:title" content=" Curso práctico de Email Marketing " />
<meta property="og:type" content="ideinternet:workshop" />
<meta property="og:url" content="http://ideinternet.com/cursos/curso-de-email-marketing" />
<meta property="og:image" content="http://ideinternet.com/curso-email-marketing.jpg" /> 

Como nuestra web está hecha con Drupal, la manera más sencilla de implementar estas etiquetas es con el módulo Open graph meta tags.

Una vez incluidas las meta-tags, volvemos a la herramienta Lint para comprobar si todo está bien. Parece que sigue faltando una etiqueta, eta vez la que indica quién es la persona física detrás de esta página. En nuestro caso, como somos dos (Curra García y Julio Fraile) utilizaré la etiqueta og:admins. Para ello tenemos que conocer el ID de estos dos usuarios en Facebook, para lo cual nos valemos de la API de Facebook.

Para conocer nuestro ID de Facebook, tenemos que acceder y hacer clic en la opción "Perfil". Entonces nos fijamos en la URL de la página (en mi caso sería facebook.com/julio.fraile) y podemos ver el nombre de usuario (si no has creado tu nombre de usuario aparecerá un número muy largo, que es tu ID). Pues bien, con nuestro nombre de usuario visitamos la siguiente URL graph.facebook.com/tunombredeusuario y podrás conocer tu ID.

Conociendo el ID de estos dos usuarios, procedemos a incluir la nueva meta-etiqueta, separando con una coma el ID de cada uno de los administradores:

<meta property="og:admins" content="123456,234567" />

Si verificamos de nuevo, la aplicación Lint nos indica que todo está correcto y podemos comprobar cómo indexa las etiquetas. 

Por último, obtenemos el código para el plugin en esta página  que en nuestro caso es así:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="http://ideinternet.com/cursos/curso-de-email-marketing" num_posts="20" width="500"></fb:comments>

Ya debería funcionar de nuevo el plugin. No obstante, en caso de tener comentarios antiguos que desees conservar, como es nuestro caso, parece que es necesaria una migración de comentarios, que todavía hay que investigar.

ACTUALIZACIÓN
Después de investigar un poco, he encontrado en esta página lo que andaba buscando: 

"... just add 'migrated=1' to the <fb:comments> tag..."

Es decir, que debemos seguir utilizando el código antiguo pero incluyendo el parámetro migrated, de tal forma que nos quedaría algo así:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<fb:comments migrated="1"></fb:comments>
<script type="text/javascript"> FB.init("YOUR_API_KEY_HERE", "ideinternet.com/xd_receiver.htm"); 

 

 

Acerca del Autor

Julio Fraile   

Licenciado en Informática por la Universidad Europea de Madrid, Julio cuenta con más de 10 años de experiencia en desarrollo web y marketing online en sectores diversos como la banca, telecomunicaciones, automóvil y turismo. Ha desarrollado su carrera entre España, EE.UU. y Alemania. Actualmente reside en Marbella, donde ofrece servicios de consultoría en Marketing Online a Pymes y personas emprendedoras. Desde 2010 imparte formación en Marketing Online y es ponente habitual en charlas, congresos y seminarios.

Conoce nuestros cursos y talleresAprende esto y mucho más de forma práctica con nuestro Curso de Facebook para Empresas

Entradas Relacionadas