How to Put Show Hide Comments On HTML AMP Blogs

How to Put Show Hide Comments On HTML AMP Blogs - Comments are one of the important elements on a blog that although sometimes the blog visitors ignore its existence. With comments will make a blog post become more communicative between author post with readers.

As we know that in the new AMP HTML there are 2 pieces of comments system that supports AMP HTML namely: Facebook Comments and Disqus Comments. And as with comments on Non AMP blogs, comments on AMP blogs also provide additional loading on blogs. For that we need to outsmart the installation of comments on the AMP blog so as not to contribute loading.

One way to delay posting comments on an AMP blog is to show hide a comment so comments will be loaded when the show hide button is clicked. With show hide comments on the AMP HTML blog, the page loading becomes lighter and more accessible.

So then this time we will make a show hide for Disqus comments or Facebook comments by using only AMP action so it will be easier to customize show hide button with CSS. Here we just choose what comment system will be used and comments are only displayed on the posting page only.

How to Put Show Hide Comments On HTML AMP Blogs

If you want to try it, please follow the steps below.

1. Show hide Disqus comments.

Please add the following CSS in your AMP custom-blog style.

*{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.disqus{margin:0 -8px;padding:0 0 20px;font-family:Roboto,sans-serif;}
.disclaimer_box{width:100%;padding:2px;background:linear-gradient(60deg,#f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82);border-radius:6px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.disclaimer_box .content{background:#fff;padding:8px 12px;font-size:95%;border-radius:4px;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.disclaimer_box .content p{margin:0;padding:0}
.buka-komen,.tutup-komen{font-family:Roboto,sans-serif;background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:5px 7px;display:block;min-width:54px;text-align:center;font-weight:500;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;}
.buka-komen{margin:20px 0;cursor:pointer;}
.tutup-komen{margin:20px 0 0;cursor:pointer;}

Please adjust the font-family to match the font used on your blog. Code #11589D to set the background color of show hide comment button.

Then please find the following code:

<b:includable id='comments' var='post'>
............
............
............
</b:includable>

Please save the following code under </b: includable> code from above code.

<b:includable id='disquscomments' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='open-comment'/>
<div class='disclaimer_box'>
  <div class='content'>
    <b>Comment Policy:</b> Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved.
  </div>
</div>
<div class='buka-komen' id='buka-komen' on='tap:komen.show,tutup-komen.show,buka-komen.hide,open-comment.scrollTo(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0' aria-label='Go to Comment '>Open Comment</div>
<div class='tutup-komen' hidden='' id='tutup-komen' on='tap:komen.hide,tutup-komen.hide,buka-komen.show,close-comment.scrollTo(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0' aria-label='Close Comments'>Close Comments</div>
</b:if>
             <div class='disqus' hidden='' id='komen'>
<amp-iframe expr:src='&quot;https://khalistablog.blogspot.com/2018/03/how-to-remove-author-name-and-date-post-Error-Data-Structure.html?shortname=khalista&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=11589D&amp;canonicalurl=&quot; + data:blog.canonicalUrl + &quot;&amp;title=&quot; + data:blog.pageName' 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'/>
</amp-iframe>
              </div>
            </b:includable>

Please adjust the sentence on Comment Policy according to your wishes. Then replace the "khalista" code with your blog Disqus shortname.

Then save the <div id = 'close-comment'/> code above your blog related post code. This works when visitors close the comment, the page will scroll to the related post area.

Then please find the code below

<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>

Please replace with code below

<b:include cond='data:blog.pageType == &quot;item&quot;' data='post' name='disquscomments'/>

Then make sure the js code for amp-iframe is already installed on your blog.

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

2. Show hide Facebook comments.

Please add the following CSS in your AMP custom-blog style.

*{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.fb-comments{margin:0 -8px;padding:0;font-family:Roboto,sans-serif;}
.disclaimer_box{width:100%;padding:2px;background:linear-gradient(60deg,#f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82);border-radius:6px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.disclaimer_box .content{background:#fff;padding:8px 12px;font-size:95%;border-radius:4px;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.disclaimer_box .content p{margin:0;padding:0}
.buka-komen,.tutup-komen{font-family:Roboto,sans-serif;background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:5px 7px;display:block;min-width:54px;text-align:center;font-weight:500;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;}
.buka-komen{margin:20px 0;cursor:pointer;}
.tutup-komen{margin:20px 0 0;cursor:pointer;}

Please adjust the font-family to match the font used on your blog. Code #11589D to set the background color of show hide comment button.

Then please find the following code:

<b:includable id='comments' var='post'>
............
............
............
</b:includable>

Please save the following code under </ b:includable> code from above code.

<b:includable id='fbcomments' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='open-comment'/>
<div class='disclaimer_box'>
  <div class='content'>
    <b>Comment Policy:</b> Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved.
  </div>
</div>
<div class='buka-komen' id='buka-komen' on='tap:komen.show,tutup-komen.show,buka-komen.hide,open-comment.scrollTo(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0' aria-label='Go to Comment '>Open Comment</div>
<div class='tutup-komen' hidden='' id='tutup-komen' on='tap:komen.hide,tutup-komen.hide,buka-komen.show,close-comment.scrollTo(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0' aria-label='Close Comments'>Close Comments</div>
</b:if>
<div hidden='' id='komen'>
<div class='fb-comments' id='fb_comments'>
<amp-facebook-comments data-numposts='5' expr:data-href='data:post.url' height='180' layout='responsive' width='600'>
</amp-facebook-comments>
</div>
</div>
            </b:includable>

Please adjust the sentence on Comment Policy according to your wishes.

Then save the <div id = 'close-comment' /> code above your blog related post code. This works when visitors close the comment, the page will scroll to the related post area.

Then please find the code below

<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>

Please replace with code below

<b:include cond='data:blog.pageType == &quot;item&quot;' data='post' name='fbcomments'/>

Then make sure the js code for amp-facebook-comments is already installed on your blog.

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

Read: How to Make Show and Hide Comment with Onclick event in Blogger

That's Tips on How to Put Show Hide Comments On HTML AMP Blog. Hopefully with this article that I have shared this, can be useful for us all, good luck.

Share :