SEARCH

How-To Geek

Add Traditional Comments to Tumblr Blogs With Disqus

Would you like to add a traditional comment box to your Tumblr blog?  Here’s how you can add the Disqus comment system to your Tumblr blog to find out what other think about your posts.

Tumblr’s default “Like” and “Reblog” options are an attempt to reinvent comments, but they only work well when all of your friends and readers are using Tumblr.  Adding traditional comments to your Tumblr blog can broaden your site’s community and make it more fun and useful.  Although Tumblr doesn’t include a standard commenting system, it does allow you to integrate the Disqus comment system, which can bring both comments and feedback from social networks to your blog in only a few steps.  Here’s how you can register and add Disqus to your Tumblr blog.

Register Your Blog With Disqus

Head over to Disqus.com to signup for an account and add it to your blog.  Click Sign Up, Free to get started.

sshot-2010-07-13-[11-48-09]

Enter your blog’s URL address, which is usually your_blog.tumblr.com.  Then enter a name for your site, as well as a Shortname that uses no spaces or special characters other than dashes.  Make sure to copy your shortname, as this is what you’ll need to add Disqus to Tumblr.

image

Enter your username, password, and email address below to create your moderator profile, and then click Continue.

image

Now, on the second page, you’ll need to choose some settings for your blog’s comments.  Select your language at the top, and then you can add many optional, social features or simply click Continue at the bottom to add a standard comment field to your blog.

image

Disqus Optional Features

The optional features can be very nice.  From the first field, you can select to add a Facebook API connect key, which will let you share comments on Facebook and let Facebook friends comment without logging in again.

image

One of the worst problems with comments on blogs is spam, and for many bloggers, it has taken the joy out of blogging.  Moderating comments all day is nobody’s definition of fun.  Check the Akismet box to enable spam filtering on your comments, and enter your Akismet API key.  If you don’t already have one, check out our post on Adding WordPress.com Features to Your Blog for info on signing up for a free Akismet API key.

image

If you’d like to see what other people across the internet are saying about your site, check the Reactions box.  You can choose to see posts from Twitter, Blogger, WordPress, Hacker News, Digg, and more, or simply select Select all services to see every reaction Disqus finds.

image

By default, if someone wants to leave a comment on your blog, they’ll have to enter their name, email, and password or sign in with a Disqus profile.  If you’d like to make it easier, check the Display login buttons with comment box near the bottom of the page.  Now you can select to let visitors sign in with their Facebook, Twitter, OpenID, or more to make it easier for them to comment.

image

Once you’ve selected the options you want, click Continue on the bottom of the page.

image

Now your Disqus account is setup and ready to add to your blog.  Disqus works with a variety of blogging systems, so it will offer instructions on installing it on your own site.  Click the Tumblr link for more info on installing it in Tumblr, or just keep reading here to finish getting it setup the easy way.  Note that you may need some code from this page if your theme doesn’t automatically support Disqus comments, so you may want to open it in another tab for reference.

image

Add Disqus To Your Tumblr

Head over to your Tumblr dashboard, and select the Customize link on the right side.  Alternately, if you’re logged into Tumblr, simply browse to Tumblr.com/customize.

image

On the Customize page, select the Appearance tab.

image

Scroll down to the bottom of that list, and paste your Disqus shortname in the Disqus shortname box.  Remember, this is the shortname you entered when you were signing up for Disqus.  You may see different options depending on your theme, but most themes will include a Disqus options box.

SNAGHTMLfa2c8e

Once you’re done, click Save + Close in the top right corner.

image[42]

Adding Disqus Manually to Tumblr

If you do not see the Disqus box in your Appearance settings, then you’ll need to add the Disqus info manually to your theme.  Please note that this is a fairly advanced step, and while we show how to do this generally, it may not work on all themes the same.  If you feel unsure, you may want to switch to one of the Featured themes, as all of them include Disqus support.

To proceed and add Disqus manually, select the Theme tab,

image

and then click the Use custom HTML link at the bottom of the theme tab.

image

Now, in a separate window or tab, open your Disqus instructions page we mentioned earlier.  If you don’t have it open, browse to the Disqus Tumblr installation page (link below).  Once you’re there, copy the text in the box under Manual Instructions part 2.

image

Back in Tumblr, paste this code in your HTML source directly under:

{/block:Posts}

If you can’t find this, you can press Ctrl+F and then enter the search term in your browser.

image

Now, copy the text in the 3rd box on the Disqus settings page, and paste it before the {/block:Posts} line.

image

Once you’re done, click Save + Close in Tumblr as before.  You should now have Tumblr comments on your theme even if it didn’t include them by default.

image[42]

Disqus on Tumblr

Now, when you visit your Tumblr blog, you’ll notice a couple changes.  These may look differently depending on your theme, but most themes will now show the number of comments and reactions on a post directly on your front page.

image

You’ll also see a new comment box, with the social login options you selected, or alternately traditional name, email, and website fields if you chose that.

image

Once you’ve got comments, they’ll show up under your post as normal, and you can reply to them in one click.

image

Conclusion

