Tutorial: Ocultar y Mostrar comentarios de Disqus en Blogger

Rykrdo

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
4 Mar 2018
Mensajes
571
Ocultar y Mostrar comentarios de Disqus en Blogger
disqus-blogger-consejos-trucos-spam.jpg


Seguramente ya muchos de ustedes han visto que los blog ahora ocultan sus comentarios, dicen que es por que eso hace que sus entradas carguen rápido.

Si alguien quiere hacer eso, aquí les explico como hacerlo.

1 .- Nos vamos a editor del HTML de tu blog y buscamos
HTML:
<div id='disqus_thread'/>
Arriba de eso pegamos
HTML:
<label class="mostrarcomentarios" id="show-comments" onclick="disqus();return false;">
<i class='fas fa-comment'/> MOSTRAR COMENTARIOS
</label>

2 .- Abajo de disqus_thread podemos ver el script de los comantarios de Disqus, lo cambiamos por este reemplazas el nombre por la id de tus comentarios
JavaScript:
var disqus_loaded = false;
var disqus_shortname = 'NOMBREDELA__ID'; //ID de los comentarios
function disqus() {
    if (!disqus_loaded)  {
        disqus_loaded = true;
        var e = document.createElement("script");
        e.type = "text/javascript";
        e.async = true;
        e.src = "//" + disqus_shortname + ".disqus.com/embed.js";
        (document.getElementsByTagName("head")[0] ||
        document.getElementsByTagName("body")[0])
        .appendChild(e);
        document.getElementById("show-comments").style.display = "none";
    }
}
var hash = window.location.hash.substr(1);
if (hash.length > 8) {
    if (hash.substring(0, 8) == "comment-") {
        disqus();
    }
}

3 .- Agregamos este css(Le puse un pequeño efecto de :hover)
CSS:
.mostrarcomentarios{display: block;text-align: center;padding: .9rem;text-transform: uppercase;color: #fff;background-color: #bb1919;letter-spacing: 1px;font-family:'Custom','Oswald',sans-serif}.mostrarcomentarios:hover{letter-spacing:3px;transition:.9s}

Nota: Esta es la v2 de este tutorial, significa que ya no se volverá a modificar.
Actualización: 27/01/2020
 
Última edición:

Julio Peñaloza

1
Ómicron
Exchanger
Verificado con videollamada
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
26 Ene 2015
Mensajes
4.692
¡Muchas gracias por tu aporte!

Saludos.
 

Ivan_Caal

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
23 Sep 2019
Mensajes
156
Edad
24
Que exelencia esta genial
 

nuay

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
11 Dic 2019
Mensajes
469
Disqus, en mi opinion es la mejor forma de integrar comentarios a un blog. Los sistemas nativos de WP y Blogger realmente no me gusta, y WP sobre todo carga mas la base de datos si tienen muchas visitas. Disqus tiene mejor aspecto, mas opciones de interacción y agrega funciones de redes sociales. Lo mejor para mi.
 

Rykrdo

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
4 Mar 2018
Mensajes
571
Tutorial actualizado
 

Ivan_Caal

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
23 Sep 2019
Mensajes
156
Edad
24
Y los que ya teniamos instalado la version 1
 

Rykrdo

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
4 Mar 2018
Mensajes
571
Y los que ya teniamos instalado la version 1
La v1 lo que hacía era ocultar los comentarios y cuando le das click al boton aparecen los comentarios.

La v2 hace que los comentarios NO carguen hasta que le das click al boton, cuando le das click cargan el script de los comentarios.

Si quieres te puedo ayudar a cambiarlos
 

alexxeg

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios!
Desde
24 Dic 2017
Mensajes
343
esta muy bueno pero si quisieramos hacerlo alreves? en vez de disqus que sea blogger?
 

Rykrdo

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
4 Mar 2018
Mensajes
571
Última edición:

Marco Grados

1
Pi
Verificado con videollamada
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
20 Abr 2013
Mensajes
5.869
Buen tutorial, gracias :D
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba