2. »
    3. »

Mempercepat Blog #5 - Memanggil Komentar Disqus Ketika Klik Tombol

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 tidak 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

SPertama-tama pasang dulu kotak komentar Disqus ke blog. Caranya ada di artikel yang berjudul Cara Memasang Komentar Disqus di Blogger. Setelah itu lanjut dengan panduan di bawah.

Baca Juga: Lazy Load Youtube:Memuat Video Saat Klik

1. Untuk Blogger

  1. Percantik dulu tampilan tombolnya dengan menambahkan beberapa baris kode CSS. Simpan kode berikut DI ATAS ]]></b:skin>. Atau bisa juga 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 */
}
  2. 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>
  3. 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> <!--Tulisan di tombol -->
  4. 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>
  5. 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.

  1. Untuk CSS, kodenya sama. Mau disesuaikan dengan template masing-masing juga bisa.
  2. 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>
  3. 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.

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

Baca Juga
... Pin Share Share

KLIK
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

41 Komentar

  1. Séptino Wibowo07 March, 2018

    kok gk work ya mbk?

    ReplyDelete
  2. Séptino Wibowo07 March, 2018

    akhirnya work hehe

    ReplyDelete
    Replies
    1. Timon Adiyoso07 March, 2018

      Saya cek blog mas... Klik Buka Komentar ngak muncul muncul komentarnya... Blank

      Delete
    2. igniel07 March, 2018

      Saya buka, muncul kok mas. Emang agak lama karena komentar Disqus itu berat.

      Delete
  3. Rajib Daiki07 March, 2018

    kok ga work y

    ReplyDelete
    Replies
    1. igniel07 March, 2018

      Kalo semua kode terpasang dengan benar, pasti work kaya demonya.

      Delete
    2. Rajib Daiki07 March, 2018

      hmm apa w ss semua kode yg w pasang

      Delete
    3. Rajib Daiki07 March, 2018

      saya kirim ss nya di komentar fp artikel ini

      Delete
    4. Rajib Daiki08 March, 2018

      thax dh bisa itu ga muncul gara gara w taru di bawah html nya dibawah tpi pas di taru di atas baru bisa

      Delete
  4. Pierre Will03 June, 2018

    udah coba pasang, gak works :(

    ReplyDelete
    Replies
    1. Pierre Will03 June, 2018

      akhirnya bisa diaplikasikan setelah widget Disqus yang sudah ada sebelumnya saya hapus..

      Delete
    2. igniel04 June, 2018

      Iya memang harus dihapus dulu biar gak bentrok. Semangat terus ngeblognya.

      Delete
    3. Azid Zainuri Spd29 December, 2018

      makasih mbak. work.
      kalau buat komment kayak milik kak igniel yang ini gmana kak?
      ini udah dimodif ya.

      Delete
  5. Ian Archuleta23 November, 2018

    mbk punya saya di halaman statis kok gk muncul ya kalo di postingan biasa ada

    ReplyDelete
    Replies
    1. Igniel23 November, 2018

      Kayanya kodenya disimpen di tag kondisional post. Simpen di luar tag kondisional ya.

      Delete
  6. Bachrul Uluum02 December, 2018

    shortname disqus tu yang nama komentar disqus kita ya mbak?

    ReplyDelete
  7. 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
    1. Igniel05 January, 2019

      Scriptnya terhalang oleh script lain yang error. Coba hapus fungsi ini:
      function blockLinks(e,n){.....}

      Delete
    2. tedi eka05 January, 2019

      Sudah saya hapus mbak, tapi masih gk mau terload. Apa mungkin masih ada script lain dari komentar blogger yang belum saya hapus?

      Delete
    3. Igniel05 January, 2019

      Coba tambahkan elemen baru di bawah script disqus tadi.
      <div class="comments" id="comments"></div>

      Delete
    4. tedi eka05 January, 2019

      Akhirnya beres hehe.. Makasih banyak bantuannya mbak.

      Delete
  8. Syaiful bahri10 February, 2019

    Mba kode query diblog saya versi 1.7.1 apakah tetap bisa ?

    ReplyDelete
  9. 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
    1. Igniel20 February, 2019

      Kasih tag kondisional aja.
      <b:if cond='data:view.isPost'>
      kode tombol disini
      </b:if>

      Delete
    2. Andhika Elfriza20 February, 2019

      Iyah mba semalem iseng² berhasil, tapi yg di atas tutup body kode kondisionalnya saya hapus mba, itu ada efek sampingnya gak yah?

      Delete
  10. 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
  11. 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
  12. Admin29 April, 2019

    kalo di wordpress kode nya taruh mana aja nih?

    ReplyDelete
  13. Sakti15 May, 2019

    Ini buat wp bisa gak yah ?

    ReplyDelete
  14. 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
    1. hasan19 May, 2019

      Kalo mau cek, bisa liat di blogku
      https://hasanaskary.blogspot.com . Yg postingan berjudul rejeki itu pasti ada beda dengan postingan sebelum²nya. Mungkin ini bisa jadi daftar kasus yang akan kk pecahkan

      Delete
    2. Igniel23 May, 2019

      Saya cek work kok. Komentarnya muncul di semua post

      Delete
  15. 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
    1. Azid Zainuri, S.Pd23 May, 2019

      klo saya lihat sepertinya kakaknya belum memasang script Jquery jadi tidak berfungsi.

      Delete
    2. Nasrul Umam24 May, 2019

      Fix, penempatan jquery kurang pas. 😄😄

      Delete
  16. Ifan27 May, 2019

    mau nanya, ini di website saya komen nya terlalu lebar untuk wordpress.

    ReplyDelete
    Replies
    1. Igniel27 May, 2019

      Alamat blognya apa? Biar saya cek.

      Delete
  17. Penaku03 June, 2019

    Mbak maaf mah tanya , itu jenis iklan apa ya yg dalam artikel, seolah-olah iklan ada di bawah artikel , dan ada gk tutor custom komentar biar kaya begini tampilannya

    ReplyDelete
    Replies
    1. Igniel04 June, 2019

      Namanya iklan parallax.

      Untuk tampilan komentar cek:
      https://www.igniel.com/2018/09/komentar-baru-blogger.html

      Delete

  1. Untuk menulis kode gunakan <i>KODE</i>
  2. Untuk menyisipkan kode ke dalam Syntax Highlighter gunakan <em>KODE YANG LEBIH PANJANG</em>
  3. Kode harus di-parse terlebih dulu agar bisa ditulis.
  4. Centang Notify me untuk mendapatkan notifikasi balasan komentar melalui Email.