Whether you’re running a personal blog or a corporate news site, comments can be the bridge between you and your readers.  Disqus brings this to your Tumblr blog, and helps you keep up with the entire conversation around your posts.  Combine this with Tumblr’s default like and “Reblog” features, and your blog is more social and connected than ever.

If you don’t already have a Tumblr blog, check out our article on how to Create a Beautiful, Easy to Update Blog With Tumblr.  Tumblr makes blogging simpler, and with some of these tricks and tips you can make it work just like you want and contain many of the features of more advanced systems.

Links

Signup for Disqus

Create a Free Tumblr Blog

Install Disqus on Tumblr Manually

Matthew digs up tasty bytes about Windows, Virtualization, and the cloud, and serves them up for all to enjoy!

  • Published 07/14/10

Comments (22)

  1. nurul

    When I use my laptop as a monitor I plug a regular keyboard into the USB port. I have noticed that the regular keyboard does not have a function (fn) key like the one on the laptop keyboard. Is there a key on a regular keyboard that will duplicate the keyboard function key?

    Thanks,

    regards

    Nurul

  2. jitender

    The editor is simple to use, and gives just enough tools to make it easy to post like you want. Standard keyboard shortcuts for bold, italics, and more work as normal in the online editor. Click Create Post when you’re ready to publish your thoughts to your blog

  3. abc

    Step wise process to explain the complete process by graphics and examples………This is very useful to users who are starting to begin now………

  4. K

    Hi there, I’m very new to this tumblr stuff and just signed up to discuss and copied my shortname into the disqus section of the appearance menu but the comments box is still not showing up on my blog – any ideas why not? Thank you!!!

  5. Matthew Guay

    @K – Try using another browser or hard-refreshing your browser … could be you’re seeing the older, cached version of your site. Otherwise, make sure you have the Disqus shortcode entered correctly. What theme are you using? I could check it out on mine and see…

  6. sodomie

    Thanks for this nice article, it’s absolutely famous blogs

  7. reynaldo

    nice share
    it help much

  8. Help!

    I am using the “strict” theme.

    I added my disqus code into appearance at the bottom.

    I also added the text in “manual instructions part 2″ immediately after {/block:Posts} in my HTML codes. I pressed save and close.

    My theme colours have all been changed now and my whole tumblr looks different! Any ideas?

    Thank you in advance!

  9. imey

    I already use disqus in my tumblr..but suddenly my disqus comment on tumblr change in Arabic language. Im so confuse how it happened. I already set language in english but still appear in Arabic. Any idea how to change it?

  10. stuff

    yeah!

  11. homework help

    This is the nice post..well thinking to post here..thanks for sharing here with us..

  12. aa

    МСКгрупп банкрот! закроется в 2012г навсегда и никаких им выплат от меня!!!

  13. Josh

    Hi,

    Aside from resorting to html and changing the CSS file, I have done everything that disqus has told me to do. I see no area where a comment box would start to be or anything.

    I am using the Minimalist theme on tumblr.

    i’ve refreshed my browser and tested it out on firefox, chrome and safari.

    Do i need to use the manual installation for disqus?
    if so, i’d like to modify the css file and not the html.

    not really sure what is going on. I’d like anyone to comment, not just tumblr users.

    any suggestions?

  14. Josh

    if you would like to check the blog out yourself: culinarydisposition.tumblr.com

    just so you can see for yourself what’s happening if possible.

  15. Josh

    I’ve now resorted to using the manual HTML installation on a disqus enabled theme.

  16. Kara

    Hi Josh

    Did that work for you? I am using the minimalist theme and have the same problem but I am thinking it is actually working but I just don’t have any comments as yet?

  17. Marathon Telecom

    Good to become browsing your weblog once more, it has been months for me. Well this article that i’ve been waited for so lengthy. I need this post to total my assignment inside the university, and it has exact same subject together with your post. Thanks, excellent share.

  18. Jolyne

    Josh, (or anyone)

    How did you center your “comments” on the page? mine is left justified when I manually put the html code in…

    thanks!

  19. Malory

    Nevermind!!!

  20. moncler discount store

    Thanks for sharing a wonderful post.

  21. bossvip

    Canada Goose пуховики купить Россия, купить Canada Goose Куртки в москве онлайн, поднимите ваши любимые стили. пользуются лучшие цены и ограниченный скидка времени. Canada Goose пуховики гордится созданием подлинных передач, чтобы помочь реальным людям, живущим в экстремальных боевых условиях элементов. Изначально разработанный для ученых, работающих в научно-исследовательских центров на станции Мак-Мердо в Антарктиде, Канаде Гусь экспедиции позволяет своим владельцам для работы в самых холодных температурах. Это не только прочный и хорошо изолированы, с заполнить мощности белая утка вниз, но его концептуальным дизайном также имеет высоко функциональный набор внешних карманов, идеально подходит для легкого хранения передач и ручной потепления.

  22. Mark

    Thanks for sharing – drives me nuts that people can comment and I can’t respond to them through tumblr but this is an awesome way to allow conversations – thanks for the write-up!

Get Free Articles in Your Inbox!

Join 134,000 newsletter readers

Email:

Go check your email!