Instala en 4 pasos comentarios de Facebook en Ghost

Instala en 4 pasos comentarios de Facebook en Ghost

Este tutorial lo vi hace poco menos de un año donde de manera actualizada nos guían paso a paso de la manera más simple hasta el momento para configurar un sistema de comentarios en un blog administrado con ghost.

Este es un tutorial para instalar lo que llamamos "Lazy Load Facebook Comments". Un sistema ligero de comentarios de Facebook que no toma tiempo extra al momento de cargar en nuestro sitio. Vamos a ello:

1. Facebook app

Ingresa en la página de desarrolladores de Facebook y crea una nueva aplicación. Nómbrala de manera que puedas reconocerla fácilmente.

2. Código en Ghost

Ingresa a tu dashboard de Ghost y ve a la sección de Code Injection

En la caja de Blog header pega el siguiente código:

<meta property="fb:admins" content="YOUR_FACEBOOK_USER_ID"/> <meta property="fb:app_id" content="YOUR_APP_ID" />

Remplaza YOUR_FACEBOOK_USER_ID por tu ID de Facebook. Aquí te dejo un tutorial para que puedas identificar fácilmente tu ID.

3. Instalar en el template

Abre el archivo post.hbs que se encuentra dentro de la plantilla que estés usando en un editor de texto, la puedes descargar para tener la última versión de tu sitio actual en tu dashboard en formato .zip con el archivo indicado adentro.

Busca la siguiente línea de código:

<section class=”post-content”> {{content}} </section>

Y pega el siguiente código justo abajo de la etiqueta {{content}}

<script>
function loadAPI() {
var js = document.createElement('script');
js.src = '//connect.facebook.net/en_US
/sdk.js#xfbml=1&appId=YOUR_APP_ID&version=v2.8';
document.body.appendChild(js);
}
window.onscroll = function () {
var rect=document.getElementById('comments').getBoundingClientRect();
if (rect.top < window.innerHeight) {
loadAPI();
window.onscroll = null;
}
}
</script>
<div id="fb-root"></div>

Remplaza YOUR_APP_ID por tu ID de la aplicación y listo.

4. Guardar y reiniciar.

Guarda, comprime tu template y súbelo de nuevo a Ghost. Reinicia tu servidor de ser necesario.

¡Listo! Tenemos un sistema de comentarios de Facebook que no toma tiempo en cargar, porque lo hace cuando el usuario se acerca al final del post.

Tutorial visto en All Web Tuts.