Mempercepat Blog #5 - Memanggil Komentar Disqus Ketika Klik Tombol

Igniel

How To Call Disqus Comment onClick Button

Hai hai. Blog Igniel balik lagi dengan satu trik yang bisa membantu untuk mempercepat loading blog. Seperti judulnya, ini berhubungan dengan kotak komentar Disqus. Normalnya, komentar Disqus akan langsung termuat ketika halaman blog sudah terbuka. Ini menjadi salah satu hal yang memperlambat kecepatan blog. Skor di GTmetrix, Page Speed Insight, atau di tempat lainnya jadi susah dapat A / 100%.

Dengan trik ini, komentar Disqus nggak bakal langsung termuat ketika halaman blog terbuka. Jadi sudah jelas kan nilai plusnya apa. Ini akan mempercepat loading blog karena script Disqus baru dipanggil ketika visitor melakukan klik.

Cara Memuat Komentar Disqus Dengan Klik Tombol

Saya anggap kamu sudah paham cara pasang Disqus di blog. Jadi kita langsung ke scriptnya saja.

1. Untuk Blogger

Percantik dulu tampilan tombolnya dengan menambahkan beberapa baris kode CSS. Simpan kode berikut SEBELUM / DI ATAS ]]></b:skin>. Atau bisa juga SESUDAH / DI BAWAH <style>.

/* Call Disqus On Click by IGNIEL.COM */
button#ignielDisqus {
    background-color: #008c5f; /* Warna tombol */
    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#ignielDisqus:hover {
    background: #1d2129; /* Warna tombol ketika disorot */
}

Pastikan di blog kamu sudah terpasang script jQuery. Kalau belum, pasang kode ini SESUDAH / DI BAWAH <head>. Kalau sudah, abaikan saja.
```
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
```

Tambahkan kode HTML ini, posisinya boleh dimanapun. Tergantung kamu mau memanggilnya dimana. Normalnya sih komentar Disqus disimpan SESUDAH / DI BAWAH <div class='comments' id='comments'>.
```
<div class="disqus-blogger-comment-block"/>
<button id="ignielDisqus">Buka Komentar</button> 
```

Next. Simpan kode ini SEBELUM / DI ATAS </body>.

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

Selesai. Simpan pengaturan dengan klik tombol Save theme.

2. Untuk Wordpress dan Platform Website / Blog Lainnya

Script pertama khusus untuk Blogger ya. Nah, yang selanjutnya bisa untuk semua jenis website / blog.

Untuk CSS, kodenya sama. Mau disesuaikan dengan template masing-masing juga bisa.

Ini HTMLnya. Simpan di tempat komentar Disqus ingin dipanggil.

<div id="disqus_thread"></div>
<div id="disqus-comments">
    <button id="ignielDisqus">Buka Komentar</button> <!--Tulisan di tombol -->
</div>

Ini Javascriptnya. Ada sedikit perbedaan di alamat javascript Disqus yang dipanggil.

<script> //<![CDATA[
    // Call Disqus On Click by IGNIEL.COM
    $('#ignielDisqus').on('click', function(){
    var disqus_shortname = 'igniel' // Ganti dengan shortname Disqus kamu
        $.ajax({
             type: 'GET',
             url: '//' + disqus_shortname + '.disqus.com/embed.js',
             dataType: 'script',
             cache: true
        });
        $(this).fadeOut();
    });
//]]> </script>

3. Demo / Preview

Buka halaman ini biar tahu hasilnya seperti apa.

Lihat Demo

Super simple kan scriptnya? Budayakan komentar kalau sudah membaca ya. Semoga sukses mempraktekan cara buka komentar Disqus dengan tombol diatas. Enjoy~

36 Komentar

Séptino Wibowo07 March, 2018
kok gk work ya mbk?
ReplyDelete
Replies
Séptino Wibowo07 March, 2018
akhirnya work hehe
ReplyDelete
Replies
Rajib Daiki07 March, 2018
kok ga work y
ReplyDelete
Replies
Pierre Will03 June, 2018
udah coba pasang, gak works :(
ReplyDelete
Replies
Ian Archuleta23 November, 2018
mbk punya saya di halaman statis kok gk muncul ya kalo di postingan biasa ada
ReplyDelete
Replies
Bachrul Uluum02 December, 2018
shortname disqus tu yang nama komentar disqus kita ya mbak?
ReplyDelete
Replies
tedi eka05 January, 2019
Mbak saya coba pasang di blog kok gk bisa terload scriptnya ya? Padahal sudah ada jquerynya. Ini urlnya, mohon dicekkan kalau ada waktu

https://bloggtipssehat.blogspot.com/2017/09/cara-mengobati-sakit-gigi-dengan-cepat.html
ReplyDelete
Replies
Syaiful bahri10 February, 2019
Mba kode query diblog saya versi 1.7.1 apakah tetap bisa ?
ReplyDelete
Replies
Andhika Elfriza19 February, 2019
Mba itu kok tombol Buka Komentarnya juga tampil di Halaman Statis yah? tapi gak berfungsi link nya. Supaya tidak tampil di Halaman Statis gimana yah mba?
ReplyDelete
Replies
Top Gadget Indonesia27 February, 2019
Mbak punya Saya di desktop bisa terloading, tetapi saat di mobile kok nggak bisa terloading yang mbak. Mohon jawabannya 😐
ReplyDelete
Replies
Rich Ard24 April, 2019
akhirnya, setelah 2 tahun mencari-cari tutorial memasang tombol buka komentar, ini yang benar-benar work. terima kasih atas penjelasannya kak, sehat selalu yah buat kk. aamin. :)
ReplyDelete
Replies
Admin29 April, 2019
kalo di wordpress kode nya taruh mana aja nih?
ReplyDelete
Replies
Sakti15 May, 2019
Ini buat wp bisa gak yah ?
ReplyDelete
Replies
hasan19 May, 2019
Work kak. Tapi di blogku kok jadi ada dua ya. Komentar Disqus sama google. Tapi kalo komentar googlenya diisi, komentar disqusnya (tombol buka komentarnya)ilang . Dan gak sama di halaman postingan satu dan lainnya.
ReplyDelete
Replies
Nasrul Umam22 May, 2019
Tanya mbak, saya pasang script di atas tetapi hanya pada halaman yang di tentukan, kadang bisa di klik lalu muncul box disqus nya, tetapi sering jg hanya berubah menjadi hitam saja tombol buka komentar nya . Apa yg salah ya?
https://www.kum3n.com/p/discussion.html
ReplyDelete
Replies