How to add Disqus to a HubSpot blog

[fa icon="calendar'] 3/14/15 12:19 AM / by Alnoor Pirani

Blog comments are an important mechanism for readers to interact with the author, provide suggestions and discuss issues with other readers. A blog with a lively community of commenters is an excellent sign that your readers are engaged in your content. Anything that makes it easy to comment will make it that much more likely people will be interested in engaged with your ideas.
 
Although HubSpot has commenting built-in to their blog, you have to provide your contact information to leave a comment, which may be too much to ask when your blog is just starting out. A popular option is to use a third-party commenting system such as Disqus. Their system provides a simple way for visitors to comment on your blog using existing credentials at Google or Facebook for signing in. The Disqus platform also helps visitors to discover your blog by suggesting content to its users and allowing them to subscribe to the comment thread on your blog. What's more, if you ever choose to move your blog to another provider or even change its domain name, you can still keep all comments associated with those articles.
 
The main drawback of using Disqus vs. the HubSpot commenting system is that you won't be getting their email address. Also, comments are hosted by Disqus and therefore not physically part of your blog. That being said, reducing the friction for commenting while increasing discoverability and engagement could be exactly what your blog needs, making Disqus an excellent alternative. If your readers really like your blog, they may decide to subscribe to updates or provide their contact information some other way after you've earned their trust.
 
Below I've provided a step by step guide to adding Disqus to your HubSpot blog.
 
Sign up for Disqus. This one is easy. Visit https://disqus.com/ and click on the Sign Up button to get started.  
Once you've signed up, click the gear icon on the main screen and choose 'Add Disqus to Site'. AddDisqus-AddDisqustoSite.png

You will then be taken to a screen asking you for information about your blog. Enter the required information and hit 'Finish registration'.

AddDisqus-SiteProfile.png
From the Install screen click on 'Universal Code'.  AddDisqus-UniversalCode.png
Disqus will provide the code for the comments section that will go on your posts.  AddDisqus-CommentCode.png
Open your HubSpot blog template for your posts from the Design Manager and click on the 'Edit Post Template' button.  AddDisqus-EditPostTemplate.png
   
   
   

  1. Copy and paste the code from Disqus at the bottom of the page or wherever you want your comments section to appear.

    AddDisqus-CodeonBlogTemplate
  2. If you want to display the number of comments for each post on the listings page, continue following the steps in this tutorial.

    AddDisqus-CommentCountonBlog
  3. Copy the code Disqus provides in the How to display comment count section of the code installation page.

    AddDisqus-CommendCountCode
  4. Back in HubSpot in your blog Listing Template, click the 'Edit Listing Template' button.

    AddDisqus-EditListingTemplate
  5. Paste the code at the bottom of your listing page.

    AddDisqus-CommentCountCodeListing
  6. Add the code below somewhere inside the content in contents for loop where you want the comment count to appear. I have it to the right of the blog title on the listing page. The [fa icon="comment"] part renders a comment bubble icon to the left of the number and can be replaced with whatever icon you like or nothing at all. Depending on your blog template, you may have to delete existing code that comment count that comes from the HubSpot commenting system.

    AddDisqus-disqus_thread

And there you go. Visit your posts to verify that Disqus has been installed correctly and check out the listing page to see your new blog comment numbers in action.

How did you make out? Anything I can clarify in the post? Please share your experiences with using Disqus on your blog in the comments below.

New Call-to-action

Topics: HubSpot, blogging, tutorial, code