I have mentioned about a piece of code in my attempt to reduce page load time, which allows readers to load Disqus whenever they want. It’s not very clear and probably not very helpful if you don’t know much about JavaScript or don’t want to read the code, so here is a post specifically written for that functionality.
1 The Disqus Universal Code
The following code is copied from Disqus Universal Code page. In your existing Disqus code should more or less look the same.
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'example'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
The keyword for looking is disqus_thread, you shall see a similar code block like above.
2 With jQuery
If you use jQuery in your page already, then it’s very easy:
<div id="disqus_thread"></div>
<div id="disqus_loader" style="text-align: center">
<button onclick='$.ajaxSetup({cache:true});$.getScript("http://[YOUR-DISQUS-SHORTNAME].disqus.com/embed.js");$.ajaxSetup({cache:false});$("#disqus_loader").remove();'>Load Disqus Comments</button>
</div>
You need to replace existing Disqus with above and make a couple changes:
- Replace [YOUR-DISQUS-SHORTNAME] with yours. You can see all available short names in Universal Code page. Short name is like an ID.
- You may want to change the button text “Load Disqus Comments.”
In the default layout, this new button is center-aligned. You may want to add CSS style for it. The cache for AJAX setup is to disable jQuery cachebuster, it’s important for speed since the embed.js won’t change often.
3 Without jQuery
<div id="disqus_thread"></div>
<div id="disqus_loader" style="text-align: center">
<button onclick="load_disqus()">Load Disqus Comments</button>
<script>
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 ldr = document.getElementById('disqus_loader');
ldr.parentNode.removeChild(ldr);
}
</script>
</div>
Please follow the same instructions as described in With jQuery.
4 Note
I do not test either method, they are written on the fly, although this blog is using slightly different With jQuery code. If you see errors, please post the error message in comments.
Is there is any way to add "Loading..." test when Disqus load ?
ReplyDeletePlease help
I am not sure what you meant by '"Loading..." test when Disqus load.'
ReplyDeleteDo you mean a test for loading Disqus? If so, no ides why you want to do that.
When Disqus is loading, i.e. after user clicks on the load button as described above in this case, Disqus shows a loading indication already for user to know that the loading is in progress.
Ops...Make a mistake. It is "loading..." text. Just like in the labnol.org
ReplyDeleteNow that makes sense.
ReplyDeleteI checked the website, but it isn't really useful to have such loading text. Because from what I observe, the loading text is only for loading Disqus loader script. Nowadays, Internet speed is quick good, loading a loader is reasonably fast. That website's loading text only shows me the text less than a second, probably less than a half second, then Disqus's loading animation uses another less-than-a-second.
So, to me, there is no reason to add such loading text.
If you insist to have such loading text, try to search for some example code for script load event, or ask that website's owner for the code he or she uses. The latter would be easier if you don't know how to code JavaScript.
Thanks for the quick reply :)
ReplyDeleteOk..i get it.
Thanks for sharing this useful tip. It not only helped my blogs loading speed and improved usability.
Keep the good work pal.
Hello,
ReplyDeleteI m not able to put irt on my wordpress blog.
Please let me know how can I do it ?
I'm not familiar with WordPress. If you couldn't add your own HTML + JavaScript to your blog, then there is nothing you could do about it.
ReplyDelete