Sistema de comentarios de Facebook en WordPress

Es una realidad que muchos administradores de un sitio web con WordPress suelen optar por cambiar la funcionalidad nativa de comentarios, y en su lugar integrar sistemas alternativos que resultan ser más eficientes para los lectores y administradores.

Uno de estos sistemas alternativos y con gran popularidad es la funcionalidad “Comentarios” desarrollada por Facebook. Así que en esta entrada vamos a mostrarte cómo integrar el sistema de comentarios de Facebook en WordPress a través de:

(A) Plugin gratuito
(ideal para usuarios básicos)

(B) De forma manual
(usuarios avanzados)

Para ejemplificar los siguientes procedimientos vamos a utilizar nuestro sitio de desarrollo con WordPress que usa un entorno de pruebas de Koding (si eres desarrollador no olvides revisar esta publicación!).

(A) Integrar el sistema de comentarios de Facebook en WordPress vía plugin

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Plugin para WordPress: Facebook Comments

Paso 1: Instalación de plugin “Facebook Comments”

Para comenzar asegúrate de instalar y activar el plugin gratuito “Facebook Comments” desarrollado por Alex Moss. Para atender su configuración ve al menú lateral izquierdo “Ajustes” opción “Facebook Comments”:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Ajustes de “Facebook Comments”

Observa que el plugin requiere una aplicación Facebook para su funcionamiento, así como un elemento que lleva por nombre “APP ID“, explicaremos el proceso necesario para obtener ambos elementos:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Crea una aplicación Facebook y pega aquí su “APP ID”

Paso 2: Creación de aplicación Facebook

El segundo paso consiste en atender la creación de la aplicación Facebook, visita el sitio especial “Facebook Apps”. Clic al botón “Register Now” para registrarte como “Desarrollador” utilizando tus datos de acceso de perfil:

Si ya estás registrado en el programa de desarrolladores, haz clic sobre el botón “Create a New App“.
tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Regístrate como “Desarrollador”

Una vez que completes la verificación de tu cuenta, serás redireccionado a la página “Add a New App”, la cual nos permitirá crear la aplicación solicitada por el plugin. Elige la plataforma “Website”:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Selecciona la opción “Website”

Asigna un nombre a la aplicación. Cuando estés listo clic sobre el botón “Create New Facebook App ID”:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Asigna un nombre a la aplicación

Elige una categoría, e inicia el proceso de creación con un simple clic al botón “Create App ID”:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Elige una categoría para la aplicación Facebook

En la página “Quick Start for Website” desplázate al final de la página, en la sección “Tell us about your website” escribe la URL de tu sitio web. Cuando estés listo para continuar clic al botón “Next“:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Escribe la URL de tu sitio web

Ahora ve a la sección “Nex Steps” y haz clic sobre el enlace “Skip to Developer Dashboard”:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Clic sobre el enlace “Skip to Developer Dashboard”

Una vez dentro del “Dashboard” o panel de control de tu aplicación, asegúrate de copiar la “App ID” proporcionada:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Copia el “App ID” de tu aplicación Facebook

A continuación ve al menú lateral “Settings”. En el campo “App Domains” escribe nuevamente la URL de tu sitio web y guarda los cambios:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Escribe la URL de tu sitio web en el campo “App Domains”

Enhorabuena!, hemos finalizado el proceso necesario para la creación de la aplicación Facebook.


Paso 3: Configuración de plugin “Facebook Comments”

Regresa a tu sitio web con WordPress. En los ajustes del plugin pega la “APP ID”:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Pega el “APP ID” en los ajustes del plugin

Considera que en la misma página de ajustes del plugin, el campo “Moderator” te permitirá añadir los usuarios que tendrán la facultad de moderar los comentarios publicados, este ajuste funciona a través del ID de perfil de usuario de Facebook:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Escribe aquí el ID de perfil de usuario de Facebook de cada moderador

Para obtener el ID de perfil de Facebook puedes utilizar una página similar a “findmyfacebookid.com”. Asegúrate de separar con comas y sin espacios cada uno de los ID’s de los moderadores.

El plugin incluye ajustes adicionales que te permitirán activar HTML5, definir el idioma, modificar la combinación de colores, activar el número de comentarios, mostrar un contador, entre otros:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Ajustes adicionales del plugin

No olvides guardar los cambios cuando estés listo.


Sistema de comentarios de Facebook en acción

Hecho lo anterior, la caja de comentarios de Facebook será habilitada en las publicaciones de tu sitio web, permitiendo a los usuarios iniciar sesión con su perfil social y publicar comentarios:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
“Facebook Comments” en acción

Descargar Plugin: Facebook Comments


(B) Integrar el sistema de comentarios de Facebook en WordPress de forma manual

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress

