Cómo cargar Disqus onClick Evento bajo demanda

Puede cargar en Disqus clic de un botón. los comentarios de Disqus en demanda utilizando evento onclick aumenta la velocidad de carga de página. Se puede hacer con jQuery o JavaScript.

A+ A-

sistema de comentarios Disqus es un gran servicio. Se le permite integrar sin problemas y muy fácilmente una sección con todas las funciones comentarios en tu blog o página web . Se ha eliminado la necesidad de mantener los comentarios de los usuarios en su propio servidor. Disqus se encarga de todas las observaciones formuladas en su sitio web y mantenerlos asociados con las páginas apropiadas. Se carga desde un servidor comentarios Disqus en la manera asíncrona utilizando AJAX.

¡Pero hay un problema! Cuando una página en sus cargas y demandas sitio web asociado comentarios Disqus desde un servidor, tiene que hacer una gran cantidad de consultas GET. Todos los comentarios, Gravatars de los comentaristas, los archivos de soporte, etc., todo esto tiene que recorrer todo el camino desde el servidor Disqus a su página. Como resultado, la velocidad de carga de la página de su sitio web disminuye.

¿No sería estupendo si pudiera cargar los comentarios Disqus en la demanda? Por ejemplo, sería excelente para cargar los comentarios cuando un usuario hace clic en un botón. Si el usuario no desea leer o escribir comentarios, entonces no hay necesidad para traer innecesariamente los comentarios de Disqus. Tales en la demanda de carga de los comentarios Disqus se puede lograr mediante la explotación de evento de clic , carga asíncrona de Disqus JavaScript y / o AJAX . Vamos a ver cómo hacer esto.

Er ... espera un segundo ... es lo primero que quiere ver la demo? Bueno, entonces sólo desplazarse hacia abajo en esta página y ver por sí mismo. En el momento de escribir este artículo, también estoy usando este método de cargar los comentarios Disqus el evento click.

OK, ahora vamos a ver cómo hacer esto.

Eliminar los comentarios sección de su sitio web

En primer lugar, usted debe hacer la integración básica de Disqus Comentando sistema en su sitio web o blog. Si está utilizando la plataforma de WordPress, usted puede hacer fácilmente esta integración mediante un plug-in proporcionado por Disqus . De lo contrario también es sólo una cuestión de la inclusión de un código JavaScript proporcionada por Disqus.

Huelga decir que, si estás integrando Disqus, se debe eliminar la sección de comentarios, en caso de que se lo proporciona su CMS o plataforma de blogs .

Cargar Disqus al hacer clic sin necesidad de utilizar jQuery

Este es el método simple que se basa en JavaScript básico. Si su sitio web no está usando jQuery (me pregunto por qué!), Puede utilizar este método simple. Aquí está el código:

HTML

<div id="disqus_thread"></div>
<div id="disqus-comments">
<button onclick="load-disqus()">Read Comments</button>
</div>

JavaScript

function load-disqus() {
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = "http://[YOUR-DISQUS-SHORTNAME].disqus.com/embed.js";
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
var load-button = document.getElementById('disqus-comments');
load-button.parentNode.removeChild(load-button);
}

Por favor tenga en cuenta lo siguiente:

  1. No debe cambiar el id = "disqus_thread", ya que es utilizado por el sistema de comentarios para ciertas operaciones.
  2. Reemplazar [SU-Disqus-SHORTNAME] con usted administra Disqus código corto (se obtiene cuando se agrega una página web en su cuenta Disqus).
Cargar Disqus al hacer clic con jQuery

Como la mayoría de las plataformas de blogs y otros sitios web qué cargar jQuery , es posible que desee tomar ventaja de este excelente paquete de JavaScript. Aquí está el código para cargar Disqus bajo demanda utilizando jQuery y AJAX.

HTML

<div id="disqus_thread"></div>
<div id="disqus-comments">
<button onclick="load-disqus()">Read Comments</button>
</div>

JavaScript

$(document).ready(function() {
$('#loadDisqusBtn').on('click', function(){
var disqus_shortname = 'YOUR-DISQUS-SHORTNAME';
		$.ajax({
	         type: "GET",
	         url: "http://" + disqus_shortname + ".disqus.com/embed.js",
	         dataType: "script",
	         cache: true
	     });
	        $(this).fadeOut();
	});
});

En este código también, por favor no se olvide de reemplazar [SU-Disqus-SHORTNAME] con su propio código corto. Esta secuencia de comandos utiliza AJAX para obtener Disqus JavaScript del servidor. Una vez que se activa el evento click, el botón de evento que causa desaparece. Estoy utilizando este método para cargar los comentarios sobre la demanda.

Usar un plugin

Los que no son de código conocedores de las personas, pueden hacer uso de un plugin de WordPress para cargar los comentarios sobre el clic de un botón. Este método no es recomendable porque la instalación de demasiados plugins también ralentizar su sitio web. Por lo tanto, se intenta evitar la instalación de plugins cuyo trabajo se puede hacer fácilmente en su propia mediante la deformación de código un poco.

Ventajas de la carga en Disqus clic

Hay varias ventajas de la utilización de cualquiera de los método dado. Dejame explicar:

  • La velocidad de carga de páginas web de sus aumentos. Se tarda menos tiempo para cargar y por lo tanto, su sitio web gana puntos de brownie tanto de los visitantes y los motores de búsqueda.
  • Su página se ve mucho más limpio y sin enredos de sección de comentarios.
  • La longitud total de la página también disminuye, lo que hace que sea más fácil para el visitante para desplazarse hacia arriba y hacia abajo el contenido.
  • Se reducirá los comentarios no deseados . No recibirá ningún correo no deseado en absoluto. Si utiliza WordPress comentario por defecto sección sin código de imagen y / o el plugin de Akismet -Eres probabilidades de conseguir un montón de comentarios de spam. El uso de la demanda Disqus, no dejará ningún margen para spammer que no habrá una forma disponible para que se llene. formulario de comentario aparece sólo cuando alguien hace clic en el botón.
Desventajas de carga en Disqus clic

Sólo hay un inconveniente que se me ocurre. Es una psicología visitante materia "fuera de la vista, fuera de la mente". Si un visitante ve comentarios derecha sirven a él, puede que sea más probable que leerlos. Contribución en la sección de comentarios es también más probable si la sección de comentarios es vista por defecto.

Pero si su contenido es tan bueno que los visitantes no se molestan en hacer un clic extra para comentar, se debe utilizar este método.