Disqus Recent Comments Widget to AMP HTML Blog Site
Comments on blog posts are one of the most important elements of blog sites. Comments are the means by which blog visitors and blog visitors interact with the blog administrator.
Comments help drive traffic from search results. Displaying Blogger and Disqus comments on a widget is one of the important plugins that help drive traffic to blog sites.
The more comments on the pages of blog sites, the higher the number of page views and the higher the opportunity to drive traffic from the search results. Therefore, following Disqus comments on a widget keeps your blog pages constantly engaged. It also makes it easier to manage Disqus comments.
There are many conveniences provided by the recent comments widget, it allows you to answer questions asked through the Disqus comment form more quickly and to answer questions from your visitors since visitors are also interacting with it.
I will share how to add Disqus recent comments widget, which we shared for HTML blog sites in our previous articles, to AMP HTML blog sites.
If you want to add Disqus recent comments widget to your AMP HTML blog site, follow the steps below.
How to Add Disqus Recent Comments Widget to AMP HTML Blog Sites
Step one: Log in to your Blogger account and in the control panel of the blog where you want to add the widget, select Theme > Open your blog's template editor page by following the Edit HTML path.
Step two: Check if the following JavaScript codes are among the template codes of your AMP HTML blog, if the following codes are not among your template codes, </head> or add one line above </head><!--<head/>-->.
<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> Step three: To display the Disqus recent comments widget below, add the command button icon HTML code where you want it to appear on your blog.
<div class='disqus-open-recent' id='disqus-open-recent' on='tap :disqus-recent.show,disqus-recent-iframe.show,recent-disqus-drawer' role='button' tabindex='0' aria-label='Open comments'>
<svg width='24' height='24' viewBox="0 0 24 24"><path fill="gray" 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>To edit the command button above, you can do it by changing the following codes among the CSS codes.
.disqus-open-recent{cursor:pointer;position:fixed;top:0;right:0;z- index:997}Step four: Add the following CSS codes to your blog's amp-custom style file.
.disqus-comments-box-fixed{background:#fff;position:fixed;height:100vh;width:300px;top:0;right:0;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}
.disqus-comments-box-fixed h3{font-size:18px;margin:0;padding:0 0 0 10px;background:#2e9fff;color:#fff;height:50px;line-height:50px;position:relative ;-webkit-box-shadow:0 1px 8px rgba(0,0,0,.3);box-shadow:0 1px 8px rgba(0,0,0.3)}
.disqus-comments-box-fixed h3 span{position:relative;z-index:2}
.disqus-comments-box-fixed h3: after {content: ""; background: url ( "data: image / svg + xml; base64, phn2zyb2awv3qm94pscwıdagndm4ıdgwjyb3awr0ad0nmtywjybozwlnahq9jzqwjyb4bwxucz0nahr0cdovl3d3dy53my5vcmcvmjawmc9zdmcnıhhtbg5zonhsaw5rpsdodhrwoi8vd3d3lnczlm9yzy8xotk5l3hsaw5rjz48zz48cgf0acbzdhlszt0nzmlsbdojzmzmzmzmjybkpsdnmzaumja4ıdeunjaysc44nzh2nzyumdm5adı4ljg5nwmyny4znzygmca0my4zndıtmtyumjkzıdqzljm0mi0zoc4ymzv2ls4ymtljljawmi0yms45ndmtmtuunzutmzcuntg1ltqyljkwny0zny41odv6ttuxljq5osazos43m2mwıdeyljı3mi04ljm2ncaxos4ymjctmjauoty0ıde5ljıyn2gtoc41odjwmjaumjg2adguntgyyzeyljygmcaymc45njqgny4wniaymc45njqgmtkumjı2di4ymth6btm1ljyyosazny45mddomjeumtgyvjeunjaysdg3ljeyohy3ni4wmzv6btcwlja2ns00ny4znthjltewljuzoc0yljm5ms0xmy4xndutmy45mtetmtmumtq1ltcumzg1di0umjjjmc0yljcxniayljutnc44odggny42mdqtnc44odggni43mzmgmcaxnc4zmzggmi42mdugmjeumjkyıdcundk2bdewljuzni0xnc44odvdmtc1ljıymyazljc3miaxnjuumtıyljı5ncaxntıumtk2ljı5ngmtmtgumjugmc0yos40mzggmtaumjetmjkundm4ıdı0ljmzmnyumje4yzagmtuunjq0ıdeyljq5miaymc4ymdcgmjgunjc2ıdızljg5niaxmc4zmiayljm4osaxmi44mtggnc4xmj cgmtıuode4ıdcumjc5di4ymtdjmcazljı1oc0zlja0mia1ljıxmy04ljy5ıduumjezltgunzk4ıdatmtcumtyzltmumtq4ltı0ljy1ny05ljeym0wxmtkumtczıdy2ljm0yzkumzqyıdgumzy1ıdıylje2ıdeyljywncazns42myaxmi42mdqgmtgundy2ıdagmzaunzqyltkumjmyıdmwljc0mi0ync43njh2ls4ymtdjls4wmdetmtqumjı5ltewljg2ns0xos44nzctmjgumzuyltızljy4em0xmjauntczıdkumzqzdi0umje4qzı3ny43njygmtcuntcgmjywljm4ny4wocaymzyuotıylja4yy0ymy40njıgmc00ms4wniaxny43mdgtndeumdygmzkuntqydi4ymtzjmcayms44mzqgmtcumzggmzkumzı0ıdqwljg0nsazos4zmjqgoc42odkgmcaxni42mtktmi41ıdızljezny02ljcznmw4ljm2mya3ljq5ncaxmc42ndutmteuodqtny44mtgtni42mjnjnc4zndetni4xotmgni43mzıtmtmunzk5ıdyunzmyltıxljgznxptltıxljm5oc40mznjmcayljywny0undm1ıduumta1lteumza0ıdcumzg0bc0xmc4zmtktos4zndfmmjm0ljegntaumdq3bdewljuznya5ljaxogeyms42ntugmjeunju1ıdagmcaxltcunzexıdeundeyyy0xms42mjegmc0xos40ndmtos42njytmtkundqzltıwljyzoxytljıxnmmwltewljk3mia3ljcxmi0ymc41mzıgmtkumjı1ltıwljuzmiaxms43mzmgmcaxos42njqgos42njggmtkunjy0ıdıwljc0ohyumje2bc0umda0ljawmxptodmuntm0ıdqumzq1yzagmtaunjqzltuuntqzıde1ljyzos0xnc4wmtygmt uunjm5ltgundcyıdatmtqumdezltuumjexlte0ljaxmy0xni4xodrwms42mdjoltıxljm5n3y0mi42owmwıdızljc4osaxmy41nzggmzqunzyzıdm1lje5ncaznc43njmgmjeunje3ıdagmzuunjı5ltewljc1ncazns42mjktmzuumza1vjeunjayac0yms4zotdwndqunhptnjguody4lte0ljeymwmtmtauntm3ltıumzkxltezlje0ns0zljkxms0xmy4xndutny4zodv2ls4ymmmwltıunze2ıdıuns00ljg4oca3ljywny00ljg4oca2ljczıdagmtqumzm4ıdıunja1ıdıxljı4osa3ljq5nkw0mzuumdu5ıdewljrdndı2ljgwnsazljc3nsa0mtyunza1ljı5nya0mdmunzc4ljı5n2mtmtgumjugmc0yos40mzggmtaumjetmjkundm4ıdı0ljmzmnyumje4yzagmtuunjq0ıdeyljq5miaymc4ymdugmjgunjc3ıdızljg5niaxmc4zmtkgmi4zotegmtıuode3ıdqumtı5ıdeyljgxnya3ljı4di4ymtzjmcazljı1oc0zlja0mya1ljıxns04ljy5ıduumje1ltguocawlte3lje2nc0zlje1mi0ync42ntgtos4xmjvsltexljcyosaxnc4wmtjjos4zndmgoc4znjcgmjıumtygmtıunjazıdm1ljyynyaxmi42mdmgmtgundy4ıdagmzaunzqyltkumjmzıdmwljc0mi0ync43njd2ls4ymtljls4wmdqtmtqumjı4ltewljg2oc0xos44nzytmjgumzu2ltızljy3oxonpjwvcgf0ad48l2c + pc9zdmc + ") no-repeat 10px 0; background-size: 70%; opacity: 0.3; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1}
.disqus-open-recent:focus,.disqus-open-recent:active,.disqus-recent-close:focus,.disqus-recent-close:active{outline:0}
.disqus-recent-close{position:absolute;width:50px;height:50px;top:0;right:0;line-height:45px;text-align:center;font-size:40px;font-weight:300 ;color:#fff;cursor:pointer;z-index:2}
.disqus-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}
.content-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)} }Step five: Finally, add the following HTML code one line above the </body> of your blog.
<amp-lightbox id='recent-disqus-drawer' layout="nodisplay">
<div class="content-recent-disqus" on="tap:disqus-recent.hide,disqus-recent-iframe.hide,recent-disqus-drawer.close" role="button" tabindex="0" aria -label="Close">
<div class='disqus-comments-box-fixed' id='disqus-recent' hidden=''>
<h3><span>Recent Comments:</span><div class='disqus-recent-close' on='tap:disqus-recent.hide,disqus-recent-iframe.hide,recent-disqus -drawer.close' role='button' tabindex='0' aria-label='Close Box'>&times;</<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/jquerycods/jquery/master/disqus_recent_commets.html?shortname=add your Disqus username&fontBodyColor=555555& fontBodyFamily=sans-serif&fontLinkColor=2B0C93&linkHoverColor=333333' width='600' hidden=''>
& Lt; img amp-noloading = "" src = "data: image / png; base64, ivborw0kggoaaaansuheugaaaaıaaalqcaaaaacftp71aaaaaxncsvqı5gpbmqaaaf96vfh0umf3ıhbyb2zpbgugdhlwzsbbufaxaaaımenkt81llcpmvigoyk / lzenlugadyxmue0sts6neawmdcwmımdqwmdyekkzatjlukneabziym6uboblzspkpim8fa A + 6fwgbldimaaaakeleqvrıiwn8wmdewmd4n4gjyrshıjahoyezikbrkbpfwx + nlvb0qqddtatatoırjwaaaabjru5erkjggg =="
layout="fixed-height" height="100vh" width="auto" placeholder=''>
</amp-img>
</amp-iframe>
</div>
</div>
</amp-lightbox>Replace the specified place in the code above with your Disqus username and save the template.
Final Words
In this article, for AMP HTML blog users We shared the Disqus AMP HTML Recent Comments Widget. For questions and assistance regarding the plugin, you can contact us using the comment form.
Trick Level
Tricklevel.blogspot.com is a blog where we post blogging tips, blogger plugins, AMP, Templates, SEO, HTML CSS & JavaScript project, new awesome tools.