Contents hide 1) Disqus Comment System 2) Disqus For Static page 3) Disqus For Dynamic page 3.1) Customize Disqus Comment System 3.2) Hide The Disqus footer using CSS In this tutorial, we will see how to add Disqus Comment System On Custom Website with Additional Customization Check out the demo on how to add Disqus Comment System On Custom Website. Demo Disqus Comment System Disqus helps publishers increase engagement and build loyal audiences and also help instead of building whole commenting system for your website. As this feature is available for many platforms, find on Here! The first thing is to create the account on the disqus to get a link which will be followed for commenting plugin. We have two option to implemented the disqus plugin. For Static Page For Dynamic Pages Disqus For Static page Disqus for a static page is been very simple, we just have to assign website link in variable i.e. this.page.url and this.page.identifier disqus config var disqus_config = function () { // Assigning static page url // Replace PAGE_URL with your page URL this.page.url = "https://demo.io/exmaple/post/article.php"; // Replace PAGE_IDENTIFIER with your page's unique identifier this.page.identifier = "https://demo.io/exmaple/post/article.php"; }; After implementing this place the given or generated code on the page where the comment should be posted. Disqus For Dynamic page Disqus for a dynamic page is also been simplified we just have to assign website link in variable i.e. this.page.url and this.page.identifier Using PHP function. All we going to do is, we will get the current page URL Into Those Variable disqus config var disqus_config = function () { // php function to get the current url // Replace PAGE_URL with your page's canonical URL variable this.page.url = "<?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable this.page.identifier = "<?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>"; }; For dynamic page this.page.identifier assigned variable will work as unique ID Because there will no similar link will be available on the website and the page this.page.url will add the different comment section on each individual page. Customize Disqus Comment System Adding recent comment section With custom design : All the recent comment on the website can be displayed at once using the disqus plugin Recent Comments plugin <?php $_disqusName = "demo"; // Your disqus assign site name $_totalComments = "6"; // total comments to be viewed $_commentLength = "100"; // length of the comment content // Comments Shows By script File : Place where you needed echo '<script type="text/javascript" src="http://"'.$_disqusName.'".disqus.com/recent_comments_widget.js?num_items="'.$_totalComments.'"&hide_avatars=0&avatar_size=40&excerpt_length="'.$_commentLength.'""></script>'; ?> Appling the custom CSS to design the comment view you can set your own custom design as it is already customized but then also we can change. recent comment CSS /* Recent Comment Style */ .dsq-widget-user { text-decoration: none; display: block; font-family: calibri; color: #006378; } .dsq-widget-comment { font-family: calibri; display: block; } .dsq-widget-meta a { text-decoration: none; font-family: calibri; } .dsq-widget-item { border-left: 3px solid #00809a; padding-left: 10px; transition-property: background-color, color; transition-duration: 1s; transition-timing-function: ease-out; } .dsq-widget-item p a { text-decoration: none; color: #337ab7; font-size: 13px; } .dsq-widget-item:hover { border-left: 3px solid #00809a; padding-left: 10px; background-color: #ecedee; } .dsq-widget-avatar { border-radius: 100px; } .dsq-widget ul.dsq-widget-list { padding: 0; margin: 0; text-align: left; } img.dsq-widget-avatar { width: 32px; height: 32px; border: 0px; margin: 5px; padding: 0px 3px 3px 0px; float: left; } a.dsq-widget-user { font-weight: bold; } a.dsq-widget-thread { font-weight: bold; } p.dsq-widget-meta { clear: both; font-size: 80%; padding: 0; margin: 0; } li.dsq-widget-item { margin: 15px 0; list-style-type: none; clear: both; background: #fefff8; } span.dsq-widget-clout { padding: 0 2px; background-color: #ff7300; color: #fff; } table.dsq-widget-horiz td { padding-right: 15px; } .dsq-widget-comment p { display: inline; } /* Recent Comment Style */ Hide The Disqus footer using CSS This section can be removed but my point of view is that it should not be removed. Still, we can apply CSS to hide the footer section Hide Footer CSS /* Hide The Disqus Footer */ #disqus_thread { position: relative; } #disqus_thread:after{ content: ""; display: block; height: 55px; width: 100%; position: absolute; bottom: 0px; background: white; } /* ---Hide The Disqus Footer */ Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: css3, disqus, JavaScript, js, php, web api