Put Facebook Comment Box in Your Blog

I had such a difficult time to put in the Facebook comment box in my blog. Well, I do not understand html code that much and I have difficulty in making sense of the alien-look-like codes. It drives me crazy. Sort of making me determined to join webmaking class.

However, these are the things that I learnt so far. Hope it could make a useful guidance to you. If you are a dummy like me. (Sort of a dummy advicing another dummy eh).

SINGLE COMMENT BOX
Okay, to put in a single comment box to your blog (mind you not on each post okay) is very simple. Go to Facebook Developer - comment. There you will put in:

1. Your blog url (make sure this does not refer to post url)
2. Number of post you want to display. I put in 5, more than that it will colapse to view more
3. Width of the box - refer to your blog size. make it small if you put it at the gadgets' frame
4. Choose you colour scheme. Choose dark if your blog has dark background.
5. There you have it! Click on get code button.

There are two alien-like code provided. The top longer one is to put in the blog html code. For Blogger, you will find it under template tab: edit HTML. The code should be put under < body >. Now here is a bit tricky. < body >can also mean < body < body expr:class='"loading" + data:blog.mobileClass'> >. As long as you see < body...yaddayadda >, that is the correct one. However, < /body >is already the closing code. It's wrong to put the code under < /body >. The second code provided; put it in the gadget section under layout tab. Choose HTML code when you add gadget.

MULTIPLE COMMENT BOX
BUT! if you want to put multiple comment box in your blog, you need to create an application first.

Create application
Go to Facebook Developer - Apps and create new app. Fill in App name. If you do not plan to do other things, you can leave the namespace empty (I left it empty). Terms and conditions' box is ticked and create your app. From that, you will get you app Id which will be used quite frequently.

Then, follow the instruction above. You will notice that the top longer code has your app Id attached to it. Don't change anything and follow the exact step above.

GETTING NOTIFIED
 The next step is to put in Init. Get the code from stockoverflow.com. Paste this under < body> right beneath the one you just pasted above.

Test it...if it does not work, you have done it wrong somewhere. You can ask any question in stockoverflow.com

Good Luck. I hope you don't have to go blindfolded (like me) on putting your comment boxes in your blogspot.