Sometimes, WordPress comments aren't enough. If you'd like to give your users more options for…
In the past, I reviewed Disqus, which is the third party commenting system you can integrate with WordPress. It’s what I use here on Tidy Repo. Disqus has their own official WordPress plugin that they maintain, but if you’re looking for a bit more features and lazy loading your Disqus comments, then you should look to Disqus Conditional Load.
What’s It Do?
Disqus Conditional Load replaces the official Disqus plugins and adds a few features on top of it. Its primary feature is lazy loading comments. This means that comments don’t load until a user either scrolls to them, or clicks a “Load Comments” button. In both cases, you should see some meaningful gains to your page’s performance. The plugin also gives you access to a shortcode, which you can use instead of Disqus’ default function. It also automatically syncs your Disqus and WordPress databases to keep all of your comments on your server.
Other than that, the plugin works about the same as Disqus’ plugin, allowing you integrate the third party service into your site, automatically replacing the comments section on your site with Disqus plugins, and customizing the way they are output.
How’s It Work?
Before you install Disqus Conditional Load, make sure that you do not have the Disqus plugin already installed. This is not an add-on, but a complete replacement, and will do all of the same things. After you install and activate the plugin, you will have to activate it by entering your Disqus username and password. Next, the plugin will show you a list of sites you have set up with Disqus. If you have not registered your current site, follow the link to do so, and then select it.
After you’ve added Disqus support, you can start customizing the plugin. By default, comments will appear at the bottom of every blog post, with a link to “Load Comments”. When users click this link, the comments for that post will be loaded in. However, it is simple to change the way this works. To do so, go to Comments -> Conditional Load Disqus.
The first page you will see is the “Conditional Load” page. These are settings unique to the plugin, and not found in the official Disqus plugin. The first option is “Load Disqus when” with two options, “On Click” or “On Scroll”. The On Click option is the default and means that a button (which you can customize) will be placed at the bottom of each post. When a user clicks on this post, comments will be loaded in. This is to save your posts from unnecessarily loading in comments, external scripts, and styles from Disqus if your user does not have a need for the comments. On Scroll means that comments will be loaded in automatically when a user reaches the comment section. They won’t be loaded in right away, not until a user scrolls to the bottom of a post. In both cases, Disqus comments will be lazy loaded in, you just have to decide if you want the user to prompt the load, or you want it to happen automatically.
The “Button Settings” section is only used if you chose the “On Click” options. Here you can choose what you want the button to say (default if left blank is “Load Comments”) and you can assign it a CSS class. Lastly, you’ll see a “Load Comments where Short Code used:” option. If you select “Yes” here, then comments will not be automatically loaded at the bottom of posts. Instead, you can use the shortcode [[js-disqus]] anywhere on your posts or pages, or with the do shortcode function in your template files, and comments will be placed there instead of at the bottom of the page. This allows you to have a bit more control over comments placement.
The “Disqus Settings” tab in the top right corner brings you to the default Disqus settings. I go over them in my Disqus post, but here’s a basic overview.
The Appearance section allows you to specify where comments should show up, either on all blog posts or only on posts with closed comments. The Sync section lets you turn off the automatic syncing the plugin provides. By default, Disqus comments will be loaded to your WordPress database and vice versa, but you can turn this off here. The “Disable server-side rendering of comments” means that comments will no longer be search friendly and only should be used if you absolutely are having problems with it.
The Patches section has a single patch to output JS at the bottom of your file. I’d recommend leaving this checked. The Advanced section contains an option for Single Sign-on which allows you to use the API to merge WordPress and Disqus accounts. That’s beyond the scope of this tutorial, but Disqus has a great run-through.
The Import and Export section allows you to manually sync Disqus and WordPress, which you should do if you see that this is not happening automatically. And if all else fails, you can use the Reset button to reset your settings.
Beyond that, the plugin is doing a bit in the background. It is, for instance, making sure that WordPress comments and Disqus comments stay in sync, routinely pulling comments in both directions. It also ensures that your comments are search engine friendly, and can be seen by search engines crawling the site.
After you’ve configured the plugin, you can see your comments in action by visiting any of your posts and scrolling to the bottom to see your lazy load option.
Costs, Caveats, Etc.
Disqus Conditional Load does a great job of providing routine updates and new features, building on top of the existing Disqus plugin to add even more. If you are finding that the Disqus official plugin falls a bit short, then it should help you out significantly. If you are having a problem with the plugin, the developer has set up a dedicated forum on his own site where you can get help from him or the community. The plugin is completely free.