Instalar Facebook Comments en WordPress

En las últimas semanas he estado integrando la funcionalidad Facebook Comments en un par de blogs, podéis ver los resultados en El Rey de la Magia.

En esta entrada voy a explicar los motivos que me han llevado a realizar esta integración y los pasos a realizar para lograrla y usarla de forma efectiva.

¿Qué conseguimos instalando el sistema de comentarios de Facebook?

  • aumentamos la visibilidad de los comentarios que se publiquen en nuestros blog ya que además de publicarse en la entrada correspondiente se publican en el muro de Facebook del usuario que hace dicho comentario (viralidad)
  • aumentamos tráfico hacia nuestro blog (captación de tráfico)
  • reducimos la carga de la base de datos de nuestro blog ya que no se guarda nada en la misma (optimización)
  • facilitamos la publicación de comentarios ya que el usuario puede ser menos reacio a darnos sus datos (privacidad)

Por contra, perdemos el control del contenido de dichos comentarios, que aunque pueden ser moderados y eliminados de nuestra entrada no se borran totalmente, siguen en el muro del usuario.

Y ahora, el tutorial de integración de Facebook Comments en WordPress.

1. Validar tu usuario de Facebook como Developer

Para poder integrar correctamente la funcionalidad es necesario crear una App de Facebook y para ello nuestro usuario de Facebook debe estar validado como “Desarrollador” en dicho sistema. Es gratis.

Accede a http://developers.facebook.com/  y sigue los pasos para Validar tu usuario (si no lo tienes ya validado). La validación pasa por que Facebook te envíe un SMS con un código que deberás insertar en su página.

Esto solo sucede la primera vez, luego ya se pueden crear tantas aplicaciones como se quiera sin que sea necesario volver re-validar.

2. Crear una aplicación en Facebook

Accede a https://developers.facebook.com/apps y crea una “Nueva Aplicación” (botón arriba a la derecha) especificando que se integra con Facebook como “Sitio Web” e indicando el “Site Domain” y la “URL del sitio” correctos. Ponle un nombre que te sirva a ti para saber qué aplicación es, pero no tiene visibilidad para nada.

Tras crear la aplicación apúntate su App ID/API Key (el “código secreto de la aplicación no lo vas a necesitar).

3. Widget de Facebook Comments

Accede a http://developers.facebook.com/docs/reference/plugins/comments/ y crea tu widget seleccionando:

  • número de comentarios
  • ancho del bloque
  • diseño (solo hay claro u oscuro)

Tras clicar en “Get Code” debes elegir la App que has creado en el paso 1 y el Formato XFBML. Verás una pantalla parecida a:

Guárdate los códigos que aparecen en la primera y la tercera caja (yo la segunda la he ignorado y me funciona).

4. Modificar el código

Es necesario adaptar el código de la caja 3 para que asigne correctamente los comentarios a la URL de la entrada del blog. Sin hacer este cambio, todos los comentarios contarían en la “Home” de tu blog.

El código modificado es:

<fb:comments href="<?php echo get_permalink(); ?>" num_posts="10" width="610" notify="true"></fb:comments>

5. Obtener los metatags y adaptarlos a tu blog

Este fué el paso que más me costó encontrar y fue gracias a la herramienta de depuración que ofrece el mismo Facebook: http://developers.facebook.com/tools/debug. Usándola para comprobar si todo estaba correcto me daba algunos fallos e investigando logré averiguar que era necesario incluir unos metatags de la API de Facebook.

Estos metatags, ya adaptados a WordPress son:

<!-- Tags Facebook -->
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="Website" />
<meta property="og:url" content="<?php echo get_permalink(); ?>" />
<meta property="og:site_name" content="Nombre del Site" />
<meta property="fb:admins" content="ID Usuario Facebook" />
<meta property="fb:app_id" content="ID App" />
<!-- End Tags Facebook -->

Modifica “Nombre del Site” con el de tu blog, “ID Usuario Facebook”  con el de tu usuario de Facebook y “ID App” con el número que te apuntaste en el paso 2 de este manual.

El ID de Usuario de Facebook es difícil de encontrar. Un truco es ir a “Crear un album de fotos” y apuntar el id que aparece en la URL

6. Insertar los códigos en tu plantilla WordPress

Nos acercamos al final de esta integración. En realidad solo nos queda insertar todo el código que hemos obtenido hasta ahora en diferentes archivos de la plantilla de nuestro blog y verlo funcionar.

  • El código de la caja 1 debes insertarlo después de la etiqueta <body>, normalmente en el fichero header.php de tu plantilla
  • El código de la caja 3 modificado (paso 4) debes insertarlo donde quieras que aparezcan los comentarios, en el fichero single.php de tu plantilla
  • Los metatags modificados (paso 5) debes insertarlos antes del cierre de la etiqueta </head>, también en el fichero header.php

7. Contador de comentarios

Si quieres puedes añadir un contador que indica el número de comentarios que tiene una URL (o una entrada en nuestro caso) solo hay que añadir este código donde quieras que aparezca el número de comentarios de la entrada en el fichero single.php de tu plantilla (yo lo puse justo encima de donde están los comentarios).

<fb:comments-count href=<?php echo get_permalink(); ?>></fb:comments-count> comentarios

8. Moderación de Comentarios

Ahora ya deberías tener los Facebook Comments funcionando, para probarlo escríbete tu mismo un comentario o pídele a un amigo que lo haga y tú respóndele…

Podrás ver todos los comentarios que se hagan en tu blog en http://developers.facebook.com/tools/comments, donde también podrás modificar algún parámetro de la configuración de la aplicación como añadir moderadores, el nivel de moderación (aprobar directamente o bajo supervisión), una “lista negra” de palabras prohibidas (seguridad y antispam), …

Cosas que mejoraría

Es difícil saber cuando se crea un comentario nuevo, no hay (o no he encontrado) una manera de enviar notificaciones por email cuando se hace un nuevo comentario.

En la herramienta de moderación todos los comentarios de todas las entradas se ven mezclados un una lista… si tienes muchos comentarios o muchas entradas puede ser caótico.

Un nivel mayor de personalización del diseño gráfico o la posibilidad de elegir entre más templates.

Bueno, espero que este tutorial os sirva y si sabéis como mejorarlo o encontráis algún problema no dudéis en utilizar los comentarios de esta entrada.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>