Disqus Recent Comments Widget for HTML AMP Blog


Recent comments Disqus AMP HTML - Comments are one important element that should be on a blog page. Comments are a means of interaction between blog visitors or blog visitors with the blog admin so that communication is established which might be a solution being faced.

In addition, comments can also be pulling traffic from search results. Just as Blogger or Disqus comments can appear in search results, then this is a door for the commented traffic to post.

The more interaction in the comments of a page, of course, page views will increase and the opportunity to attract visitors from search results will be even higher. And to make it easier to monitor Disqus comments coming in, the Disqus recent comments widget is the solution.

The Disqus recent comments widget works to display the latest Disqus comments so that it makes it easier to manage the comments.

Blog administrators will find it easier to answer the questions posed by visitors in the comments column. Just click then it will enter the page.

Well this time I will share a Disqus recent comments widget for the AMP HTML blog with show hide which will appear from the right side of the blog by clicking on the bell icon.

If you are interested in making it, please follow the steps below.

Please save the following 2 pieces of JS above the code <head> or &lt;/head&gt;&lt;!--<head/>--&gt; and if it turns out that in your blog template there are already two js, please skip this step. Or if there is already JS from one of them, then please complete the JS with the other one.

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

Then please save the following HTML code for the bell or bell icon to display the Disqus recent comments widget. Please save where you want to display it.

<div class='open-recent' id='open-recent' on='tap:disqus-recent.show,disqus-recent-iframe.show,recent-disqus-box' role='button' tabindex='0' aria-label='Open Recent Comments'>
<svg width='24' height='24' viewBox="0 0 24 24">
    <path fill="#000000" d="M12,22A2,2 0 0,0 14,20H10A2,2 0 0,0 12,22M18,16V11C18,7.93 16.36,5.36 13.5,4.68V4A1.5,1.5 0 0,0 12,2.5A1.5,1.5 0 0,0 10.5,4V4.68C7.63,5.36 6,7.92 6,11V16L4,18V19H20V18L18,16Z" />
</svg>
  </div>

Then set it with the following CSS:

.open-recent{
  cursor:pointer;
  position:fixed;
  top:0;
  right:0;
  z-index:998;
  }

The CSS above will place a floating bell icon on the top right of the blog.

Then also add the following CSS to Disqus's recent comments style widget.

.top-comments-box-fixed{
  background:#fff;
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:300px;
  padding:0;
  z-index:999;
  -webkit-animation-name:slideInRight;
  animation-name:slideInRight;
  -webkit-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both
  }
.top-comments-box-fixed h3{
  font-size:18px;
  margin:0;
  padding:0 0 0 10px;
  color:#fff;
  height:50px;
  line-height:50px;
  background:#2e9fff;
  position:relative;
  -webkit-box-shadow: 0 1px 8px rgba(0,0,0,.3);
  box-shadow: 0 1px 8px rgba(0,0,0,.3);
  }
.top-comments-box-fixed h3 span{
  position:relative;
  z-index:2;
  }
