Cómo colocar comentarios de Facebook en Blogger 2018

Los comentarios son importantes para el desarrollo de un blog de cualquier temática ya que aportan valor a la publicación que se está compartiendo, todos los blogs del Blogger al momento de crearse traen sus propias cajas de comentarios para cada entrada, pero existe una caja en particular que es sumamente importante y esa es la de los comentarios de Facebook, hoy en día esta red social es muy popular y sus proyecciones para el futuro son prometedoras y por eso se debe contar con una audiencia activa allí que comparta nuestras publicaciones y aporte valor al blog desde su cuenta escribiendo comentarios en las entradas, pero para lograr eso se debe incorporar al blog dicha caja de comentarios ya que Blogger no lo trae por defecto.

Algunas personas prefieren los comentarios de Facebook más que los de Blogger y bloquean los que tiene la plataforma, como tal eso no debes hacerlo ya que ambas cajas de comentarios son fundamentales para un blog recuerda que ambas le ofrecen a los lectores formas de interactuar con la bitácora y de paso son las personas las que deciden con que cuenta van a comentar, recuerda que la caja de Facebook es solo para los usuarios de esa red social y la de Blogger permite que las personas utilicen sus cuentas de Google+, OpenID, WordPress, AIM, TypePad, LiveJournal o de forma anónima. En pocas palabras si quitas la caja de comentarios de Blogger estas limitando el público que puede aportarle valor a tu post, así que lo que debes realizar es combinar ambas cajas.

¿Cómo instalo la caja de comentarios de Facebook en mi blog?

La instalación de esta caja en un blog es sumamente sencilla pero para Blogger se tienen ciertos detalles si quieres que funcione igual que en este blog, si te das cuenta en la parte de abajo tengo un botón spoiler el cual si haces clic te despliega los comentarios de Facebook y más abajo puedes observar que los que trae el blog no los he eliminado para no limitar a mis lectores a que comenten los post.

¿Cómo colocar los comentarios de Facebook en Blogger?

Antes de poder instalar la caja de comentarios de Facebook en tu blog debes crear una aplicación en Facebook Developers con la cual podrás moderar todos los comentarios, ya que si no lo haces corres el riesgo de que una tercera persona con malas intenciones haga spam en tus comentarios. Para crear dicha APP debes hacer lo siguiente:

Dirígete a Facebook Developers.
Estando allí en la parte superior derecha te aparecerá un botón de color verde que dice “+ Agregar una nueva aplicación”, debes presionar ese botón.
Una vez que lo hayas presionado te aparecerá una ventana modal en la cual deberás colocar el “Nombre para mostrar que es el nombre de tu APP” y justo abajo debes colocar el “Correo electrónico de contacto” que en este caso sería el que está asociado a tu cuenta de Facebook o el correo personalizado de tu blog, una vez que coloques ambas cosas debes dar clic donde dice “Crear identificador de la aplicación”, al dar clic allí te aparecerá un código captcha que debes resolver para que Facebook confirme que no eres un robot.
Una vez que hagas todo lo que explique anteriormente la aplicación se encontrara totalmente creada, en la parte superior te aparecerá el identificador de la aplicación “ID” y este lo debes copiar y pegar en un bloc de notas, más adelante explicare la configuración de la APP después de crear la caja de comentarios.

Una vez que tengas lista tú APP, debes proceder a crear e instalar la caja de comentarios, para eso debes hacer siguiente:

Tienes que ir a Facebook Developers Plugins.
Una vez que entre a la página, en el lateral izquierdo debes seleccionar la opción “Comentarios”, (ten en cuenta que la ubicación de esto puede variar según los estilos de la página de Facebook Developers, se debe destacar que ellos suelen cambiar su diseño cada dos o tres años).
Abajo te saldrá un generador de códigos, allí puedes colocar la URL de tu blog, definir el ancho de la caja de comentarios y el número de publicaciones que aparecerán en la lista de comentarios, (allí puedes colocar cualquier URL ya sea la de tu blog o dejar la de Facebook, porque más adelante el código que nos arroje el generador se deberá editar para que sea compatible con las entradas de un blog Blogger).
Después de hacer lo que dije anteriormente debes dar clic en el botón obtener código y Facebook te arrojara primero que nada su SDK el cual debes colocar directamente en el código fuente de la plantilla y abajo esta el div que contiene la caja, ambas cosas debes copiarlas, sin embargo el SDK te lo dejare aquí, si quieres lo puedes copiar en el cuadro de texto que esta abajo o directamente copiarlo en Facebook:

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.10&appId=aquí debes colocar el ID de tu APP";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

