I just discovered how to do this for Blogger/Blogspot. So, I’m going to record the steps I have done here. You may found other tutorial from other website, but some of them is not working for Blogger/Blogspot but working for Wordpress. Why the other tutorial not working? Because they asking you to upload a file call xd_receiver.htm to your blog. Blogger/Blogspot do not allow to upload plain HTML. Here is the alternative way in 5 easy steps.
First Step:
Go to http://www.facebook.com/developers/createapp.php
Key in your Blog Name.
Agree the terms.
Click the “Create Application” to continue.
Second Step:
Copy the API Key to somewhere like notepad.
Upload your web icon and logo
Third Step:
Click Connect Tab on the left hand side
Type your Blog URL “yourblogurl.blogspot.com” in the Connect URL field.
Now click the “Save Change” button on the bottom
Forth Step:
Sign in your Blogger.com
Go to Blog Dashboard > Layout > Edit HTML
You may backup your original template before you proceed here, by click “Download Full Template”.
Look for this code on the top template of the code source.
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' >
then, add the follow Blue line only.
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>
Now, add the following code before </head> tag
<script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php' type='text/javascript'/>
After that, add the following code before </body> tag. Please change the blue line to your API Key
<script type='text/javascript'>
FB.init("YOUR_API_KEY_HERE", "");
</script>
Click the “Save Template” orange button.
Final Step:
Add the following code to the area you want to display the comment box
<fb:comments width='430'/>
Real Example:
Check out the comment box I added to one of my new site here
http://shantaoband.blogspot.com/2009/10/welcome-new-site.html
Please do not type “Testing” on my comment box. You may type something like “Hello” or “Nice” or some greeting words. Thank You =)
You may like this see my previous post to add Facebook Connect function using Disqus wizard.
Please do not hesitate to ask here if you don’t understand or want to further customize your comment box. Cheers!
