Publicado el 22 comentarios

Integrar el sistema de comentarios de Facebook en WordPress

Integrar el 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

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”:

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:

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“.
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”:

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”:

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”:

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“:

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”:

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:

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:

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”:

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:

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:

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:

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

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“.
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”:

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”:

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”:

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“:

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“:

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“:

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:

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:

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:

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:

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:

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:

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”.

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:

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):

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!

Publicado el 13 comentarios

Entorno de pruebas: WordPress en la nube utilizando Koding

Entorno de pruebas: WordPress en la nube utilizando Koding

Si eres desarrollador de WordPress y necesitas crear un entorno en la nube para probar y depurar temas o plugins, esta guía te resultará útil ya que explicaremos el proceso de instalación de tu CMS favorito utilizando la aplicación en línea Koding.


Acerca de Koding ::::

Koding es una comunidad de y para desarrolladores con base en San Francisco California creada por Devrim Yasar y Sinan Yasar. Esta grandiosa plataforma permite a los usuarios crear entornos de desarrollo y aplicaciones en la nube, además incluye funcionalidades que permiten la colaboración e interacción entre los miembros de un equipo.

Entorno de pruebas: WordPress en la nube utilizando Koding

Koding está disponible a través de cuatro diferentes modalidades, tres de ellas son planes de pago que se ofertan desde los USD $12.50 mensuales, así como un plan completamente gratuito que incluye 1GB de RAM y 3GB de espacio en discosuficiente para crear nuestro sitio de pruebas con WordPress en la nube!


Registro y activación en Koding

Para este ejemplo utilizaremos el plan gratuito (Free) de Koding. Utiliza el navegador de tu elección, e inicia el proceso de registro visitando el siguiente enlace: koding.com/Pricing

Entorno de pruebas: WordPress en la nube utilizando Koding
Registro y activación en Koding

Antes de continuar es necesario que verifiques tu cuenta de correo electrónico con el código provisto por Koding:

Entorno de pruebas: WordPress en la nube utilizando Koding
Código de verificación

Regresa a tu entorno en Koding.com y actívalo haciendo clic sobre el botón “TURN IT ON”:

Entorno de pruebas: WordPress en la nube utilizando Koding
Activación de entorno de pruebas

El entorno de pruebas VM (Virtual Machine / Máquina Virtual) será creado, espera algunos minutos para que finalice el proceso en cuestión:

Entorno de pruebas: WordPress en la nube utilizando Koding
Proceso de creación de entorno de pruebas

Eso es todo!, tu entorno de pruebas VM con un nombre similar a “koding-vm-0” será creado de forma exitosa!


Instalación de WordPress en la nube

1. Instalación de MySQL

Una vez creado nuestro entorno “koding-vm-0”, el siguiente paso es instalar el gestor de base de datos “MySQL”. Para hacer esto utiliza el terminal incluido en tu entorno de desarrollo y ejecuta el siguiente comando:

Entorno de pruebas: WordPress en la nube utilizando Koding
Instalación de MySQL
Este paquete se encargará de ejecutar la instalación de MySQL en tu VM – más información aquí.

Escribe la contraseña que deseas utilizar con MySQL, el proceso de instalación de MySQL iniciará de forma automática:

Entorno de pruebas: WordPress en la nube utilizando Koding
Proceso de instalación de MySQL

Si todo fue bien al final visualizarás la leyenda “Installation complete”:

Entorno de pruebas: WordPress en la nube utilizando Koding
MySQL: Installation complete

2. Instalación de WordPress

Ahora que el gestor de base de datos está listo, es momento de instalar el software de WordPress, para lo cual Koding nos facilita dicho proceso, basta con utilizar el siguiente comando en terminal:

Entorno de pruebas: WordPress en la nube utilizando Koding
Instalación de WordPress
Este paquete se encargará de ejecutar la instalación de WordPress en tu VM – más información aquí.

Ingresa la contraseña que asignaste a MySQL. El proceso de instalación de WordPress iniciará en automático. Cuando haya finalizado se mostrará la URL donde fue instalado WordPress. En este ejemplo la URL asignada a nuestra instalación de WordPress es: mvkoendev.koding.io/wordpress

Entorno de pruebas: WordPress en la nube utilizando Koding
URL de WordPress

Visita la URL provista para iniciar la famosa “instalación de 5 minutos” de WordPress:

Entorno de pruebas: WordPress en la nube utilizando Koding
Instalación de 5 minutos de WordPress

Completa la información del instalador: título del sitio, nombre de usuario, contraseña, email. Cuando estés listo haz clic sobre el botón “Install WordPress”:

Entorno de pruebas: WordPress en la nube utilizando Koding
Información del instalador

La ventana Success! confirmará que WordPress ha sido instalado en tu VM de forma exitosa:

Entorno de pruebas: WordPress en la nube utilizando Koding
Instalación exitosa de WordPress

Accede al escritorio de WordPress con tu nombre de usuario y contraseña de registro. Enhorabuena!, tu sitio de pruebas con WordPress en la nube ha sido creado de forma exitosa!

A partir de aquí podrás realizar todas las pruebas que son de tu interés, instalar temas y plugins, trabajar en el diseño de tu sitio, gestión de usuarios, etc. Considera que por defecto la instalación de WordPress es en idioma inglés, pero puedes modificar y cargar archivos a través del entorno de desarrollo koding con un simple “arrastrar y soltar”, y por supuesto también existe la opción de hacerlo vía FTP:

Entorno de pruebas: WordPress en la nube utilizando Koding
“Arrastra y suelta” archivos para cargarlos a tu entorno de desarrollo koding

3. Instalación de FTP

El entorno de pruebas VM que hemos creado no incluye soporte “out of the box” para el protocolo FTP, pero podemos instalarlo utilizando el siguiente comando en terminal:

Entorno de pruebas: WordPress en la nube utilizando Koding
Instalación de FTP
Este paquete se encargará de ejecutar la instalación del protocolo FTP en tu VM – más información aquí.

Escribe tu contraseña – esta contraseña es la que asignaste a tu cuenta koding. El proceso de instalación de FTP tomará sólo algunos segundos, al finalizar se mostrará un resumen con los datos de acceso FTP:

  • HOST: mvkoendev.koding.io
  • USER: mvkoendev
  • PASS: contraseña de tu cuenta koding
Entorno de pruebas: WordPress en la nube utilizando Koding
Datos para acceso a FTP

Hecho lo anterior ya podrás utilizar el cliente FTP de tu preferencia para gestionar archivos en general, temas y plugins:

Entorno de pruebas: WordPress en la nube utilizando Koding
Cliente para protocolo FTP
Recuerda que tu instalación de WordPress se ubica en la siguiente ruta: /Web/wordpress/, no olvides que el plan gratuito de koding esta limitado a un máximo de 3GB de espacio en disco.

Actualizaciones en WordPress

Si requieres actualizar el core de WordPress, temas o plugins, tan sólo debes utilizar los siguientes datos para que WordPress pueda conectarse al servidor web:

  • Hostname: localhost
  • FTP Username: nombre de usuario de cuenta FTP
  • FTP Password: contraseña de cuenta FTP
Entorno de pruebas: WordPress en la nube utilizando Koding
Datos para actualizar WordPress

Comentarios finales

Si bien es posible crear un entorno de pruebas con WordPress en la nube utilizando servicios como Rackspace o Amazon, Koding permite hacerlo de forma gratuita mediante una VM con acceso a terminal y FTP, gestión de bases de datos SQL; y muy importante, utilizando una red exclusiva de desarrollo y colaboración.

Happy Blogging!

Regístrate en Koding.com!