Una integración simple y siempre muy solicitada es la de la caja de comentarios de Facebook en los sitios WordPress, que es el CMS más utilizado a nivel mundial dada su simplicidad de uso y mantención.

Para lograr esta integración, no requerimos de una Application ID de Facebook, ya que, al igual que los botones Like, funciona “en caliente”, sin requerir tokens ni nada.

Para realizar esta integración, requerimos poder editar los archivos del tema instalado, ya sea desde dentro del panel de administración de WordPress (Apariencia -> Editor) o desde los archivos en si mismos desde acceso al servidor. Para editar desde el panel de administración, requerimos los permisos de edición necesarios (665 o 777 por ejemplo), ademas de estar utilizando una instalación desde wordpress.org o wordpress.com de pago.

En el archivo header.php, incluya el siguiente código entre las etiquetas <head>

<!-- Integracion FB -->
<div id="fb-root"></div>
<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_LA/all.js#xfbml=1&appId=609768322408511";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Fin Integracion con FB -->

En el archivo comments.php, incluya lo siguiente al principio (después del cierre del primer bloque php)

<!-- Integracion con FB -->
<div class="fb-comments" data-href="<?php echo the_permalink() ?>" data-colorscheme="light" data-numposts="5" data-width="550px"></div>
<!-- Fin Int con FB -->

En este último bloque, se pueden editar los parámetros dentro del tag. Para este ejemplo, data-href hace referencia al sitio donde se harán comentarios. Al ser WordPress, usamos el permalink actual. data-colorscheme indica si será light o dark, data-numposts indica la cantidad de comentarios a mostrar por defecto y data-width indica el ancho de la caja de comentarios. Existen otros parametros asignables que pueden encontrar en la documentación oficial siguiente este link:  https://developers.facebook.com/docs/plugins/comments/

Si se desea prescindir de los comentarios de WordPress, se deben des-habilitar por completo desde las opciones o por entrada.

Para deshabilitarlos en todas las entradas nuevas, basta con ir desde el panel de administración a Ajustes -> Comentarios y deshabilitar el tercer elemento.

Si se desean deshabilitar por entrada; en la página de edición de la misma, basta con desmarcar la opción de Permitir Comentarios en la sección de Comentarios. Si esta no es visible, en la parte superior de la página, habilitar la sección Comentarios en las “Opciones de Pantalla”, ubicadas en la parte superior derecha.

ntntyntynty

Si queremos una solución algo más “radical”, podemos agregar a un custom.css lo siguiente:

#comments{
          display: none;
}

Felices Comentarios!

3 thoughts on “Insertar la caja de comentarios de Facebook en WordPress

  1. Sebastián, es una muy buena entrada y la utilicé en http://www.3dwow.cl, pero creo que deberías sacar:

    (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_LA/all.js#xfbml=1&appId=609768322408511”;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, ‘script’, ‘facebook-jssdk’));

    del header, ya que al estar utilizando no estaríamos respetando la sintaxis básica de HTML. Saludos!

    1. ¿Por qué no sería estandar HTML?

      La documentación oficial indica que ese es el método correcto, y no tiene nada de “no estandar”, es un javascript que no necesariamente debe estar en el body, y puede importarse en el head si lo tuvieramos en otro fichero, caso que no es tal.

      Saludos

  2. I am now not certain where you’re getting your info, but good topic. I needs to spend some time studying much more or untsaedrnding more. Thank you for magnificent information I used to be in search of this information for my mission.

Deja un comentario

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