<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>
Kemudian, berikut kode setelah didefer atau dipasang script lazy yang mengatur agar script mulai dijalankan setelah terlihat:
<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>
Sumber: https://www.h3xed.com/web-development/how-to-lazy-load-the-facebook-comments-plugin-using-javascript