Wordpress

Lazy load cho facebook comment

1,436 Views

Nhiều website hiện nay đang sử dụng và tích hợp facebook comment để thuận tiện cho người dùng trong quá trình sử dụng. Tuy tiện lợi nhưng facebook comment lại khá nặng, đôi khi làm tăng tốc độ tải trang của website khá nhiều.

Với một chút thủ thuật nho nhỏ dưới đây, các bạn có thể tạo lazy load cho facebook comment, phần comment chỉ được hiện ra nếu người dùng kéo đến cuối bài.

Các bạn chỉ cần thay đổi một chút đoạn code để add facebook comment vào website như sau, thay đổi APP ID của bạn nhé

<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>