El ID de la APP que creaste antes de generar los códigos de la caja de comentario tienes que colocarlo donde dice “aquí debes colocar el ID de tu APP”, pero si generaste el código de arriba estando logueado en Facebook, de forma automática el ID de tu aplicación se coloca allí, si ocurre eso no debes copiar el HTML que esta arriba y en su lugar copia directamente el SDK de Facebook en el mismo generador de código. Ahora bien una vez que tengas listo el SDK cópialo en el bloc de notas que más adelante lo utilizaras.

Ya la primera parte esta lista hasta este punto, ahora se debe configurar la caja de comentarios; por defecto Facebook te arroja el DIV original:

Pero dicho DIV debes modificarlo para que la caja pueda ser compatible con las entradas del blog, si se deja la caja tal cual como la da el generador de código con la URL de la página principal del blog esta serviría pero solo para la página principal y no para las entradas, aunque la misma se colocara en todas las publicaciones igualmente no serviría y para arreglar este problema se debe hacer siguiente:

Donde dice data-numposts="5" cámbialo por data-numposts="10", así por cada entrada se mostraran diez comentarios y si se quieren ver más porque la publicación tiene muchos solo basta con hacer clic en cargar más comentarios.
Elimina data-width="500" y reemplázalo por width='100%', de esta forma la caja abarcara el cien por ciento del ancho del contenedor principal tal y como pasa en este blog, si quiere puedes usar la propiedad max-width y definir un ancho máximo en píxeles, pero es opcional hacerlo.
El data-href="URL del blog" debes eliminarlo para que los comentarios no sean de la URL principal de la bitácora, en su lugar debes colocar expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id', estas son etiquetas genéricas que describen el título de la entrada y el ID de cada entrada que corresponde a las URLs de cada publicación. Haciendo lo que dije anteriormente te quedara de la siguiente manera el DIV:

No deje el código modificado de la caja de comentarios encerrado en un cuadro de texto para que no lo puedas copiar fácilmente, la idea es que aprendas a realizar los cambios y comparar si te quedo bien o mal, después de todo lo que estoy buscando es que aprendas cómo colocar los comentarios de Facebook en Blogger y no que solo copies y pegues todo en tu blog, debes ser un profesional en lo que haces.

Ahora bien ya teniendo la caja de comentarios modificada para que pueda ser usada en las entradas de Blogger junto con el SDK de Facebook, es la hora de añadir ambos a la plantilla del blog para eso debes seguir los siguientes pasos:

Estando en tu blog debes dirigirte a “Tema” y pulsar el botón “Editar HTML”.
Si utilizas una plantilla para escritorio y aparte usas la que trae Blogger por defecto para dispositivos móviles debes buscar dos líneas HTML diferentes para que los comentarios puedan aparecer.
Para la plantilla de escritorio debes buscar “<div class='post-footer-line post-footer-line-3'>” y justo debajo de esa línea HTML debes pegar el div de comentarios de Facebook.
Para la plantilla de dispositivos móviles debes buscar “<div class='post-footer-line post-footer-line-2'>”, si te aparece dos veces fíjate en la segunda ocasión y justo debajo de esa línea HTML debes pegar el código de la respectiva caja de comentarios de Facebook.
Busca la etiqueta de cierre </body> y pega el SDK de Facebook que contiene el script y el ID de tu APP que hará posible usar los comentarios junto con el código de la respectiva caja de comentarios de Facebook. (Recuerda que después de cada & del SDK debes colocar amp; porque sino lo haces al guardar el tema te saldrá un error).
Por último ambos div de comentarios que pegaste abajo de las líneas <div class='post-footer-line post-footer-line-3'> y <div class='post-footer-line post-footer-line-2'> debes encerrarlos en el código <b:if cond='data:blog.pageType == "item"'> adentro de aquí deben ir los div </b:if>. (Esto debes hacerlo con el fin de que en la página principal del blog no aparezca una caja de comentarios por cada entrada porque se verá feo).
Una vez que realizaste lo que te dije debes proceder a guardar la plantilla.

Ya teniendo ambos códigos en la plantilla del blog los comentarios no serán visibles todavía hasta que agregues algo más que es fundamental para poder activarlos, esto es lo siguiente:

Busca “<html”, esta etiqueta es la apertura de todo el código de la plantilla así que se encuentra en la primera o segunda línea del código HTML.
Justo al lado de ella debes pegar xmlns:fb='http://www.facebook.com/2008/fbml', te debe quedar así: “<html xmlns:fb='http://www.facebook.com/2008/fbml”.
Guarda la plantilla nuevamente y revisa tus entradas tanto en móviles como en una computadora de escritorio para que veas que los cambios surtieron efecto y los comentarios de Facebook se encuentran activos.