De forma similar al primer procedimiento, visita “Facebook Apps” para comenzar la creación de la aplicación comentarios. Clic al botón “Register Now” para registrarte como “Desarrollador”. Utiliza tus datos de acceso de perfil y completa la verificación de tu cuenta desarrollador:

Si ya estás registrado en el programa de desarrolladores, haz clic sobre el botón “Create a New App“.
tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Regístrate como “Desarrollador”

En la página “Add a New App” asegúrate de elegir la plataforma “Website”:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Selecciona la opción “Website”

Asigna un nombre a la aplicación. Cuando estés listo clic sobre el botón “Create New Facebook App ID”:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Asigna un nombre a la aplicación

Elige una categoría, e inicia el proceso de creación con un clic al botón “Create App ID”:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Elige una categoría para la aplicación Facebook

En la página “Quick Start for Website” ve a la sección “Tell us about your website” y escribe la URL de tu sitio web. Cuando estés listo clic sobre el botón “Next“:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Escribe la URL de tu sitio web

Para este procedimiento de integración manual, en la sección “Nex Steps” elige la opción “Social Plugins“:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Elige la opción “Social Plugins“

Serás redireccionado en automático a la página “Plug-ins sociales“, busca la sección que lleva por nombre “Comentarios” y da clic sobre el botón “Web“:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Clic sobre el botón “Web“ de la sección “Comentarios”

La página “Comments Plugin” incluye un generador del código necesario para integrar la funcionalidad a WordPress. Asegúrate de escribir la URL de tu sitio web en el campo “URL to comment on“, también puedes definir el ancho de la caja de comentarios (Width), el número de comentarios a mostrar (Number of Posts), y el orden predefinido (destacados, más recientes, más antiguos). Haz clic sobre el botón “Get Code” cuando hayas terminado:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Escribe la URL de tu sitio web y obtén el código de integración

Una ventana emergente te proporcionará el código de la aplicación comentarios que deberás incluir en el tema activo en tu sitio web. Observa que se incluyen dos fragmentos de códigos, el primero deberás incluirlo justo después de la apertura de la etiqueta <body>, el segundo debe colocarse exactamente donde deseas mostrar el cuadro de comentarios de Facebook:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Copias los fragmentos de código y pégalos en los archivos correspondientes de tu sitio web
El procedimiento para incluir ambos códigos será diferente para cada tema/framework, ya que dependerá de la estructura, características, y opciones disponibles.

Una vez que hayas incluido los dos fragmentos de código en tu tema, es necesario activar el modo público de la aplicación. Para hacer esto haz clic sobre el enlace “App Dashboard” de la caja en color amarillo:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Clic sobre el enlace “App Dashboard”

Antes de activar el modo público, ve a la sección “Settings” del menú lateral izquierdo. Asegúrate de escribir la URL de tu sitio web en el campo “App Domains“, y añade un email válido de contacto en el campo “Contact Email“, no olvides guardar los cambios:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Escribe la URL de tu sitio web y añade un email válido de contacto

Ahora regresa a la sección “Status & Review” del menú lateral izquierdo. En la pestaña “Status” activa el switch a la opción “Yes” para hacer pública la aplicación en cuestión:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Activa el switch a la opción “Yes” para hacer pública la aplicación en cuestión

Eso es todo!, la caja de comentarios de Facebook será habilitada en las publicaciones de tu sitio web:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Aplicación comentarios de Facebook en acción

Moderación de comentarios vía developers.facebook.com

Independientemente del tipo de integración de los comentarios de Facebook en tu sitio web, es posible moderarlos a través del siguiente sitio web oficial (deberás iniciar sesión con tu perfil de usuario): “developers.facebook.com/tools/comments”.

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Página principal de la herramienta comentarios de Facebook

Utiliza el enlace “Settings” para acceder a los ajustes principales de los comentarios:

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Moderación de comentarios vía developers.facebook.com

En la ventana emergente desplegada es posible añadir moderadores (los usuarios deberán estar en tu lista de amigos), especificar palabras prohibidas, modificar el orden de los comentarios, y elegir un valor por defecto de moderación (Público, Revisar, Cerrado):

tutoriales-y-cursos-webmaster-sistema-de-comentarios-de-facebook-en-wordpress-tutoriales-y-cursos-webmaster-integrar-el-sistema-de-comentarios-de-facebook-en-wordpress
Ajustes de los comentarios de la aplicación Facebook

Comentarios finales

Un sitio que ofrece a sus lectores y usuarios formas más eficientes para expresar sus opiniones, permitirán la formación de una comunidad, alentarán una mayor participación y reducirán el factor del anonimato. Esta integración del sistema de comentarios de Facebook en WordPress, también resultará útil para obtener tráfico adicional a través de la enorme red social.

Happy Blogging!

 

Deja un comentario

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

*
*