Mengatasi Loading Comment Facebook Yang Berat

mengatasi loading comment facebook yang berat

Bagi kau yang memakai system comment facebook niscaya bakal nemuin problem ini dikala kau mengecek speed blog kau baik di page speed insight google GTmatrix dan lain nya, Lalu bagaimana biar permasalah loading comment facebook tersebut dapat diatasi.

readmore : script lazy load gambar untuk mempercepat loading blogger

Nah siang ini aku mau membuatkan wacana bagaimana cara mengatasi loading comment facebook yang lambat mudah mudahan kau dapat 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 memakai nya di wordpress kau dapat memakai 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 dapat memakai 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.