Latest News

Cara Optimasi Loading Facebook Script, Dengan Defer JS

Jika sobat seorang yang suka menggunakan plugin widget dari facebook untuk fanspage ataupun tombol like, ataupun script comments facebook yang disematkan ditemplate blogger. Mungkin sobat perlu mengoptimalkan loading dari js script facebook tersebut.
Cara Optimasi Loading Facebook Script, Dengan Defer JS
Kita tahu dengan satu kode script facebook, maka sobat bisa menggunakan hampir semua plugin facebook. Nah, jika sobat seorang yang perduli dengan loading blog sobat agar tidak terasa begitu berat mungkin sobat perlu mengikuti cara ini.

Mengambil Script Facebook
Sebagai contoh kita akan membuat widget Fans Page, karena ini yang paling sering kita gunakan pada blog. Pertama masuk ke link berikut : https://goo.gl/Ldzjj9

Dan buat pengaturan seperti biasanya, dan sobat akan disuguhkan dua kode, yang satunya kode yang akan sobat letakkan setelah <head> ataupun sebelum </body> dan kode tersebut akan terlihat seperti berikut :
<!-- KODE PERTAMA -->
<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/id_ID/sdk.js#xfbml=1&version=v2.7";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Dan yang satunya kode dibawah ini yang biasanya akan kita tempatkan pada widget HTML/JAVACRIPT yang ada dimenu tata letak blogger.
<!-- KODE KEDUA -->
< div class = "fb-page"
data - href = "https://www.facebook.com/iwanberbagi/"
data - tabs = "timeline"
data - small - header = "false"
data - adapt - container - width = "true"
data - hide - cover = "false"
data - show - facepile = "true" > < blockquote cite = "https://www.facebook.com/iwanberbagi/"
class = "fb-xfbml-parse-ignore" > < a href = "https://www.facebook.com/iwanberbagi/" > IwanBerbagi.com < /a></blockquote > < /div>
Yang perlu sobat ganti hanyalan kode yang pertama, sedangkan kode yang kedua terserah mau diletakkan dimana aja yang diinginkan.

Mengganti Script Asli dengan Script Defer
Kode pertama tadi ganti dengan kode dibawah ini :
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    function downloadJSAtOnload() {
        var e = document.createElement("script");
        e.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.7", document.body.appendChild(e)
    }
    window.addEventListener ? window.addEventListener("load", downloadJSAtOnload, !1) : window.attachEvent ? window.attachEvent("onload", downloadJSAtOnload) : window.onload = downloadJSAtOnload;
//]]>
</script>
Kode tersebut sudah saya gabungkan dengan script defer yang saya dapatkan dari KOMPIAJAIB, saya tidak tahu juga kalau ternyata bisa digunakan untuk script facebook. Jadi inilah hasil dari percobaan saya dan mungkin sobat memiliki pemikiran yang sama tentang hal ini.

Dengan kode JS Facebook yang sudah di Defer ini maka script facebook akan diload lebih ramah dan tidak menggangu loading blog kita sobat. Semoga bermanfaat yah dan selamat mencoba.
Disqus CommentsLoadHide
Silahkan berkomentar sesuai topik pada Artikel ini, komentar akan saya balas ketika saya sedang tidak ada kesibukan lainnya.

Note : Blog ini menggunakan komentar disqus, jadi jika kamu belum mempunyai akun disqus kamu bisa dengan mudah mendaftarkannya disini, dan bisa segera kita saling berdiskusi. Tks