Cara 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 waktu yang lalu saya sudah membagika tutorial untuk Memasang Komentar Facebook Pada Blog AMP HTML. Dan pada kesempatan kali ini saya akan mencoba membuatkan artikel dengan judul Cara 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=CobaNgetik&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 CobaNgetik 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 Cara Hosting File Js, CSS dan HTML Di Github


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

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser