Contact
April 25, 2014 | Rob Spurlock

Adding Disqus Comments to the New Hubspot COS Blog

Adding Disqus in the HubSpot COS

The HubSpot COS blog comes with built-in commenting on the blog, and there are benefits to using HubSpot's native comments function, like using HubSpot's analytics to track leads from comments.

Personally, I think that Disqus is a more full-featured system with many more benefits. If you're not going to take advantage of the benefits of Disqus, just stick with the default HubSpot commenting system, but if you need a more robust comments section, Disqus may be the way to go.

Benefits of using Disqus include:

  • Realtime discussions and beautiful mobile commenting
  • Instant activity notifications to keep people engaged
  • Ability to follow interesting people in the community
  • Rich media support including images and video

If you want to add Disqus commenting within the HubSpot COS blog, here are the steps:

Step 1:

Before beginning we do recommend that you make a copy of either your blog template, or copy the original code for your blog elsewhere should you make a mistake.

You need to find the Universal Comment Code (Available here: http://disqus.com/admin/universalcode/). If you are already logged into your Disqus account, your Disqus ID will be inserted automatically into the code. You will also need the Comment Count Code from the same page. Look for the remarked area of the code for the place to enter in your forum shortcode (if not logged in).

Setting up Disqus in New Hubspot COS Step 1

Step 2:

Log into Hubspot and go to Content -> Content Settings, then under Content Optimization System Options, click Blog. Under Comments, uncheck the Allow Comments box and save.

Setting up Disqus in New Hubspot COS Step 2

Step 3:

Open your blog template in the Content -> Design Center->Template Builder. Look for the module called Blog Content and click the gear icon on the right-hand side, then click Edit Options.

Setting up Disqus in New Hubspot COS Step 3

You should see two main code areas to edit, the Blog post body template HTML and Blog listing template HTML, and each serve different purposes.

Blog post body template HTML - For editing the look and feel of the single blog post display page. This area needs both the main Disqus code AND the comment count code.

Blog listing template HTML - For editing the look and feel of the blog LIST display page. This area needs just the comment code.

Step 4a:

In the Blog post body template HTML code are, add the Disqus Universal Code to the very end. If you have unchanged, original Hubspot code, just drop it right under the last </div> tag. If you have made extensive changes, just find the appropriate location to place the Disqus code so it shows up where you want. You can delete the <a id="comments"></a> code or comment it out if you like.

Setting up Disqus in New Hubspot COS Step 4a

Step 4b:

Also in the Blog post body template HTML code area add the Disqus Comment Count code just below the Universal code or at the very bottom. It looks similar to the code above but if you look closely it is different.

Setting up Disqus in New Hubspot COS Step 4b Code

Next, you need to add in the actual trigger to display the comment count. Paste the code from step 2 on the Disqus admin page under the HOW TO DISPLAY COMMENT COUNT area. Your code should look similar to this: <a style="float: right;" href="https://www.vieodesign.com/blog/adding-disqus-new-hubspot-cos-blog/#disqus_thread">Comments</a>. This will add in a Comments link that will automatically update with the number of comments and link directly to the Disqus comment box on the post. For our use, we are going to add this code towards the beginning of our post next to publish date and float it to the right. You can adjust how yours displays such as float left, font color, etc.

Setting up Disqus in New Hubspot COS Step 5

Step 5:

In the Blog listing template HTML, you can add in the comment count next to each blog post title to show whether there are any comments on the post, and link directly to the comments section of that post. To perform this, just repeat Step 4b by pasting the Disqus Comment Count code at the very bottom of the code in the box. Next, add in the same hyperlink for the comments <a href="https://www.vieodesign.com/blog/adding-disqus-new-hubspot-cos-blog/#disqus_thread">Comments</a> where you want it to appear, such as next to the publish date.

Then scroll down and look for the following code: <div class="custom_listing_comments"> and remark out that entire section. This removes the default built in comments box in the blog listing view. You can leave it as it will link to the Post comments box also, but the counter will never update so I choose to remove it. Click Done, then Update the template and view the results.

Step 6:

Enjoy the benefits of using Disqus for your commenting system on your Hubspot blog. Check back later to view my upcoming post on creating your own dynamic Author box for Hubspot blog posts.

Do you have any cool HubSpot tricks you want to share? Let me know in the comments section.

Inbound Marketing Campaign

 

Rob Spurlock

Rob Spurlock

Principal and Founder of VIEO Design™, LLC. Rob has a love for the East TN community. Server environment, web functionality and WordPress expert. He has extensive expertise in the Internet industry and related Internet software with over 15 years experience.

Related Post: