Free Facebook Comments Plugin to Tumblr

If you were thinking a good medium to let your fans to comment on your blog, you’re in the right place.

If you were thinking how to enable comments on Tumblr, you are in the right page.

Yes, today, i am going to show you how to show Facebook comment box on your Tumblr blog.

Facebook is the Word’s largest social network. And on other hand, Tumblr is an amazing social networking + blogging system where millions of people hanging in.

In this post, i will explain you, how to install this Facebook comments Plugin to your Tumblr for free.

You can change the preferences of the plugin as you want. No any HTML, CSS or JavaScript coding skills required.

Just follow the steps and after a few minutes, Facebook comment box will appear on your Tumblr.

This blog post tutorial will solve your issue on how to add comment box in Tumblr and change its appearance as you want. Whole control in your hand.

I coded this plugin along with another premium version that lets you customize Facebook comments section and receive notifications to your Facebook account, so you can moderate comments later.

If you’d like purchase the premium version, chick here to check it out.

Step by Step guide on How to add Free Facebook comment box To Tumblr

1. You may use a premium Tumblr theme for your blog. So first of all you need to back up your Tumblr blog or Tumblr theme. Here’s how to back up your Tumblr theme.

2. After backing up Tumblr theme, click on ‘Edit HTML’ button.

3. Then find the </head> HTML tag in your Tumblr theme. Use CTRL + F (PC) or CMD + F (Mac) keyboard shortcut keys.

4. Copy below code and paste it just above/before of </head> code.

<script src=””></script>

5. Find {/block:hidden} code in your Tumblr theme. Or you can also search </head> tag in your theme. Just above of it, paste below meta codes.

<meta name=”if:Facebook Comments On” content=”1″ />
<meta name=”color:Comment Wrapper Background” content=”#F8F8F8″/>
<meta name=”color:Comment Call To Action color” content=”#444444″/>
<meta name=”text:Comment CTA Font size in px” content=”32″ />
<meta name=”text:Comment Call to Action” content=”Spread out your opinions” />
<meta name=”text:Facebook comment Box Width in px” content=”450″ />
<meta name=”font:Comment Call to Action Font” content=”Constantia,Georgia,serif”/>
<meta name=”select:CTA text align” content=”center” title=”center”>
<meta name=”select:CTA text align” content=”left” title=”left”>
<meta name=”select:CTA text align” content=”right” title=”right”>
<meta name=”select:CTA font style” content=”normal” title=”normal”>
<meta name=”select:CTA font style” content=”italic” title=”italic”>
<meta name=”select:CTA font style” content=”oblique” title=”oblique”>
<meta name=”select:CTA font style” content=”initial” title=”initial”>
<meta name=”select:CTA font style” content=”inherit” title=”inherit”>
<meta name=”select:CTA font weight” content=”normal” title=”normal”>
<meta name=”select:CTA font weight” content=”bold” title=”bold”>
<meta name=”select:CTA font weight” content=”bolder” title=”bolder”>
<meta name=”select:CTA font weight” content=”lighter” title=”lighter”>
<meta name=”select:CTA font weight” content=”initial” title=”initial”>
<meta name=”select:CTA font weight” content=”1000″ title=”1000″>

5. Now find <body> HTML code in your Tumblr theme. You may use above keyboard shortcuts to find this code. In case if you can’t find this code, just search <body code in your theme.  Then paste below code just after body tag.

<div id=”fb-root”></div>
window.fbAsyncInit = function() {
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML

6. Find this {/block:posts} Tumblr data tag in your Tumblr theme. Just above/before it, paste below block of HTML comment box code.

<div align=’center’>
<div style=”background:{color:Comment Wrapper Background};”>
<div style=”text-align:{select:cta image align};”>
<img src=”{image:CTA Image}”/>
<div style=”color: {color:Comment Call To Action color}; font-family:{font:Comment Call to Action Font}; font-size: {text:Comment CTA Font size in px}px; text-align: {select:cta text align};font-style:{select:cta font style};font-weight:{select:cta font weight};”>
<strong>{text:Comment Call to Action}</strong></div>
<script src=’′></script>
<div id=’fbcbox’><fb:comments href='{Permalink}’ title='{Title}’ xid='{PostID}’ width='{text:Facebook comment Box Width in px}’/>
<div id=’crdtpbt’></div>


7. To show the number of Facebook comments each blog post has, you have to place some codes. To do that, find {/block:title} code in your Tumblr theme. You might find more than one {/block:title} code in your Theme. They’re for text posts and chat posts. Right after {/block:title}, paste below HTML code of Facebook comment counter.

{block:ifFacebookCommentsOn}<br/><iframe src=”{Permalink}&permalink=1″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:130px; height:16px;” allowTransparency=”true”></iframe> <br/><br/> {/block:ifFacebookCommentsOn}

8. That’s all. Now save your Tumblr theme.

As you set up the Facebook comment plugin on your Tumblr blog, now you can change the appearance of comment box very easily.

To get more features than on free comments plugin, you have to upgrade to the premium version. Not only you’d receive a lot of benefits such as getting notifications, but also free ongoing updates.


Facebook comments plugin is very useful for Tumblr blogging platform than default Facebook comment box widget. Because you can change many things just using the mouse and keyboard very easily. Although there is no a lot SEO benefits, you’d receive a lot of traffic from Facebook and more engagement.

Facebook comments plugin is one of popular plugins on Facebook. I hope this tutorial helped you set up the free Facebook comments plugin on your blog. I recommend you to upgrade to the premium version, so you can get more advanced features that free plugin doesn’t have.

Do you have any problem regarding this plugin, installing the script or anything else? Share your questions below, so I can help you solve those problems.


Chamal Rathnayaka

As the founder of Pitiya Internet Marketing blog, I make sure every content I share on this site is helpful and you get something out of them. To stay connected with me and receive latest blog posts, exclusive content, and offers, sign up for Pitiya newsletter.