How to Put Disqus Comments In Wordpress AMP HTML

How to Put Disqus Comments In Wordpress AMP HTML - To make a WordPress page an AMP HTML easier than changing Blogger to AMP HTML. There are several plugins that can be used to convert WordPress pages into AMP HTML.

But this time I will share how to install Disqus comments on WordPress that use the AMP plugin from Automattic. Since this plugin does not display comments on AMP pages, it only uses buttons that point to the default Wordpress non AMP default comment field.

How to Put Disqus Comments In Wordpress AMP HTML

1. The first thing to do is to make a WordPress page into an AMP HTML. Please type "amp" in the plugin search field then select AMP plugin by Automattic then install and activate.

2. After the AMP plugin is enabled, please edit the AMP plugin then click amp/templates/single.php. Add the code below.

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Save under code

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

Please find the code below

<article class="amp-wp-article">

Then please replace with the code below

<article id="post-<?php the_ID(); ?>" class="amp-wp-article">

Then save the code below above the code "</footer>"

<div class="disqus-box">
<amp-iframe src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/amphtmldisqus.html?shortname=Gointernet&fontBodyFamily=sans-serif&fontLinkColor=e8554e&url=<?php echo get_permalink(); ?>&identifier=post-<?php the_ID(); ?>" frameborder="0" height="321" layout="responsive" resizable="resizable" sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups" width="808">
<div aria-label="Disqus Comments" overflow="" role="button" tabindex="0"></div>
</amp-iframe>
</div>

Replace the code "Gointernet" with your blog Disqus shortname, use "sans-sarif" if your blog font type is dull, replace with serif if your blog font type is pointed. Replace the code "e8554e" with the color code for your blog link.

Then please click Update File.

3. Still in edit plugin, please click amp/templates/style.php then please save CSS below to remove button which leads to default comment of Wordpress non AMP and set location and display Disqus comment.

.amp-wp-article-footer .amp-wp-meta.amp-wp-comments-link {
    display: none;
}
.disqus-box amp-iframe {
    background: none;
    margin: 0 8px;
}

Then please click Update File.

Important to note! Please note these steps just in case the plugin is updated and the comment disappears, please do the above steps again.

A few articles about How to Put Disqus Comments In WordPress AMP HTML, hopefully with this short enough article can be useful for us and good luck.

Source: https://www.kompiajaib.com/2016/12/memasang-komentar-disqus-di-wordpress.html