.top-comments-box-fixed h3:after{
  content:"";
  background: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 438 80' width='160' height='40' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M30.208 1.602H.878v76.039h28.895c27.376 0 43.342-16.293 43.342-38.235v-.219c.002-21.943-15.75-37.585-42.907-37.585zM51.499 39.73c0 12.272-8.364 19.227-20.964 19.227h-8.582V20.286h8.582c12.6 0 20.964 7.06 20.964 19.226v.218zm35.629 37.907h21.182V1.602H87.128v76.035zm70.065-47.358c-10.538-2.391-13.145-3.911-13.145-7.385v-.22c0-2.716 2.5-4.888 7.604-4.888 6.733 0 14.338 2.605 21.292 7.496l10.536-14.885C175.223 3.772 165.122.294 152.196.294c-18.25 0-29.438 10.21-29.438 24.332v.218c0 15.644 12.492 20.207 28.676 23.896 10.32 2.389 12.818 4.127 12.818 7.279v.217c0 3.258-3.042 5.213-8.69 5.213-8.798 0-17.163-3.148-24.657-9.123L119.173 66.34c9.342 8.365 22.16 12.604 35.63 12.604 18.466 0 30.742-9.232 30.742-24.768v-.217c-.001-14.229-10.865-19.877-28.352-23.68zm120.573 9.343v-.218C277.766 17.57 260.387.08 236.922.08c-23.462 0-41.06 17.708-41.06 39.542v.216c0 21.834 17.38 39.324 40.845 39.324 8.689 0 16.619-2.5 23.137-6.736l8.363 7.494 10.645-11.84-7.818-6.623c4.341-6.193 6.732-13.799 6.732-21.835zm-21.398.433c0 2.607-.435 5.105-1.304 7.384l-10.319-9.341L234.1 50.047l10.537 9.018a21.655 21.655 0 0 1-7.711 1.412c-11.621 0-19.443-9.666-19.443-20.639v-.216c0-10.972 7.712-20.532 19.225-20.532 11.733 0 19.664 9.668 19.664 20.748v.216l-.004.001zm83.534 4.345c0 10.643-5.543 15.639-14.016 15.639-8.472 0-14.013-5.211-14.013-16.184V1.602h-21.397v42.69c0 23.789 13.578 34.763 35.194 34.763 21.617 0 35.629-10.754 35.629-35.305V1.602h-21.397V44.4zm68.868-14.121c-10.537-2.391-13.145-3.911-13.145-7.385v-.22c0-2.716 2.5-4.888 7.607-4.888 6.73 0 14.338 2.605 21.289 7.496L435.059 10.4C426.805 3.775 416.705.297 403.778.297c-18.25 0-29.438 10.21-29.438 24.332v.218c0 15.644 12.492 20.205 28.677 23.896 10.319 2.391 12.817 4.129 12.817 7.28v.216c0 3.258-3.043 5.215-8.69 5.215-8.8 0-17.164-3.152-24.658-9.125l-11.729 14.012c9.343 8.367 22.16 12.603 35.627 12.603 18.468 0 30.742-9.233 30.742-24.767v-.219c-.004-14.228-10.868-19.876-28.356-23.679z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat 10px 0;
  background-size:70%;
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index:1;
  }
.open-recent:focus,
.open-recent:active,
.close-recent:focus,
.close-recent:active{
  outline:0;
  }
.close-recent{
  position:absolute;
  top:0;
  right:0;
  width:50px;
  height:50px;
  line-height:45px;
  text-align:center;
  font-size:40px;
  font-weight:300;
  color:#fff;
  cursor:pointer;
  z-index:2;
  }
.top-comments-box-fixed amp-iframe{
  height:calc(100vh - 50px);
  width:300px;
  position:absolute;
  top:50px;
  left:0;
  animation:myframe 1s;
  -moz-animation:myframe 1s;
  -webkit-animation:myframe 1s
  }
.lightbox-recent-disqus{
  background:rgba(0,0,0,.8);
  width:100%;
  height:100%;
  position:absolute;
  }
@keyframes myframe{from{top:100%}
to{top:50px;}
}
@-moz-keyframes myframe{from{top:100%}
to{top:50px;}
}
@-webkit-keyframes myframe{from{top:100%}
to{top:50px;}
}
@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}

Please minify CSS above so that the size is smaller. And finally, please save the following HTML code above the </body> code

<amp-lightbox id='recent-disqus-box' layout="nodisplay">
<div class="lightbox-recent-disqus" on="tap:disqus-recent.hide,disqus-recent-iframe.hide,recent-disqus-box.close" role="button" tabindex="0" aria-label="Close Recent Box">
<div class='top-comments-box-fixed' id='disqus-recent' hidden=''>
<h3><span>Recent Comments:</span><div class='close-recent' on='tap:disqus-recent.hide,disqus-recent-iframe.hide,recent-disqus-box.close' role='button' tabindex='0' aria-label='Close Box'>&amp;times;</div></h3>
<amp-iframe noloading='' id='disqus-recent-iframe'
   frameborder='0'
   height='300'
   layout='responsive'
   sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups'
   src='https://cdn.rawgit.com/KompiAjaib/kompi-html/master/amprecentcomments.html?shortname=gemokrp&amp;fontBodyColor=555555&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=2B0C93&amp;linkHoverColor=333333'
   width='600' hidden=''>
<amp-img noloading='' src="https://2.bp.blogspot.com/-rRo__E6FsPs/Ws7U-IT8KNI/AAAAAAAAw_Q/qCwa6vKHgTIB-ytesdA4FlKrXMRYt5NMACLcBGAs/s1600/placeholder.png"
   layout="fixed-height"
   height="100vh"
   width="auto"
   placeholder=''>
    </amp-img>
  </amp-iframe>
  </div>
  </div>
</amp-lightbox>

Please replace the gemokrp code with your Disqus blog shortname, and adjust the 2B0C93 code with the color code of your blog link.

Done, good luck and hopefully useful.