How to Add DISQUS Comments to Your Blogger Blog?

If you want to enhance user engagement on your Blogger blog, integrating a robust commenting system like DISQUS is a great choice. DISQUS offers advanced features, including moderation tools, social media integration, and analytics. Follow this detailed guide to add DISQUS comments to your Blogger blog.

Step 1: Sign Up for DISQUS

Visit DISQUS Website

Go to DISQUS in your web browser.

Create an Account

Click on the "Get Started" button.

Sign up using your email, or log in with your existing social media accounts.

Register Your Site

After logging in, click on the “Admin” link at the top-right corner.

Click on “Add Disqus to Your Site”.

Select “Start Now” and then choose “Blogger” from the list of platforms.

Enter your blog’s name and click "Continue".

DISQUS will provide a unique "Shortname". Make a note of this, as you’ll need it later.

 <!-- Replace with actual image if needed -->

Step 2: Add DISQUS to Blogger

Log in to Blogger

Go to Blogger and log in with your account credentials.

Navigate to Layout

From the Blogger dashboard, click on the “Layout” section of the blog you want to edit.

Add a New Gadget

Click on the “Add a Gadget” link where you want the DISQUS comments to appear (typically in the blog post area).

Select HTML/JavaScript Gadget

Scroll down and select “HTML/JavaScript” from the gadget list.

Paste DISQUS Code

In the “Content” area of the HTML/JavaScript gadget, paste the DISQUS code. You can find this code in your DISQUS account:

Go back to DISQUS.

Navigate to the "Admin" section, and click on "Install".

Copy the "Universal Code" provided.

Here’s an example of what the DISQUS code might look like:

html

Copy code

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

<script>

/**

 * @param {string} shortname - Your DISQUS shortname

 */

(function() {

    var d = document, s = d.createElement('script');

    s.src = 'https://' + shortname + '.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>

Replace shortname with your actual DISQUS shortname.

Configure the Widget

Set the title of the gadget to something like “Comments” or “DISQUS”.

Click "Save" to add the gadget to your blog.

Step 3: Update Your Blog Template

Go to Theme Section

In the Blogger dashboard, click on “Theme”.

Click on “Edit HTML” to access the template editor.

Backup Your Current Theme

It’s wise to back up your theme before making changes. Click on “Backup/Restore” and download a copy of your current theme.

Add DISQUS Code to Your Blog Template

Locate the section of your template where you want the DISQUS comments to appear. This is typically inside the blog post section or just before the closing </b:skin> tag.

Paste the DISQUS code snippet in the desired location.

Here’s a basic example of where to place the code:

html

Copy code

<!-- Blog Post Content -->

<div class='post-content'>

    <h1><data:post.title/></h1>

    <div class='post-body'>

        <data:post.body/>

    </div>

</div>

<!-- DISQUS Comments -->

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

<script>

/**

 * @param {string} shortname - Your DISQUS shortname

 */

(function() {

    var d = document, s = d.createElement('script');

    s.src = 'https://' + shortname + '.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>

Replace shortname with your DISQUS shortname.

Save Your Changes

After adding the code, click "Save" to update your blog template.

Step 4: Test the Comment System

Visit Your Blog

Open your blog and navigate to a post where the DISQUS comments should appear.

Leave a Comment

Test the comment system by leaving a comment to ensure everything is working correctly.

Check for Issues

Make sure DISQUS is functioning properly, and all features like notifications and social media sharing are working as expected.

Troubleshooting

DISQUS Not Showing: Ensure you’ve pasted the code correctly and that your DISQUS shortname is correct.

Comments Not Appearing: Verify that JavaScript is enabled in your browser and clear your cache.

Layout Issues: Adjust the placement of the DISQUS code in your template if the comments section isn’t aligning properly.

Conclusion

By following these steps, you’ve successfully integrated DISQUS into your Blogger blog, adding a powerful commenting system that enhances user interaction. If you encounter any issues or need further customization, DISQUS offers comprehensive support and community forums.

Happy blogging!