Cara Mudah Memasang Komentar Disqus Pada Blog Amp

Cara Mudah Memasang Komentar Disqus Pada Blog Amp Kali ini saya akan share tutorial Cara Memasang Komentar Disqus di Blog AMP, Komentar Disqus banyak kita temui dibeberapa website blogger maupun wordpress, komentar Disqus sendiri memiliki beberapa keunggulannya tersendiri dibandingkan dengan Komentar asli bawaan Blogger Deflaut. Selain tampilannya yang Elegan, Dinamis dan Keren dilihat, ternyata komentar disqus ini sudah support dengan Blog AMP. Selain itu juga Komentar pada Disqus disebuah web juga mudah terindex oleh Pencarian Google. Selain SEO dan Tampilannya yang unik ada beberapa lagi yang dapat menambah keinginan kamu untuk memasang Komentar Disqus bada blog.

Baca Juga : Cara Menampilkan Parse Tool Untuk Komentar Disqus Pada Blog AMP

Namun untuk sekarang blogger belum mensupport pada sebuah blog valid Amp, tapi ada banyak mastah blogger sekarang mengakali setiap permasalahan pada blog amp. Salah satunya adalah di mode Komentar pada blog amp, agar blog valid amp satu-satunya cara yaitu dengan menggunakan CDN Rawgit yaitu di menghosting terlebih dahulu.

Keunggulan Komentar Disqus di Blog Amp

Ada banyak sekali keunggulan-keunggulan Komentar Disqus dibanding dengan Komentar bawaan Blogger berikut keunggulannya :

• Tampilannya yang Elegan dan Keren
• Bisa berkomentar dengan berbagai akun. Seperti Google+, Facebook, Twitter dll
• Komentar yang Real Time (Ada pengunjung yang berkomentar, komentarnya langsung muncul notifikasi dan tanpa harus refresh halaman kamu atau juga pengunjung tersebut)
• Bisa mengimpor komentar bila kamu mengganti domain ataupun platform
• Memiliki sistem keamanan yang unik untuk mengatasi SPAM dan tidak perlu menggunakan captha untuk keamanan tersebut.
• Komentar Disqus muncul di Search Engine. dan bagus Untuk SEO
• Sudah Responsive dan Mobile Friendly diberbagai Perangkat, Seperti Smartphone dan Tablet
• Bisa memblokir Akun yang membuat onar atau spam diblog
• Bisa menampilkan dan mengupload Gambar di dalam komentar
• Muncul Notifikasi Bila ada yang berkomentar, Notifikasi bisa disetting aktif dan juga tidak.
• Muncul Notifikasi via Email
• Menambahkan admin atau staf karena bisa bersifat Group. Jadi kamu tidak perlu repot-repot untuk menghapus komentar-komentar yang syaland, staff kamu bisa menghapus komentar pada disqus.

dan masih banyak lagi keunggulan keunggulan yang kamu bisa rasakan setelah kamu memasang Komentar Disqus.

Kelemahan Komentar Disqus

Pada setiap keunggulan yang banyak pastilah disitu ada kekurangannya. Kalau menurut saya pribadi kekurangan yang ada pada Komentar Disqus adalah di bagian Fitur. Fitur manakah yang saya maksud, tentu saja Fitur Emoticon. Pada Komentar Disqus untuk sekarang ini memang belum ada Fitur Emoticonnya. Sebenarnya pemasangan Emoticon pada Komentar Disqus bisa saja dilakukan oleh Pengembang Komentar Disqus. Namun untuk beberapa hal mungkin saja terdapat kelemahan pada Fitur Emoticon, Entah dari segi Responsive, SEO dan Kecepatan Loading.

Baca Juga : Membuat Tombol Show Hide Disqus Comment pada Template AMP

Memasang Komentar Disqus Pada Blog Amp HTML

Untuk langkah-langkah memasang komentar disqus di blog amp sobat. Maka, sobat bisa ikuti langkah-langkahnya dengan mudah dibawah ini.

1. Masuk ke dashboard blogger pilih tema/template lalu edit Html
2. Kemudian cari kode <b:includable id='comments' var='post'> masukan kode dibawah ini tepat di bawah <b:includable id='comments' var='post'>

<amp-iframe expr:src='&quot;https://cdn.rawgit.com/darwinisrin/siijombi.html/master/amp-disqus3.html?shortname=darwinisrin&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=e8554e&amp;url=&quot; + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'>Disqus Comments</div>
</amp-iframe>

Note :
Ganti kompiajaib dengan shortname Disqus blog sobat.
Gunakan sans-sarif jika jenis huruf blog sobat tumpul, ganti dengan serif jika jenis huruf blog sobat lancip.
Ganti kode e8554e dengan kode warna untuk link blog sobat.

3. Ganti Tulisan biru atau darwinisrin ubah dengan Shortname disqus sobat lalu save.

Untuk yang menggunakan blog dengan background gelap, sobat harus memilih Appearance dengan for dark background di Setting Disqus.

Baca Juga : Cara Mengatur Warna Link Disqus Pada Blog AMP

Jika ingin menghosting sendiri sobat bisa menggunakan kode html-nya seperti amph-disqus3.html di atas, silahkan gunakan kode di bawah ini.

<div id="disqus_thread"></div>

<script>
  window.addEventListener('message', receiveMessage, false);

  function receiveMessage(event) {
    if (event.data) {
      var msg;
      try {
        msg = JSON.parse(event.data);
      } catch (err) {}
      if (!msg)
        return false;
      if (msg.name === 'resize') {
        window.parent.postMessage({
          sentinel: 'amp',
          type: 'embed-size',
          height: msg.data.height
        }, '*');
      }
    }
  }

  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split('=');
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return (false);
  }

  function generateCss(q) {
    var css       = document.createElement('style'),
        sp2       = document.getElementById('disqus_thread'),
        parentDiv = sp2.parentNode;
    css.type = 'text/css';
    if (css.styleSheet) css.styleSheet.cssText = q;
    else css.appendChild(document.createTextNode(q));
    parentDiv.insertBefore(css, sp2);
  }

  var disqus_config = function() {
    this.page.url = getQueryVariable('url');
  };

  (function() {
    var d = document,
        s = d.createElement('script'),
        q = '#disqus_thread {font-family:' + getQueryVariable('fontBodyFamily') + '} a {color:#' + getQueryVariable('fontLinkColor') + '}';
        generateCss(q);
    s.src = '//' + getQueryVariable('shortname') + '.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
  })();
</script>

Demikian postingan kali ini tentang Cara Mudah Memasang Komentar Disqus Pada Blog Amp, semoga bermanfaat. Happy Blogging!

Sumber : www.kompiajaib.com