mengatasi loading comment facebook yang berat

mengatasi loading comment facebook yang berat

Bagi kau yang menggunakan system comment facebook pasti bakal nemuin problem ini ketika kau mengecek speed blog kau baik di page speed insight google GTmatrix dan lain nya, Lalu bagaimana semoga permasalah loading comment facebook tersebut mampu diatasi.

readmore : script lazy load gambar untuk mempercepat loading blogger

Nah siang ini aku mau membuatkan perihal bagaimana cara mengatasi loading comment facebook yang lambat mudah mudahan kau mampu 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 ibarat dibawah ini, Kalau sudah di edit dan disisipi dengan lazy load akan bermetamorfosis ibarat 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 ibarat 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 kau ingin menggunakan nya di wordpress kau mampu 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 kau mampu 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 kau gunakan sesuai dengan kebutuhan kamu, Jika ada pertanyaan jangan sungkan untuk berkomentar dibawah ini.

Tweet