Tăng tốc Blogspot với Javascript Lazy Load Facebook Comment

Tăng tốc cho Blog sử dung hệ thống bình luận của Facebook theo nghuyên lý: tải các thành phần của trang Web trước, sau đó mới tải Facebook comment.
Bài viết này không hướng dẫn bạn thêm Facebook comment cho Blog như thế nào (bạn có thể tìm kiếm trên Google) mà chỉ tập trung vào cách để tải sau Facebook comment.

Cách 1 - Tải Facebook comment khi click vào button

- Bước 1: Thay thế code hiển thị Facebook Comment

  Tìm trong template đoạn code hiển thị Facebook comment, thường là phía dưới code <data:post.body/> bằng đoạn:

<b:if cond='data:view.isSingleItem'>
<div class='showcomment'><button id='showcomment' onClick='showComments();'>Show comments</button></div>
<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' max-width='650' numposts='10' width='100%'/>
</b:if>

- Bước 2: Javascript

Thay thế Facebook script phía trên thẻ </body> bằng :

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : &#39;xxx&#39;,
      xfbml      : true,
      version    : &#39;v2.10&#39;
    });
    FB.AppEvents.logPageView();
  };
 function showComments() { 
  (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 = &quot;https://connect.facebook.net/en_US/sdk.js&quot;;
     fjs.parentNode.insertBefore(js, fjs);
   }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
}
</script>

Thay xxx bằng Facebook appID của bạn

- Bước 3 Thêm CSS

Thêm đoạn CSS sau vào template:

.showcomment{clear:both;text-align:center}
#showcomment{padding:5px 10px;margin:15px auto;cursor:pointer;color:#00ad63;font-weight:bold;font-size:100%}

Cách 2 - Tải Facebook Comment khi cuộn trang tới vị trí comment

- Bước 1: Thay thế code hiển thị Facebook Comment

<b:if cond='data:view.isSingleItem'>
<div id='fb-root'/>
<div class='fb-comments' colorscheme='light' expr:href='data:post.canonicalUrl' id='comments' max-width='650' numposts='10' width='100%'/>
</b:if>

- Bước 2: Javascript

Thay thế Facebook script phía trên thẻ </body> bằng :

<script>
//<![CDATA[ 
function loadAPI() {
    var js = document.createElement('script');
    js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxx&version=v2.10';
    document.body.appendChild(js);
}
window.onscroll = function () {
    var rect = document.getElementById('comments').getBoundingClientRect();
    if (rect.top < window.innerHeight) {
        loadAPI();
        window.onscroll = null;
    } 
}
//]]>
</script>

Thay xxx bằng Facebook appID của bạn

Lưu lại template và xem kết quả. Bạn sẽ thấy điểm số của Blog khi kiểm tra với công cụ PageSpeed Insights và GTmetrix được cải thiện đáng kể.