Another Way of Installing Disqus Comments for Blogger AMP HTML

Because Disqus is still the only comment system that already supports AMP HTML, we need to optimize the display of Disqus comments so that the display is in harmony with the look of the blog.

To be in harmony with the look of the blog, we need to set some disqus sections such as link colors and fonts in Disqus comments.

For that, there is another easier way to post Disqus comments on the AMP HTML blog that automatically adjusts the link color and font type.

Please use the amp-iframe code below to display DISQUS comments on Blogger.

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

Change bloggerdyah with your blog Disqus shortname.

Use sans-sarif if your blog's font type is blunt, replace it with serif if your blog's typeface is sharp.

Replace the e8554e code with the color code for your blog link.

Attention

For those who use a blog with a dark background, you must select Appearance with for dark background in the Disqus Settings.

If you want to save the html code yourself like amphtmldisqus.html above, please use the code below.

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

May be useful....