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

  1. 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 */
    }

  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.

Lihat Demo

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

DONASI VIA PAYPAL

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

Artikel Terkait

12 Komentar

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

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

      Delete
  2. Replies
    1. Kalo semua kode terpasang dengan benar, pasti work kaya demonya.

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

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

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

      Delete
  3. udah coba pasang, gak works :(

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

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

      Delete

Gunakan tag HTML <em> untuk menuliskan URL, potongan kode, atau hal penting lainnya.
Contoh: <em>isi pesan</em>