Skip to main content

Memasang Komentar Disqus Untuk Blog AMP HTML

Untuk saat ini baru ada dua sistem komentar yang sudah suport untuk blog AMP HTML, ya itu komentar Disqus Dan komentar Facebook. Pada artikel sebelumnya Saya sudah membagikan tutorial untuk Cara Pasang Komentar Facebook Pada Blog AMP HTML. Dan pada kesempatan kali ini Saya akan mencoba membuatkan artikel dengan judul Memasang Komentar Disqus Untuk Blog AMP HTML.

Tutorial ini Saya dapatkan dari blog Kompi Ajaib yang berjudul Cara Lain Memasang Komentar Disqus Untuk Blogger AMP HTML. Cara ini adalah cara yang mudah dan otomatis mengatur warna link dan jenis hurufnya. Jika Anda berminta untuk memasang komentar Disqus untuk blog AMP Anda, mari ikuti caranya seperti berikut.

1. Masuk pada akun Blogger.
2. pilih Tema/Template, kemudian klik Edit HTML.
3. Cari kode <b:includable id='comments' var='post'>
kemudian copy amp-iframe dibawah ini, dan simpan tepat dibawah kode <b:includable id='comments' var='post'>


<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/amp_html_disqus.html?shortname=websitemini&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>

Jangan lupa ganti websitemini dengan shortname Disqus blog Anda.
Gunakan sans-sarif jika jenis huruf blog Anda tumpul, ganti dengan serif jika jenis huruf blog Anda lancip.
Dan ganti kode e8554e dengan kode warna untuk link blog Anda.

Catatan

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

Jika ingin menyimpan kode html-nya di hosting sendiri seperti amphtmldisqus.html di atas, silahkan gunakan kode di bawah ini.
Baca juga: Mengatasi URL Menjadi Link Aktif Di Komentar Disqus


<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 artikel tentang Cara Memasang Komentar Disqus Untuk Blog AMP HTML. Semoga bermanfaat.

You Might Also Like:

Buka Komentar