How to Install DISQUS on Blogger
DISQUS with over 3 MILLION active installs, is probably the most famous commenting system on the internet!
Previously, I had published an article on Top 5 Commenting Systems For Blogger
Considering how people face issues with Blogger Template platform, here’s a How-To guide on Installing Disqus on Blogger
There are 2 different methods to Install Disqus on Blogger, I would suggest you to the way Disqus recommends.
How To Install Disqus on Blogger
- First of all Sign up on Disqus
- After setting up your account, Register your Website on Disqus
Click on Next button and you’ll be redirected to a website like this:
Select Blogger as of now. I’ll also post on how to setup on Blogger with Universal Code (just in case)
As soon as you click on Blogger, you will be redirected to a page like this
- Click on Add ‘xyz’ to my Blogger site. After this, you’ll be redirected and asked to Disqus Comments widget in Blogger, Click on Add Widget button to add it!
- After Adding the Disqus Widget, go back to Disqus Admin Dashboard and Import your existing comments on it!
It’ll start the Sync process for your Comments and soon it’ll display on your blog in Disqus layout!
That’s all on how to add it through the Easy way..
How to Install Disqus on Blogger (Manual Method)
- Go to Blogger Layout section and click Add a gadget (preferably in the sidebar)
Disqus Gadget - Click on Add a Gadget and select HTML/Javascript gadget!
- Enter Title as Disqus and paste the following code
<!-- Disqus on blogger comments gadget -->
- Save the Gadget and it’ll close!
- Click Save Arrangement button
Add Disqus Code to your template
- Go to your blogger blog’s Template section, click on Edit HTML button.
- Search for the newly created Disqus Widget by pressing Ctrl + F or Command-F (MacOS) and then type Disqus on blogger
You’ll find something like this
<b:widget id='HTML1' locked='false' title='Disqus' type='HTML'> - To make your Disqus system mobile friendly(recommended), add the following code!
<b:widget id='HTML1' locked='false' mobile='yes' title='Disqus' type='HTML'> - Now you’ve to delete the code below it manually. It’ll look like this
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable> - Replace the following code with the one you just deleted. Make sure you replace THETECHPIE with your channel/forum name. You can find it in your Disqus Admin Dashboard!
<b:includable id='main'> <script type='text/javascript'> var disqus_shortname = 'THETECHPIE'; var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";if (!disqus_blogger_current_url.length) { disqus_blogger_current_url = "<data:blog.url/>"; }var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>"; var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>"; </script><b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #comments {display:none;} </style><script type='text/javascript'> (function() { var bloggerjs = document.createElement('script'); bloggerjs.type = 'text/javascript'; bloggerjs.async = true; bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_item.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs); })();</script> </b:if> <style type='text/css'> .post-comment-link { visibility: hidden; } </style><script type='text/javascript'> (function() { var bloggerjs = document.createElement('script'); bloggerjs.type = 'text/javascript'; bloggerjs.async = true; bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_index.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs); })(); </script> </b:includable>
- Now save the template and visit your blog to make sure Manual process worked!
Conclusion
Disqus is the best third party commenting system for Blogger blogs! Anybody who was looking for how to add diqus on blogger or setup disqus on blogger must have found their solution!
If you’re facing any issue, comment down below and we’ll help you!
If you’re facing any issue, comment down below and we’ll help you!
TheTechPie
This Was the post i was Searching For…There was some confusion in my mind which has been cleared by this Post. I praise the author for his writing skill and creativity. Thanks for sharing the post and helping bloggers like us…
It’s a pleasure to get replies like yours!
Thanks Md.Arman for the wonderful comment 😀
Great post, thank you for sharing! Would you say this works if you already have Blogger comments and you want to move to Disqus but also export your previous comments? Thanks again!
Hey Josh!
Yes, Disqus will import the previous comments to it’s database.
Also, a piece of information. There are some issues with Blogger comments syncing with Disqus (new comments). They are stored in Disqus database but there are issues with timeline.
So Disqus still works correctly but you may receive e-mails with subject “Blogger Syncing Issues”