Add Facebook comment box to each tumblr posts.

Follow this tutorial for how to setup the Facebook comment box on a Tumblr blog.

First, set up a new application;

Visit Facebook Developer page and create app for your page https://developers.facebook.com/apps.

Enter App Name
Enter captcha code for security check, submit
About tab - Copy your App ID/API Key you need it later.
Click on Web tab on your app page and enter your tumbr Site URL and Site Domain. 
Then Save Changes.


Login to you tumblr - Preferences -> Customize your blog -> Theme ->

replace/update your <html>;

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” LANG=”en” xmlns:og=”http://ogp.me/ns#” xmlns:fb=”http://www.facebook.com/2008/fbml”>

add this meta tags within the <head>;
<meta property=”og:site_name” CONTENT=”{Title}”/>
<meta property=”fb:app_id” CONTENT=”App ID/API Key”/>
<meta property=”fb:admins” CONTENT=”YourFacebookProfileID”/>
<meta property=”og:type” CONTENT=”article”/>

add this after your <body>;
note: replace App ID/API Key with your App ID number you’ve just create recently

<div id=”fb-root”></div>
<script SRC=”http://connect.facebook.net/en_US/all.js#appId=[APP ID]&amp;xfbml=1”></script>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId  : ‘App ID/API Key’,
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });
  };
  (function() {
    var e = document.createElement(‘script’);
    e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;
    e.async = true;
    document.getElementById(‘fb-root’).appendChild(e);
  }());
</script>

search this {/block:Posts} and add the code below before it.

{block:PermalinkPage}
<div id=”comments_fb”><fb:comments href=”{URLEncodedPermalink}” num_posts=”20” width=”560” publish_feed=”true”></fb:comments></div>
{/block:PermalinkPage}

Finally, Save changes on your theme.