Genesis Themes

  • Home
  • Genesis Tutorials
  • WP Tutorial
  • Twenty Fifteen Theme
  • Social Media
  • WP Plugins

JavaScript to Load Disqus on Scroll

 Load Disqus on Scroll Using JavaScript :

Load Disqus comments when visitor scroll down page to comments with Ajax. Page speed plays crucial role in search engine rankings, to amend your website speed even more, you need to display Disqus comments on scroll down or on click button event demand base.

Loading Disqus comments on demand improves your page speed, but the number of comments will decrease. Which one you prefer Speed or Comments?, It's completely your choice. In our point of view, Page speed is more important than any other factor. Because the user doesn't want to stay on slow speed websites.

By default Disqus loads comments asynchronously,which is great sign to page speed.Add the below JavaScript code to your theme file.

$(function(){
var disqus_div = $("#disqus_thread");
if (disqus_div.size() > 0 ) {
var ds_loaded = false,
top = disqus_div.offset().top,
disqus_data = disqus_div.data(),
check = function(){
if ( !ds_loaded && $(window).scrollTop() + $(window).height() > top ) {
ds_loaded = true;
for (var key in disqus_data) {
if (key.substr(0,6) == 'disqus') {
window['disqus_' + key.replace('disqus','').toLowerCase()] = disqus_data[key];
}
}
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = 'http://' + window.disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}
};
$(window).scroll(check);
check();
}
});

Add the Disqus division to create a comment area below your posts.change your_disqus_username with your own Disqus short name and Post_Permalink to your post URL /Function.This area change according to your platform.If you are using WordPress than skip this code.

<div id="disqus_thread" 
data-disqus-shortname="your_disqus_username" 
data-disqus-url="Post_Permalink"></div>

Load Disqus on Scroll in WordPress :

Load Disqus comments on scroll down to page comments in WordPress by adding the following code to single.php file.before adding this code remove the code of and replace with following one.

<div id="disqus_thread" 
data-disqus-shortname="your_disqus_username" 
data-disqus-url="<?php the_permalink(); ?>"></div>

Related Posts

  • How to Find CodeCanyon ThemeForest Purchase Code
  • No Self Pings : 2 ways to Remove WordPress Self Pingbacks
  • Add Click to Call Phone Number Link With HTML5
  • Load Disqus Comments On Click With AJAX
  • Custom CSS Media Queries for IOS Devices
  • How to Style External Links With CSS
  • Highlight Current Menu Item Using jQuery
  • Boilerplate CSS Media Queries for Responsive Website
  • How to Add HTML 5 Support to Thesis Theme

Bluehost and Siteground Coupons for January 2016.

Best Premium WordPress Themes from TemplateMonster
download wordpress themes from MonsterOne

Categories

  • Blog
  • Blogger
  • Genesis Tutorials
  • Social Media
  • Top Websites
  • Twenty Fifteen WordPress Theme
  • WordPress Plugins
  • WordPress Tutorial