Making Recent Comment Valid Disqus AMP - This time I will share is a tutorial on making recents widgets Disqus comments for AMP blogs. Disqus is a networked comment system service in cyberspace.
This widget is useful for monitoring who are the comments that enter or not. The work of this widget is where we click the comment and later we will be directed to the page you have clicked.
How to Make Disqus Recent Comments Widget on Blog the Valid AMP HTML
This widget is a sure thing you have to do install / use the disqus comment system on your template or blog. If you are still using the default blogger or blogspot domain, there is no need to worry, because disqus supports blogger default domains.
Many blogs out there make tutorials like this, but the tutorial does not or does not have the validation amp html feature.
Below is an example / demo I've created for you to see what kind of design and shape from this recent comment disqus widget.
To install the disqus recent comment widget, you must install 2 (two) js codes above the code
</head> or </head><!--<head/>--> the following javascript that you must install.
<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 install the code below where you want to display this icon or bell. If I install it on the navigation menu, so that it can be seen by visitors.
<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>
If you want to install in the navigation menu, please put it in the tag
<li> ... </li> and will be the code as below.
<li>
<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>
</li>Then put the css code below into the tag
<!--<b:skin><![CDATA[ or <style type='text/css'>
.open-recent{cursor:pointer;top:0;right:0;z-index:998}
.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)}}If so, apply the code below to the code
</body> or <!--</body>--> </body>
<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'>&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.staticaly.com/gh/KompiAjaib/kompi-html/master/amprecentcomments.html?shortname=yudhaseo&fontBodyColor=555555&fontBodyFamily=sans-serif&fontLinkColor=2B0C93&linkHoverColor=333333'
width='600' hidden=''>
<amp-img noloading='' src="https://cdn.staticaly.com/img/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 change the text yudhaseo with your disqus username. So the tutorial for making the recent comments widget that I can give you today, hopefully it will be useful.