¿Te gusta esto?... Entonces que no se te olvide compartirlo ;)

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:

  1. Dir铆gete a Facebook Developers.
  2. 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.
  3. 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.
  4. 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:

  1. Tienes que ir a Facebook Developers Plugins.
  2. 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).
  3. 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).
  4. 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:

<script>(function(d, s, id) {
  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&amp;version=v2.10&amp;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:

<div class="fb-comments" data-href="URL del blog" data-width="500" data-numposts="5"></div>

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:

  1. 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.
  2. 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.
  3. 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:

<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'/>

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:

  1. Estando en tu blog debes dirigirte a “Tema” y pulsar el bot贸n “Editar HTML”.
  2. 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.
  3. 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.
  4. 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.
  5. 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).
  6. Por 煤ltimo ambos div de comentarios que pegaste abajo de las l铆neas <div class='post-footer-line post-footer-line-3'><div class='post-footer-line post-footer-line-2'> debes encerrarlos en el c贸digo <b:if cond='data:blog.pageType == &quot;item&quot;'> 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).
  7. 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:

  1. 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. 
  2. 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”.
  3. 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:


  1. 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.
  2. Luego debes dar clic en Configuraci贸n en la parte superior, derecha y se abrir谩 una ventana modal.
  3. 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”.
  4. 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.
  5. 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.
  6. 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.
  7. 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 == &quot;item&quot;'> Aqu铆 adentro debe ir el DIV de comentarios de Facebook </b:if>

Ejemplo:

<b:if cond='data:blog.pageType == &quot;item&quot;'><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>

Usamos cookies propias y de terceros que recogen datos sobre sus h谩bitos de navegaci贸n. Si contin煤a navegando se considerar谩 que acepta su uso. OK M谩s informaci贸n aqu铆