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.


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~

SHARE Pin Share
Artikel Terkait
46 komentar
  1. kok gk work ya mbk?

    BalasHapus
  2. akhirnya work hehe

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

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

      Hapus
  3. Balasan
    1. Kalo semua kode terpasang dengan benar, pasti work kaya demonya.

      Hapus
    2. hmm apa w ss semua kode yg w pasang

      Hapus
    3. saya kirim ss nya di komentar fp artikel ini

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

      Hapus
  4. udah coba pasang, gak works :(

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

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

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

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

    BalasHapus
    Balasan
    1. Kayanya kodenya disimpen di tag kondisional post. Simpen di luar tag kondisional ya.

      Hapus
  6. shortname disqus tu yang nama komentar disqus kita ya mbak?

    BalasHapus
  7. 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

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

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

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

      Hapus
    4. Akhirnya beres hehe.. Makasih banyak bantuannya mbak.

      Hapus
  8. Mba kode query diblog saya versi 1.7.1 apakah tetap bisa ?

    BalasHapus
  9. 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?

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

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

      Hapus
  10. Mbak punya Saya di desktop bisa terloading, tetapi saat di mobile kok nggak bisa terloading yang mbak. Mohon jawabannya 😐

    BalasHapus
  11. 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. :)

    BalasHapus
  12. kalo di wordpress kode nya taruh mana aja nih?

    BalasHapus
  13. Ini buat wp bisa gak yah ?

    BalasHapus
  14. 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.

    BalasHapus
    Balasan
    1. 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

      Hapus
    2. Saya cek work kok. Komentarnya muncul di semua post

      Hapus
  15. 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

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

      Hapus
    2. Fix, penempatan jquery kurang pas. 😄😄

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

    BalasHapus
    Balasan
    1. Alamat blognya apa? Biar saya cek.

      Hapus
  17. 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

    BalasHapus
    Balasan
    1. Namanya iklan parallax.

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

      Hapus
  18. terimakasih kak igniel work tapi emang harus diapus dulu widget lamanya.

    BalasHapus
  19. Mbak Template Punya Saya Kok Nggak Ada Kode <div class='comments' id='comments'

    BalasHapus
  20. Terimakasih Mbak Igniel Work Disqus Nya Jadi Cepet Nggak Berat, Soal Nya Juga Blog Forum

    BalasHapus
  21. PENGUJI: Ibu Ria Maulidina
    NEGARA: Indonesia
    KOTA: Semarang
    WHATSAPP SAYA NO: +62821-3272-6590
    HIBAH PINJAMAN: Rp 500.000.000
    BANK: BCA REKENING No: 1750825253
    EMAIL: [email protected]

    PERUSAHAAN PINJAMAN: PERUSAHAAN PINJAMAN KARINA ELENA ROLAND
    EMAIL: [email protected]
    WHATSAPP NO: +15857083478
    NAMA FACEBOOK: karina elena roland

    Nama saya MRS RIA MAULIDINA, saya mengalami kekacauan keuangan, saya tidak punya pilihan selain mencari agen pinjaman terkemuka secara online yang menyewakan pinjaman kepada yang membutuhkan tetapi yang saya dapatkan hanyalah sekelompok penipu karena saya percaya pemberi pinjaman kedua yang saya komunikasikan dengan karena keputusasaan saya untuk mendapatkan uang secepatnya dan itu membuat saya mengirimkan kepadanya satu-satunya uang yang saya miliki baik di bumi maupun di surga, mereka terus meminta lebih dan ini membuat saya marah karena saya harus menutup email itu karena saya menyadari sial dan saya tidak repot-repot online untuk mendapatkan bantuan lagi, karena saya tidak mempercayainya lagi. Saya menjadi sangat kurus karena kekurangan makanan yang baik dan 2 anak saya yang berusia 5 dan 8 tahun juga tidak tampan selama periode penguncian COVID19 ini tidak ada perawatan yang tepat sebagai akibat dari keuangan, minggu berjemur saya melihat seorang teman keluarga lama dari suami saya dan saya memberi tahu dia semua yang telah saya lalui dan dia mengatakan satu-satunya cara dia dapat membantu adalah mengarahkan saya ke agen peminjaman yang baik yang juga membantunya dan dia juga menjelaskan bagaimana dia secara finansial turun dan bagaimana dia mendapat dorongan dari pinjaman ini agensi KARINA ELENA ROLAND LOAN COMPANY ([email protected]) yang memberinya pinjaman dengan harga terjangkau sebesar 2% dan dia lebih lanjut meyakinkan saya bahwa mereka sah dan bukan scammer dan dia juga memberi tahu saya apa yang perlu dilakukan {PERUSAHAAN PROSEDUR ADMINISTRATIF} dan dia juga memberi saya alamat email bereputasi ini dan saya menghubungi mereka seperti yang diinstruksikan dan dengan rahmat TUHAN YANG MAHA ESA saya juga diberikan dana pinjaman saya sebesar Rp 500.000.000 dalam waktu 2 jam setelah aplikasi saya dijumlahkan tanpa stres atau masalah lems dan inilah mengapa saya datang ke sini untuk memberikan kesaksian saya dan memberi tahu orang-orang bahwa masih ada agen pinjaman online yang nyata dan terkemuka. hubungi mereka melalui (karinarolandloancompany @ gmail. com) atau melalui +15857083478

    BalasHapus
  22. Permisi Min Saya Ingin bertanya di tema saya gk ada

    class='comments' id='comments'

    nah cara pemasangan script diatas itu caranya gmn yah?

    BalasHapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!