Comment And Like System Using Disqus

Hello Fellas! If you have any plans to quickly add Comment & Like system with your blog, article, website then this by far the best one and very simple to integrate with Disqus.

We will be covering the following in this article

1. Select Install Disqus Option
2. Register You Website Details
3. Select Plan
4. Select Platform To Integrate
5. Integration Code
6. Final Result After Implementation

---

Step 1 - Select Install Disqus Option

First, go ahead and register in the Disqus website.

Once you register you will be able to see the following screen to integrate Disqus or comment on Disqus. Go ahead and select I want to install Disqus on my website as shown in the following image.

---

Step 2 - Register You Website Details

Now add your website details on the following page.

1. Website Name - Add your website name, make sure to add it properly as it will be used to create the name of your Disqus thread.
2. Disqus Web URL - once you add website name you will be given the website URL for your website
3. Category - Select your website category

Then click on the Create Site button.

---

Step 3 - Select Plan (I am using Free Plan)

Now select the plan which you would like to opt for. If you scroll down you will be able to see the Basic Free Plan.

If you can opt for any of the paid plans then definitely go ahead with it.

---

Step 4 - Select Platform To Integrate (I am using manual)

Now please select the platform that you want to integrate Disqus.

If you scroll a bit down you will be able to select the Manual installation option as shown in the following image.

---

Step 5 - Integration Code

On you click on manual installation then you will be redirected to the following page where you will get the integration code as shown in the following image.

Don't worry I will explain everything in detail. The integration code will look like the following

<div id="disqus_thread"></div>

<script>
/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/

/** Website Comments Configuration */
var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};

/** Website Configuration */
(function() {
    var d = document, s = d.createElement('script');
    s.src = 'https://WEBSITE_NAME.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();
</script>
<noscript>
    Please enable JavaScript to view the 
    <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Let me break down everything in the code.

---

HTML Code

<div id="disqus_thread"></div>

Place this HTML code before the closing HTML body (</body>). In this div tag, Disqus will load all the comments.

---

Disqus Comments Configuration

/** Website Comments Configuration */

var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};

PAGE_URL - It's a canonical page URL (Canonical is basically the URL of your post, article, or website link which is currently integrating it) and tells Disqus the comments section belongs to.

PAGE_IDENTIFIER - Unique key identifier for the blog post, article, or website link. Basically you must not mess up with this and make sure it remains the same

/* I replaced PAGE_URL & PAGE_IDENTIFIER with my page canonical_link,
   If you dont have canonical_link the replace it with Post URL, Post Slug, Website URL
 */
this.page.url = "{{ $post->meta['canonical_link'] }}";
this.page.identifier = "{{ $post->meta['canonical_link'] }}";

NOTE: If you don't have canonical_link the replace it with Post URL, Post Slug, Website URL

---

Website Configuration (WEBSITE_NAME)

Make sure to change the WEBSITE_NAME with your Disqus URL name. This name you have got it from Step 2 -> Arrow 2 from the image.

/** Website Configuration */

(function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://WEBSITE_NAME.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();

---

Step 6 - Final Result After Implementation

This is the final result after implementation

---

Conclusion

Hope this article helped you. Please share it with your friends.

Articles For You

What Is Method Chaining In PHP?

Route Model Binding In Laravel & Change Default Column id To Another Column

Multiple GIT Key Pairs Or Account In The Same Computer

Manipulate HTML Using DOMDocument In PHP

Laravel 7.x Multiple Database Connections, Migrations, Relationships & Querying

Create Custom 404 Page In Laravel

Increase Session Timeout In Laravel

Resolve 404 Not Found In NGINX

Client-Side DataTable, Adding Super Powers To HTML Table

Website Speed and Performance Optimizations

Free Live Chat Integration Using TAWK.IO

Create Zip File On The Fly With Streaming Download In PHP Laravel

Laravel App Deployment Checks

Create A Composer Package? Test It Locally And Add To Packagist Repository

Install RabbitMQ in Ubuntu 22