optimizar carga de disqus cargar comentarios de disqus con un boton fácil

Disqus es una gran herramienta que nos brinda mayor control sobre los comentarios de nuestro sitio, además de ser independiente del mismo, ya he hablado de disqus en otra ocasión, pero hoy vamos a aprender a cargar comentarios mediante un boton.


Contenido


Modificar Javascript

Antes de comenzar, en este tutorial doy por hecho que ya tienes disqus instalado en tu blog o bien estás usando una plantilla de zkreations, mis plantillas ya tienen disqus instalado, por lo que buscamos el código javascript de disqus, el cual es similar a este:


var disqus_shortname = "Shortname",
    disqus_config = function() {
        this.page.url = "Page_URL";
    };
(function() {
    var d = document,
        s = d.createElement('script');
    s.async = true;
    s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();

El código anterior solo es una referencia, no importa cómo sea el código de disqus que tengas instalado, selecciónalo todo y reemplázalo por lo siguiente:


var disqus_loaded = false,
    disqus_loadBtn = document.getElementById("disqus_loadBtn"),
    disqus_shortname = "Shortname",
    disqus_config = function() {
        this.page.url = "Page_URL";
    };//<![CDATA[
function loadDisqus() {
    if (!disqus_loaded) {
        disqus_loaded = true;
        disqus_loadBtn.classList.add("disqus_loaded");
        var d = document,
            s = d.createElement('script');
        s.async = true;
        s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    }
}
disqus_loadBtn.onclick = function() {
    loadDisqus();
    return false;
};//]]>

Del código reemplazamos Shortname por tu nombre corto de Disqus. Si usas una plantilla de zkreations cambia Shortname por <data:skin.vars.config_shortname/>.


Por último Page_URL lo reemplazamos por la url canónica del sitio, si estás usando este codigo en Blogger, escribe <data:view.url.canonical/> y guarda los cambios.


Agregar CSS

El codigo CSS le dará estilos al botón, para ello ve a Temas Personalizar Opciones avanzadas Agregar CSS y pega lo siguiente:


/*!
 * Disqus click v2.0.0
 * Copyright 2020 zkreations
 * Developed Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT
 */
/*! Core (No modificar) {{*/
.disqus_loadBtn,
.disqus_loadImg {
   background: none;
   padding: 0;
   margin: 0;
   border: 0;
   outline: 0;
   box-shadow: none;
}
/*}} Fin del core */

/*! Personalización */
.disqus_loadBtn {
    padding: 1rem; /* relleno */
    display: block; /* mostrar como bloque */
    width: 100%; /* ancho del boton */
    background-color: #f1f1f1; /* color del fondo */
    color: #464646; /* color del texto */
    font-size: 14px; /* tamaño de fuente */
    font-weight: 500; /* densidad del texto */
    border-radius: 3px; /* bordes redondeados */
}
.disqus_loadBtn:hover {
    background-color: #eeeeee; /* color del fondo (hover) */
    color: #212121; /* color del texto (hover) */
}

Usar botón

Busca el siguiente código HTML, el cual pertenece a los comentarios de disqus:


<div id='disqus_thread'></div>

Justo debajo de ese código ponemos lo siguiente:


<button class='disqus_loadBtn' id='disqus_loadBtn'>Cargar comentarios</button>

Usar imagen

Si prefieres usar una imagen en lugar de un botón para cargar los comentarios, entonces utiliza este código:


<button class='disqus_loadImg' id='disqus_loadBtn'>
   <img src='url_imagen.jpg'/>
</button>

Reemplaza url_imagen.jpg por el enlace de la imagen que deseas utilizar. Guarda los cambios y listo.


Si te ha sido de utilidad no olvides compartir este articulo, siempre lo aprecio mucho. Si tienes dudas déjala en los comentarios, respondo a todos.