Good content takes time and effort to come up with.

Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.







Comment And Like System Using DISQUS | StackCoder


Comment And Like System Using Disqus


COMMENT SYSTEM HTML LIKE SYSTEM
18th July 2020 4 mins read
Share On     Share On WhatsApp   Buy Me Coffee | StackCoder Buy Coffee


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.


Install Disqus Page

Install Disqus Page


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.


Disqus Add Website Name

Disqus Add Website Name


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.


Disqus Select Plan

Disqus Select Plan


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.


Disqus Select Which Website Integration

Disqus Select Which Website Integration


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.


Disqus Integration Code

Disqus Integration Code


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


Disqus Final Result

Disqus Final Result


Conclusion


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


WHATS NEXT?


Lazy Load Images In Chrome With This Simple Trick

Accessors And Mutators In PHP Laravel

SummerNote WYSIWYG Text Editor Save Images To Public Path In PHP Laravel

@stack @push and @prepend In Laravel Blade

SummerNote WYSIWYG Text Editor

Client-Side DataTable, Adding Super Powers To HTML Table

Multiple File Uploads In Laravel PHP

File Upload In Laravel PHP

How To Create Gmail App Password For SMTP Mails

Free Live Chat Integration Using TAWK.IO

Laravel Custom Maintenance Page


Happy Coding :)








Author Image
AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing