In this tutorial, we will see how to add Disqus Comment System On Custom Website with Additional Customization

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

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

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

<?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 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 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 */