Cara Lain Memasang Komentar Disqus Untuk Blogger AMP HTML

Ditulis oleh: Adhy Suryadi

Ditulis pada: 12/10/2016

Karena Disqus masih satu-satunya sistem komentar yang sudah mendukung AMP HTML, maka tampilan komentar Disqus perlu kita optimalkan agar tampilannya menjadi selaras dengan tampilan blog.

Agar selaras dengan tampilan blog, kita perlu mengatur beberapa bagian disqus seperti warna link dan jenis huruf pada komentar Disqus.

Untuk itu ada cara lain yang lebih mudah untuk memasang komentar Disqus pada blog AMP HTML yang otomatis mengatur warna link dan jenis hurufnya.

Terima kasih kepada jp26jp yang mempunyai ide untuk mempermudah customisasi komentar Disqus pada blog AMP.

Silahkan gunakan kode amp-iframe di bawah ini untuk menampilkan komentar DISQUS  di Blogger.

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

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

Perhatian

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

Jika ingin menyimpan sendiri kode html-nya seperti amphtmldisqus.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>