mengatasi loading comment facebook yang berat

mengatasi loading comment facebook yang berat

Bagi kamu yang menggunakan system comment facebook pasti bakal nemuin masalah ini saat kamu mengecek speed blog kamu baik di page speed insight google GTmatrix dan lain nya, Lalu bagaimana agar permasalah loading comment facebook tersebut bisa diatasi.

readmore : script lazy load gambar untuk mempercepat loading blogger

Nah siang ini saya mau berbagi tentang bagaimana cara mengatasi loading comment facebook yang lambat mudah mudahan kamu bisa mengerti dan memahami cara merubah script comment kamu.

Script lazy load untuk comment facebook di blogger dan wordpress :

Jika script default dari facebook pada umumnya seperti dibawah ini, Kalau sudah di edit dan disisipi dengan lazy load akan berubah menjadi seperti dibawah nya.

<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/zh_CN/sdk.js#xfbml=1&version=v2.7";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Script default comment yang telah di modif akan menjadi seperti ini :

// Lazy Load Facebook SDK

function loadFacebookAPI(callback) {
    var js = document.createElement('script');

    js.src = "//connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v2.7";
    document.body.appendChild(js);

    js.onload = callback();
}

Jika kamu ingin menggunakan nya di wordpress kamu bisa menggunakan script dibawah ini:

<div id="fb-comments">
    <button id="comments-button" class="comments-button"><?php _e( 'Show Comments', 'plol' );?></button>    
    <div id="fb-root"></div>
    <div class="fb-comments" data-href="{{URL_TO_COMMENT}}" data-numposts="5"></div>
</div>

Atau kamu bisa menggunakan script LOAD THE JAVASCRIPT SDK ON CLICK

document.getElementById('comments-button').addEventListener('click', function() {
    var fb_wrap = document.getElementById('fb-comments');

    if (typeof(fb_wrap) == 'undefined' || fb_wrap == null) {
        return;
    }

    if (fb_wrap.classList.contains('loaded')) {
        return; // If Facebook JS already loaded, do nothing
    }

    loadFacebookAPI(function() {
        console.log('js loaded.');
        fb_wrap.className = "loaded";
    });
});

Silahkan kamu gunakan sesuai dengan kebutuhan kamu, Jika ada pertanyaan jangan sungkan untuk berkomentar dibawah ini.