Si en tu blog no utilizas la plantilla que trae Blogger por defecto para dispositivos móviles como hago yo en este blog porque mi tema es completamente responsive y se adapta a cualquier tamaño de pantalla, no es necesario que después de la línea <div class='post-footer-line post-footer-line-2'> pegues el código modificado de los comentarios de Facebook, porque con el que se encuentra después de la línea <div class='post-footer-line post-footer-line-3'> basta para que aparezca la caja en ambos tipos de dispositivos. Si crees que ya todo termino no te hagas muchas ilusiones, todavía faltan cosas muy importantes que debes configurar en los comentarios de Facebook.

Modera los comentarios de Facebook de las entradas del blog

Es importante que moderes los comentarios de Facebook en tu blog porque haciendo eso evitas el spam, aunque esta red social tiene un filtro avanzado contra el spam no esta demás moderar todos los comentarios, porque se puede escapar alguno por parte de un tercero que no se asocie al tema de una publicación o que simplemente quiera dejar un enlace externo.

La moderación se da gracias a haber asociado la caja de comentarios con la APP que se creó en un principio, como tal ese es el fin de dicha aplicación, si analizas todo correctamente no es necesaria la APP para que la caja de Facebook funcione en el blog, pero sin la aplicación no se podrían realizar los procesos de moderación, ahora bien estando en el código fuente de tu blog debes buscar “<head>” y después de esa línea debes pegar dos meta etiquetas fundamentales para la moderación, estas son:

Una vez que hagas esto estando logueado con tu perfil, debes ir a la herramienta de moderación de comentarios de Facebook y allí debes seleccionar la APP de los comentarios.
Luego debes dar clic en Configuración en la parte superior, derecha y se abrirá una ventana modal.
En la ventana modal debes realizar algunos cambios, entre ellos debes ordenar los comentarios por “más recientes”, te recomiendo que más abajo en la herramienta no permitas que las personas puedan adjuntar contenidos multimedia porque eso retrasaría la carga de tu blog. En donde dice activar notificaciones debes marca “activadas”.
Luego debes cambiarte a “Reglas de moderación”, allí tienes que limitar la longitud de comentarios a 10.000 caracteres, te recomiendo que no cierres la cadena de comentarios de Facebook para que las personas en el transcurso de los meses y años puedan seguir comentando las entradas, activa un filtro de spam riguroso y en moderación selecciona la opción “cerrado” para que de esa forma todos los comentarios pasen primero a la bandeja de espera antes de que se hagan públicos.
En la pestaña “moderadores” se encontrará tu perfil de Facebook añadido por defecto ya que eres el dueño de la APP, desde allí puedes añadir más personas si lo deseas para que moderen los comentarios.
En la otra pestaña “Lista negra” puedes bloquear ciertas palabras, por ejemplo yo allí tengo bloqueada una lista completa de las groserías y comentarios malsanos más frecuentes que suelen hacer las personas que quieren dañar a terceras partes, te recomiendo que hagas lo mismo.
Por último tienes la pestaña de “usuarios bloqueados”, desde allí puedes bloquear a todas aquellas personas que no quieres que comenten en tus entradas por equis motivo, ya sea porque no aportan valor con sus comentarios o porque busca la manera de ver cómo te hace spam frecuentemente.

Conclusiones y recomendaciones

Se puede concluir diciendo que los comentarios de Facebook son muy importantes para un blog ya que permiten que las personas puedan interactuar con su perfil en tu bitácora y de esa forma mantener activa una audiencia más amplia. Recuerda seguir todos los pasos que coloque en esta entrada al pie de la letra para que todo te salga bien y no cometas ningún error mientras haces todo el proceso de creación e inserción de la caja de comentarios de Facebook.

Te recomiendo ampliamente que moderes todos tus comentarios no te conformes con haber creado la caja, procura leer todo antes de que lo publiques ya que si algunos comentarios tienen enlaces tóxicos pueden perjudicarte. Los comentarios de Facebook son un complemento para el blog y no debes dejarlos por fuera en ningún momento así que úsalos. Espero que esta entrada te sea de ayuda y te haya gustado, hasta la próxima.

Condicional para que los comentarios solo aparezcan dentro de las entradas y no en la página principal

<b:if cond='data:blog.pageType == "item"'> Aquí adentro debe ir el DIV de comentarios de Facebook </b:if>

Ejemplo:

<b:if cond='data:blog.pageType == "item"'><div class='fb-comments' data-colorscheme='light' data-num-posts='10' width='100%' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id'/></b:if>