This guide is done mostly for facebook comments, building on top of my previous guide on how to add them to your blog ( here it is for those of you who don’t have them yet), but it will also work for Disqus or any other thing you want to add to each post.

About Tumblr’s layout

While adding the comments box, or when exploring the html, you may have noticed stuff like:

{block:IfShowTags}

This is one basic of the layout in tumblr… everything between { } (curly brackets) is something that tumblr understands and computes… it’s not part of HTML, nor does your browser gets to see, it tells tumblr what or how (or how not) to send something to others. For example:

{block:Posts}

This tells tumblr where your post starts, everything after it will be repeated on each of your posts… so, if you type “Lalala, watch my post” after it, you’ll start seeing that somewhere before your posts… but what’s important, somewhere before EACH. That’s sort what we want… but we want it at the end:

{/block:Posts}

This is what tells tumblr where your post ends, so this is what we’ll be looking for on this tutorial. Go to customize, Edit HTML, click inside the text box which contains the html, and press ctrl+f and type “{/block:Posts}” so it takes you there.

Now, somewhere before {/block:Posts} you have to copy paste the code of your comment box (or whatever you want to add to each post). Now, your box will appear on each post. Though… maybe not where you want it. Where exactly depends a lot in your layout, so, either you understand HTML and read through it….. or, you start guessing.

Guessing where to paste it

First, just paste it exactly above where {/block:Posts} is. And then “Update preview”. If your theme makes some border around your posts (like my blog at the time of writing does) then it’s probably outside of it…. which you probably don’t want, so now you have to start going up:

</div>

This tag means that a section/DIVision is ending (In HTML, a tag is anything that has <sometext> -notice the ‘<’ ‘>’ - . A tag that starts with / means that it’s the end tag, just like with /block:Posts above). You will have to start moving your code up, and pasting it just before each </div> until it’s inside where you want it. (Note: Some themes might use <span> or other tags to mark their blocks, just look in general for ending tags, </span> in that example). This is how it is in my/this blog:

{block:ifFacebookCommentsOn}<div class="fb-comments" data-href="{Permalink}" data-num-posts="2" data-width="500" data-colorscheme="dark"></div>{/block:ifFacebookCommentsOn}
 </div>
 <div class="bottom"></div>
 {/block:Posts}

And that should be it! Feel free to ask any questions! Which I’d prefer through the comment box : )

I just added this little thingy to destroy webpages into my tumblr :D

You can try it out in my blog, or wherever you are seeing this post, just click here (or don’t, it seems tumblr blocks javascript in posts… it added “denied:” and that messes it up. The one in my blog still works.)

To add it, just copy paste this into your theme and replace Destroy with whatever you want it to say.

<a href=”javascript:var%20s%20=%20document.createElement(‘script’);s.type=’text/javascript’;document.body.appendChild(s);s.src=’http://erkie.github.com/asteroids.min.js’;void(0);”>Destroy</a>

Welcome to this guide on adding a facebook comment box to each of your tumblr posts so that they don’t share comments.

Create app

Though you don’t need to do it first, and you may even skip this, I strongly recommend you do so as it makes administering easier.

Go to: https://developers.facebook.com/apps and create your app by clicking on the create app button near the top right. Give it a name, and agree to the terms. When done, take note of the app id/API key your new app got assigned. You’ll need this later.

Modify theme: HTML

Go to your blog, and click on customize (at the moment, it’s at the top right), then click on edit html (it’s on the theme section in case, like when using Opera, you get the menu bar on top, instead of the sidebar at the left).

Inside the head section (after “<head>”) insert:

<meta property="fb:app_id" content="your_app_id"/>

Replacing your_app_id with the id you got above. (If you skipped it, skip adding that line too, though you will be unable to moderate if you do so -unless you add yourself through fb:admins. You can google it for more information.)

Next, in the body section (after <body>) insert:

<div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=167664976663511";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

Do note that the line “js.src” also contains the fb language (en_US here) if you need another, soon you’ll see how.

So, now comes the part that will actually be seen and where placement is more important… go here: http://developers.facebook.com/docs/reference/plugins/comments/

That page is important: it contains more info than here and will help you tweak your comment box more. But, we are here after one thing, the box that starts with “URL to comment on”. Fill it as you like and then click “Get Code”.

Step 1 is the one we did immediately above, though if you want another language, this will be the code for the box in the language you have your fb on.

And the code from Step 2 is what we’ll be copy pasting, it looks like this:

<div class=”fb-comments” data-href=”example.com” data-num-posts=”2” data-width=”500”></div>

Replace “example.com” with “{Permalink}” so that it becomes:

<div class=”fb-comments” data-href=”{Permalink}” data-num-posts=”2” data-width=”500”></div>

Copy paste it where you want, but a good place to do so, is where “{block:IfDisqusShortname}” is, as that is the place many themes leave for Disqus comments (another way to add comments to your tumblr blog). Simply paste it above it.

Presto! If you did it correctly, and you still use the default theme, your comment box should appear like they do in this blog!

(Note: This blog uses the dark color scheme, so your colors may be different)

EDIT: If you need extra help to know where to paste the code, check out this follow-up http://efaj.tumblr.com/post/13547243893/help-my-comment-box-doesnt-appear-on-each-post