Memasang Komentar Disqus Dengan Tombol Click Load

Komentar disqus dengan click load adalah sebuah pillihan yang bijak jika ingin memasang komentar pihak ketiga di flatform blogger. Alasannya sangat sederhana, karena loading komentar disqus lumayan berat dan sangat mempengaruhi tampilan blog saat dimuat.

Sistem komentar Disqus adalah layanan hebat. Ini memungkinkan Anda untuk mengintegrasikan bagian komentar dengan fitur lengkap mulus dan sangat mudah di blog atau situs web Anda. Ini telah menghilangkan kebutuhan untuk mempertahankan komentar pengguna di server Anda sendiri yakni komentar bawaan blogger. Disqus menangani semua komentar yang dibuat di situs web Anda dan membuat mereka terkait dengan halaman yang sesuai. Ini memuat komentar dari server Disqus secara asinkron menggunakan AJAX.

Tapi ada masalah! Ketika sebuah halaman di situs web Anda memuat dan meminta komentar terkait dari server Disqus, ia harus membuat banyak pertanyaan GET. Semua komentar, komen komentator, file pendukung dll, semua ini harus datang jauh-jauh dari server Disqus ke halaman Anda. Akibatnya, kecepatan memuat halaman situs web Anda berkurang atau loading blog jadi lambat.

Bukankah lebih bagus jika Anda bisa memuat komentar Disqus sesuai permintaan? Misalnya, akan sangat baik untuk memuat komentar ketika pengguna mengklik tombol. Jika pengguna tidak ingin membaca atau mengirim komentar, maka tidak perlu mengambil atau berkomentar dari Disqus. Seperti pada permintaan beban komentar Disqus dapat dicapai dengan mengeksploitasi onClick event, pemuatan asinkron JavaScript Disqus dan / atau AJAX. Mari kita lihat bagaimana melakukan ini.

Keuntungan dari memuat Disqus saat klik:

Secara default, sistem komentar Disqus memuat javascript secara paralel untuk menampilkan widget. jadi itu mempengaruhi kecepatan memuat halaman. Untuk memuat Disqus pada klik meningkatkan kecepatan memuat halaman. Dibutuhkan waktu lebih sedikit untuk memuat.
Panjang halaman juga berkurang, membuatnya lebih mudah untuk menggulir ke atas dan ke bawah.
Sembunyikan komentar untuk menghemat ruang terutama jika dilihat pada perangkat seluler. Hal ini tntulah membuat halaman postingan blog jadi lebih bersih dan rapih.
lebih sedikit komentar spam.

Cara Memasang OnClick load komentar disqus

Kita gunakan cara yang pertama terlebih dahulu dengan menggunakan 5 tahap, Namun sebelumnya, perlu diperhatikan dulu, apakah Anda sudah memang atau mendaftar widget Disqus sebelumnya, Jika belum silakan baca dahulu artikel sebelumnya tentang Cara Daftar dan Instal Widget Disqus Di Blog dan bisa menerapkan juga disqus valid HTML5 pada tutorial tentang cara pasang komentar disqus valid HTML5

Namun jika sudah, abaikan saja dan kita lanjutkan tutorialnya. Follow this steps

1. Pasang CSS
pasang sebelum ]]></b:skin> atau dibawah <style>

/* Call Disqus OnClick by dewaplokis*/
button#dewaplokisDisqus {
    background-color: #008c5f;
    color: #fff;
    font: normal 600 16px Tahoma, sans-serif;
    line-height: 0px;
    text-align: center;
    width: 100%;
    border-width: 0px;
    padding: 20px 10px;
    cursor: pointer;
    transition: all .5s ease;
    border-radius: 3px;
    -moz-border-radius: 3px;
}
button#dewaplokisDisqus:hover {
    background: #1d2129;
}

Untuk button#dewaplokisDisqus backroundnya adalah backround tombol dan untuk button#dewaplokisDisqus:hover adalah warna tombol ketika di klik

2. Check Jquery
Check terlebih dahulu template blog Anda, apakah sudah terpasang script jquery, Jika belum, pasang kode ini dibawah kode <head> atau bisa juga diatas </head> namun jika sudah ada, abaikan saja

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

3. Kode HTML
Untuk kode HTML, silahkan tambahkan kode berikut setelah <div class='comments' id='comments'/>

