THIS IS THE OLD VERSION. Go here for the latest version.
Glad this has been helpful to some of you. And thanks to those that have been willing to reply to some of those having problems getting things setup in the comments. If this page helped and if you want to say thanks, I hope you'll take a moment to visit my wife's site - LifeWithBoys.com
Updated April 15, 2011.
I haven't been a huge fan of Disqus for my Tumblr comments, so with the release of the new Facebook Social Plugins, I thought I would give it a try. So here is how I set it up...
Setup Facebook App
Sign up at the Facebook Developer site to obtain an App ID. Just sign up and Set Up New App.
http://www.facebook.com/developers/createapp.php
Give the app an App Name, Agree to the terms, and click Create App. (See Image 1.) Enter the Security Check (always a pain!). (See Image 2.)
Now you will be at the details form for your app. First is the About tab. You can enter a User Support email or web page, and a Contact Email. You can also add additional comment moderators on this tab. Go to the Manage Users section. Add additional Administrators. Your moderators will need to confirm the request to be an administrator. Don't Save Changes yet. (See Image 3.)
Next is the Web Site tab. Enter a Site URL (the full site for your blog) like http://blog.lifewithboys.com/. Also enter a Site Domain where you will use your comments. If it is the same as your blog, you can enter that domain (blog.lifewithboys.com) or you can have it span your entire domain (lifewithboys.com). (See Image 4.) Now click Save Changes.
Your Facebook configuration is complete.
Modify Tumblr Theme
Now let's edit our Tumblr Theme. Go to your Dashboard, and click Customize on the right sidebar. Go to the Theme tab and set the theme to Custom HTML (you may already use custom HTML).
At the top of the code, you should see the <head> tag; add the following after this tag.
<meta property="fb:app_id" content="111111111"/>
Change 111111111 to the App ID you created.
Add the following just after the above line.
<meta name="if:Facebook Comments On" content="1" />
This will allow you to enable/disable the comment feature.
Now, sift through the code and find the <body> tag (it may be something like <body onLoad="blah"> as well) . Add the following after this tag.
{block:ifFacebookCommentsOn}<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>{/block:ifFacebookCommentsOn}
Where you display the Comment Count (comments, not Tumblr Notes) on your listing and detail pages, you will want to add the following.
{block:ifFacebookCommentsOn} <span><em><a href="#facebook_thread"><fb:comments-count href=""></fb:comments-count> Comments</a></em></span> {/block:ifFacebookCommentsOn}
You can change the Comments text to whatever you like. As it is, it will show 0 Comments or 230 Comments.
Where you want the Comments to appear, add the following.
{block:ifFacebookCommentsOn} <a name="facebook_thread" id="facebook_thread"><!-- --></a> {block:PermalinkPage} <fb:comments href="" num_posts="20" width="476"></fb:comments> {/block:PermalinkPage} {/block:ifFacebookCommentsOn}
You can adjust the Number of Posts (num_posts_) and the Width (width).
If you are using a default template, it may be easiest to just track down where the Disqus code is, and add the Facebook code above or below it. It is usually found near something like {block:IfDisqusShortname}
Tumblr Settings
Go to the Appearance tab, and remove any text from the Disqus Shortname if that exists. This will disable Disqus comments if you use those. And make sure Facebook Comments On is checked.
Good luck and Enjoy!
(go to the more recent version of this tutorial to comment or ask questions)