Comment charger Disqus onClick événement à la demande

Vous pouvez charger Disqus sur clic d'un bouton. commentaires Disqus à la demande en utilisant l'événement onclick augmente la vitesse de chargement des pages. Il peut être fait avec jQuery ou JavaScript.

A+ A-

Disqus système de commentaires est un grand service. Il vous permet d'intégrer de façon transparente et très facilement une section complet des commentaires dans votre blog ou site web . Il a éliminé la nécessité de maintenir les commentaires des utilisateurs sur votre propre serveur. Disqus prend soin de tous les commentaires sur votre site et de les garder associés aux pages appropriées. Il charge les commentaires de serveur Disqus en mode asynchrone en utilisant AJAX.

Mais il y a un problème! Quand une page sur vos charges de site Web et les demandes associées commentaires depuis un serveur Disqus, il doit faire un grand nombre de requêtes GET. Tous les commentaires, gravatars des commentateurs, des fichiers de support, etc., tout cela doit venir tout le chemin du serveur Disqus sur votre page. En conséquence, la vitesse de chargement de votre site diminue.

Ce ne serait pas génial si vous pouviez charger des commentaires Disqus à la demande? Par exemple, il serait excellent pour charger des commentaires lorsqu'un utilisateur clique sur un bouton. Si l'utilisateur ne veut pas lire ou écrire des commentaires, alors il n'y a pas besoin de chercher inutilement des commentaires de Disqus. Une telle charge sur la demande de commentaires Disqus peut être réalisé en exploitant événement onClick , le chargement asynchrone de Disqus JavaScript et / ou AJAX . Voyons voir comment faire cela.

Euh ... attendez une seconde ... voulez - vous d' abord pour voir la démo? Eh bien, puis juste faire défiler cette page et de voir par vous - même. Au moment de la rédaction de cet article, je suis également en utilisant cette méthode de chargement des commentaires Disqus sur événement click.

OK, maintenant nous allons voir comment faire cela.

Supprimer les commentaires Section de votre site web

Tout d' abord, vous devez faire l' intégration de base de Disqus Commentant système sur votre site ou blog. Si vous utilisez la plate - forme WordPress, vous pouvez facilement faire cette intégration à l' aide d' un plug - in fourni par Disqus . Sinon, il est également juste une question d'inclure un code JavaScript fourni par Disqus.

Inutile de dire que , si vous intégrez Disqus, vous devez supprimer la section commentaires, dans le cas où il est fourni par votre CMS ou plateforme de blog .

Chargez Disqus sur clic sans utiliser jQuery

Ceci est la méthode simple qui repose sur JavaScript de base. Si votre site n'utilise jQuery (je me demande pourquoi!), Vous pouvez utiliser cette méthode simple. Voici le code:

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);
}

S'il vous plaît noter les points suivants:

  1. Vous ne devez pas changer l'id = "disqus_thread" tel qu'il est utilisé par le système de commentaires pour certaines opérations.
  2. Remplacez [VOTRE-DISQUS-SHORTNAME] avec vous possédez Disqus shortcode (vous obtenez lorsque vous ajoutez un site Web à votre compte Disqus).
Chargez Disqus sur clic en utilisant jQuery

Comme la plupart des plateformes de blogs et autres sites ne charger jQuery , vous voudrez peut - être profiter de cet excellent package JavaScript. Voici le code pour le chargement Disqus à la demande en utilisant jQuery et 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();
	});
});

Dans ce code aussi, s'il vous plaît ne pas oublier de remplacer [VOTRE-DISQUS-SHORTNAME] avec votre propre shortcode. Ce script utilise AJAX pour obtenir Disqus JavaScript à partir du serveur. Une fois l'événement click est déclenché, le bouton d'événement causant disparaît. J'utilise cette méthode pour charger des commentaires sur la demande.

L'utilisation d'un plug-in

Ceux qui ne sont pas des gens de code-savvy, ils peuvent faire usage d'un plugin pour WordPress pour charger des commentaires sur clic d'un bouton. Cette méthode est déconseillée car l' installation de nombreux plugins aussi ralentir votre site Web. Donc, vous essayez d'éviter l'installation de plugins dont le travail, vous pouvez facilement faire sur votre propre en ajustant le code un peu.

Avantages de chargement Disqus sur clic

Il existe plusieurs avantages de l'utilisation soit de la méthode donnée. Laisse-moi expliquer:

  • Vitesse de chargement de votre page Web augmente. Il prend moins de temps à charger et, par conséquent, votre site gagne des points brownie à la fois des visiteurs et les moteurs de recherche.
  • Votre page ressemble beaucoup plus propre sans l'encombrement de la section des commentaires.
  • La longueur totale de la page diminue également, ce qui le rend plus facile pour le visiteur pour faire défiler vers le haut et vers le bas le contenu.
  • Il sera de réduire le spam de commentaires . Vous aurez pas de spam à tous. Si vous utilisez WordPress section par défaut commentaire sans captcha et / ou Akismet Plugin -Tu susceptibles d'obtenir des charges de commentaires de spam. Utilisation de la demande Disqus, ne laissera aucune marge de spammer comme il n'y aura pas un formulaire disponible pour eux de remplir. formulaire de commentaires apparaît uniquement lorsque personne clique sur le bouton.
Inconvénients de chargement Disqus sur clic

Il n'y a qu'un seul inconvénient que je peux penser. Il est une question visiteur psychologie "hors de vue, hors de l'esprit". Si un visiteur voit les commentaires droit servis à lui, il est peut-être plus susceptibles de les lire. Contribution à la section des commentaires est également plus probable si la section des commentaires est vu par défaut.

Mais si votre contenu est si bon que les visiteurs ne seront pas pris la peine de faire un clic supplémentaire pour commenter, vous devez utiliser cette méthode.

Ads

Partager