<div class="disqus-blogger-comment-block"/>
<button id="dewaplokisDisqus">Buka Komentar</button> <!--Tulisan di tombol -->

Maka Nanti hasilnya akan seperti ini

<div class='comments' id='comments'/>
<div class="disqus-blogger-comment-block"/>
<button id="dewaplokisDisqus">Buka Komentar</button> <!--Tulisan di tombol -->

4. Java Script
Untuk scriptnya letakkan diatas kode </body>

<b:if cond='data:view.isPost'>
<script>
 //<![CDATA[
 // Call Disqus On Click by dewaplokis
 window.disqus_blogger_current_url = $('link[rel=canonical]').attr('href');
 window.disqus_shortname = 'dewaplokis'; // Ganti dengan shortname Disqus kamu
 $('#dewaplokisDisqus').on('click', function(){
 $.ajax({
  type: 'GET',
  url: '//' + disqus_shortname + '.disqus.com/blogger_item.js',
  dataType: 'script',
  cache: true
 });
 $(this).fadeOut();
 });
//]]>
</script>
</b:if>

5. Selesai,
Silakan save template dan lihat hasilnya, Jika belum terlihat hasilnya, coba reload halaman blogger Anda.

Cara Memuat Disqus Dengan Tombol Load

Sekarang kita menuju ke cara yang kedua tentang click load disqus comments. Ikuti langkah-langkahnya dengan tepat sehingga nantinya tidak ada yang error.

1. JAVA SCRIPT
Tambahkan kode ini sebelum tag </body> atau </body>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
var disqus_shortname = &quot;dewaplokis&quot;;
!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();
</script>
<script type='text/javascript'>
!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();
//<![CDATA[
function load_Comments(){var e=document.getElementById("disqusshow");e.style.display="none";var t="dewaplokis";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()}
//]]>
</script>
</b:if>

Ganti dewaplokis dengan akun disqus milik Anda.

2. HTML
Code Cari kode ini
<b:includable id='comments' var='post'>...</b:includable>

kemuadian jika sudah ketemu dengan kode tersebut, tambahkan kode ini tepat dibawahnya

<b:includable id='disqus-comment' var='post'>
<script type='text/javascript'>
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
    if (!disqus_blogger_current_url.length) {
     disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
    }
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
    var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
</script>
</b:includable>

setelah itu silahkan tambahkan kode ini dibawah kode
<b:includable id='comments' var='post'>

<div id='disqusshow' onclick='load_Comments()'><i class='fa fa-comments'/> Load comments</div><div id='disqus_thread'/>

maka hasilnya akan seperti ini

<b:includable id='comments' var='post'>
<div id='disqusshow' onclick='load_Comments()'><i class='fa fa-comments'/> Load comments</div><div id='disqus_thread'/>

3. CSS Code
Selanjutnya untuk kode cssnya simpan di bawah kode </head> atau </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Onclick Disqus Comment */
#comments {
    display: none
}
.post-comment-link {
    visibility: hidden
}
#disqus_thread {
    background: #fff;
    margin: 10px 0 0 0;
    padding: 0
}
#disqusshow {
    position: relative;
    overflow: hidden;
    display: block;
    text-align: left;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    letter-spacing: 0;
    line-height: 20px;
    margin: 10px auto;
    padding: 10px;
    background: #00b894;
    color: #fff;
    transition: all .3s
}
#disqusshow:hover,
#disqusshow:active {
    color: #fff
}
</style>
</b:if>

Atur CSS sesuai kebutuhan, Sesuaikan dengan template blog Anda

Selesai. Save Template dan lihat hasilnya, Jika masih belum bekerja, coba load ulang halaman blogger Anda, Namun jika masih belum muncul juga, coba check pengaturan komentar blog Anda. Silakan masuk ke setting / pengaturan > Posts. comments and sharing dan Pastikan aturannya sudah seperti gambar dibawah ini.

Jika Komentar disqusnya belum muncul, ubah pengaturan Comment Location dari "Embedded" menjadi "Hide"

Demikian tutorial tentang cara pemasangan onclick load event tombol komentar disqus agar mempercepat laoding blog dan tetntunya valid HTML5. Silakan share postingan ini jika bermanfaat. Jika ada yang masih kurang jelas, silakan ajukan pada kolom komentar.

Sumber :