The Facebook comments plugin is an easy-to-use comment system that you can put on nearly any webpage. It's main downside versus a self-hosted comment system is that it incurs a lot of http requests. This can cause your site to load slower and make it feel less responsive.

To avoid a less responsive site, you can lazy load the comments plugin. This makes it so that the plugin only loads when it comes into view.

Note: If you have another Facebook plugin elsewhere on the site, such as the Like button, you won't be able to lazy load the comments. This is because the Facebook API will have already been included, causing comments to load immediately.

Understand The Embed Code

The first thing you need to do is grab the official embed code from the Facebook developer site. It's important to understand how it works before proceeding, as you'll be modifying it. The embed code should look like this (HTML5):

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=YOUR_APP_ID&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-comments" data-href="YOUR_WEBPAGE" data-numposts="5" data-colorscheme="light"></div>
Here's what each element does: The first div is a placeholder element that Facebook uses as part of its SDK. The second div is what contains the comments. It doesn't do anything until the Facebook API is loaded. The script loads the Facebook API after making sure it hasn't been already loaded.

HTML Elements

Place both div elements into your HTML where Facebook told you to, but do not put the script in. On the second div, add the attribute id="comments". Your HTML should contain something like this:

<div id="fb-root"></div>

<div id="comments" class="fb-comments" data-href="YOUR_WEBPAGE" data-numposts="5" data-colorscheme="light"></div>
Don't forget to change YOUR_WEBPAGE to the correct value.

JavaScript Modifications

Now create a JavaScript function that loads the Facebook API on command (and not immediately like the original embed code does). The code is much simpler, since it doesn't need to check if the API has already been loaded. Put this into your JavaScript somewhere:

function loadAPI() {
var js = document.createElement('script');
js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=YOUR_APP_ID&version=v2.0';
document.body.appendChild(js);
}
Don't forget to change YOUR_APP_ID to the correct value.

You can now call this loadAPI function at any time and it will load the Facebook API, thus filling in the comments div with comments.

Load When In View

You could choose to fire the loadAPI function from a button click, but a more user-friendly approach is to have it load automatically once the comments come into view. To do this, have JavaScript monitor the scroll event and keep checking the position of the div relative to the window height:

window.onscroll = function () {
var rect = document.getElementById('comments').getBoundingClientRect();
if (rect.top < window.innerHeight) {
loadAPI();
window.onscroll = null;
}
}
I kept the code short at the expense of extensibility and performance. You may want to adjust it to suit your needs, or put into your event handler system.

Complete Code

Here is the code all together:

<script>
function loadAPI() {
var js = document.createElement('script');
js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=YOUR_APP_ID&version=v2.0';
document.body.appendChild(js);
}

window.onscroll = function () {
var rect = document.getElementById('comments').getBoundingClientRect();
if (rect.top < window.innerHeight) {
loadAPI();
window.onscroll = null;
}
}
</script>

<div id="fb-root"></div>

<div id="comments" class="fb-comments" data-href="YOUR_WEBPAGE" data-numposts="5" data-colorscheme="light"></div>
As you can probably imagine, you can lazy load any external asset, including Google's API, other scripts, and images.