4.5 595

Add Disqus Comments With Defer in Blogs

Posted by zerochan on May 6, 2018

Loading the translation ...

How to install Disqus comments is a popular comment box and is often used by user wordpress and bloggers. many are using disqus comment box because disqus is safe from SPAM comments that often happen in the default comment box of blog. ranging from gambling spam and herbal remedies. but this spam only happens among blogs Indonesia only. I do not know if there is spam on the blog abroad. in addition to SPAM comments. disqus has a very nice look, and we can also display html code in comment box.

Spam events case happened on my blog. initially I use wordpress comment box but sometimes I encounter spam comments that really disturb me. so I switched to the disqus comment box.

how to install disquss comments in website, disqus comments, wordpress, blogger, yuukithemes, disqus

but the disqus comment box has a flaw that makes people think twice before putting a disqus comment box on their blog. the shortcomings is making blogs to be slow, using disqus sometimes loading our blog feels heavy.

then this discussion is how to optimize disqus comment box so that blog does not feel heavy when loading page of article or page by using defer on the disqus script..

Add Disqus To Your Website

How to Add Disqus Comment System in WordPress

1. Log in to your WordPress Dashboard.
2. Go to Appearance > Editor
3. Select single.php
4. Search this code comments_template(); (use CTRL + F in editor), you will found like this

<?php
/* If comments are open or we have at least one comment, load up the comment template. */
if ( comments_open() || get_comments_number() ) {
comments_template();
}
endwhile;
?>

5. Then Replace that code with this code

<style type="text/css">
#load-com{margin-bottom:25px;color:#656c7a;background-color:#e7e9ee;width:100%;border-radius:3px;border:1px solid #c2c6cc;padding:18px;text-align:center;font-size:130%;position:relative}
#load-com p{margin-bottom:0;line-height:25px}
#load-com:after{content:"\f0e6";font-family:FontAwesome;position:absolute;top:25px;opacity:.1;font-size:300%;right:25px;transform:rotate(2deg)}
#load-com i{font-size:110%;margin:5px 10px 10px}
</style>
<div id="disqus_thread"><div id="load-com"><i class="fa fa-spin">&#xf110;</i><p><strong>Please wait....</strong><br>Disqus comment box is being loaded</p></div></div>
<script type="text/javascript">//<![CDATA[
function disqusonload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/Yuukithemes/yuukithemes.github.io@ba534dd5c1bf65c7e0e30cb1d2b045ecdabdbb99/js/disqus.min.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",disqusonload,!1):window.attachEvent?window.attachEvent("onload",disqusonload):window.onload=disqusonload;var disqus_usr = "demothemes";
//]]></script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<?php endwhile; ?>

Note : Change demothemes with your shortname disqus. click here to find out the shortname of your website on disqus.

6. Click Update File

How to Add Disqus Comments Box to Blogger

1. Login to your Blogger Dashboard
2. Choose your blog
3. Click Menu Theme
4. Click Button Edit HTML
5. Search this code name='threaded_comments' or <b:include data='post' name='threaded_comments'/>, then replace it with the code below (use CTRL + F in editor)

<style type="text/css">
#load-com{margin-bottom:25px;color:#656c7a;background-color:#e7e9ee;width:100%;border-radius:3px;border:1px solid #c2c6cc;padding:18px;text-align:center;font-size:130%;position:relative}
#load-com p{margin-bottom:0;line-height:25px}
#load-com:after{content:"\f0e6";font-family:FontAwesome;position:absolute;top:25px;opacity:.1;font-size:300%;right:25px;transform:rotate(2deg)}
#load-com i{font-size:110%;margin:5px 10px 10px}
</style>
<div id="disqus_thread"><div id="load-com"><i class="fa fa-spin">&#xf110;</i><p><strong>Please wait....</strong><br>Disqus comment box is being loaded</p></div></div>
<script type="text/javascript">//<![CDATA[
function disqusonload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/Yuukithemes/yuukithemes.github.io@ba534dd5c1bf65c7e0e30cb1d2b045ecdabdbb99/js/disqus.min.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",disqusonload,!1):window.attachEvent?window.attachEvent("onload",disqusonload):window.onload=disqusonload;var disqus_usr = "demothemes";
//]]></script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Note : Change demothemes with your shortname disqus. click here to find out the shortname of your website on disqus.

6. Save Themes

I Have Already Installed Disqus On My Website.

and for buddy who has already installed disqus before. please find the code disqus then replace with code below.

<style type="text/css">
#load-com{margin-bottom:25px;color:#656c7a;background-color:#e7e9ee;width:100%;border-radius:3px;border:1px solid #c2c6cc;padding:18px;text-align:center;font-size:130%;position:relative}
#load-com p{margin-bottom:0;line-height:25px}
#load-com:after{content:"\f0e6";font-family:FontAwesome;position:absolute;top:25px;opacity:.1;font-size:300%;right:25px;transform:rotate(2deg)}
#load-com i{font-size:110%;margin:5px 10px 10px}
</style>
<div id="disqus_thread"><div id="load-com"><i class="fa fa-spin">&#xf110;</i><p><strong>Please wait....</strong><br>Disqus comment box is being loaded</p></div></div>
<script type="text/javascript">//<![CDATA[
function disqusonload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/Yuukithemes/yuukithemes.github.io@ba534dd5c1bf65c7e0e30cb1d2b045ecdabdbb99/js/disqus.min.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",disqusonload,!1):window.attachEvent?window.attachEvent("onload",disqusonload):window.onload=disqusonload;var disqus_usr = "demothemes";
//]]></script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Note : Change demothemes with your shortname disqus. click here to find out the shortname of your website on disqus.

How to Find Shortname Disqus

1. Login Your Account Disqus
2. Select Menu Admin
3. Select the site you want to use
add disqus comments
4. After choosing, See your browser url
add comment box to website
now you know your website shortname in disqus.

Reference
I made this article not alone, I also glanced at some references to add my insight in making this article.
– https://translate.google.com
– https://varvy.com/pagespeed/defer-loading-javascript.html
– https://www.kompiajaib.com/
– https://disqus.com/

Related Post

Comments

Waiting Load Disqus Comments ...