Como desarrollador de plantillas para wordpress, prefiero no usar plugins que lo sobrecarguen, por lo tanto me resulta más útil agregarlos fácilmente y en este caso, les explicaré cómo agregar los comentarios de Facebook en WordPress sin usar ni un plugin (a excepción de una ruta javascript del mismo Facebook).

Agregando la caja de comentarios paso a paso

Vamos a seguir unos sencillos pasos para añadir esta opción de comentarios a nuestro theme. Lo haremos directamente desde nuestro panel de administración de WordPress (puedes hacerlo también por FTP).

  1. Nos vamos a dirigir a Apareciencia -> Editor.
  2. Ubicamos el archivo header.php (Cabecera del tema) al lado derecho de la pantalla y lo abrimos (presionando un suave click).
  3. Buscamos la etiqueta <body …> y, posterior a ella pegamos el siguiente código y guardamos: 
    <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/fr_FR/sdk.js#xfbml=1&version=v2.9";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

    Lo que hace este código, es conectarse al SDK de Facebook para incluir los códigos necesarios y mostrarnos la hermosa cajita de comentarios.

  4. Nos dirigimos al archivo comments.php (que también está a lado derecho de nuestro panel). Lo abrimos, hacemos un backup, borramos el contenido y añadimos el siguiente código y guardamos. 
    <div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="100%" data-numposts="10" data-order-by="social" data-colorscheme="light"></div>
  5. Normalmente, en este archivo encontrarás la sección de comentarios, pero te recomiendo borrar todo el contenido y dejar sólo los contendedores (divs) para que mantenga los margenes / espacios, etc (si tienes alguna duda en este punto, házmela saber).

Con eso, ya tendríamos habilitado los comentarios de facebook en nuestras publicaciones y páginas. ¿Sencillo verdad?, ¡ahora a hacerlo!.

Actualización:

Gracias a un comentario de una internauta (María :)), descubrimos que en el actual edge (no en el que actualizará Microsoft, basado en Chromium) se ve mal cuadrado el comentario.

La solución es añadir este código a tu hoja de estilos: 

/*Fb Comments Width Fix*/.fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe {
max-width: 100% !important;
width: 100% !important;
}

 

Google+0

Williams Azabache Sarmiento

Que puedo decir...