Facebook is all the rage these days and adding it to your blog is a good way to drive extra traffic and make your site more "social".However, it's not very simple for new blogger to add the various Facebook social plugins to your site.
This guide will hopefully change all that!
Details after the cut
1) First we need to get a Facebook API key. To do this we go here and register our site. You must have a Facebook account.
http://developers.facebook.com/setup/
2) We fill out the form as shown below.
Fill out the name of your blog and then the URL/LINK eg
http://tvtechgirl.blogspot.com/
Make sure you have the http:// and the trailing /
Then click Create
3) This will take you to your Applications Settings Screen. If all goes well you should see a screen like this.
Make a note of your API ID.
Under this you will see a snippet of Code. Save this for later.
4) Now we need to make some change to your Blogger Template. Goto Design, Edit HTML
5) Now we need to add the following to your Template
xmlns:fb='http://www.facebook.com/2008/fbml'
At the very top of your blogs template you will see some code like this.
<html b:version='2' class='v2' 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'>
You need to add the following inside the last > part
xmlns:fb='http://www.facebook.com/2008/fbml'
so that your code looks like this
<html b:version='2' class='v2' 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'>
Press the Save button to Save your Template.
6) Next we need to add the Facebook Script to our code. In Step 3) you were given some example code. Copy the Code as shown below. Only Copy the Highlighted parts
7) Now we need to paste this code into your Blogger Template. Goto Design, Edit HTML
Locate the opening <BODY> Tag, it should look like <BODY> or <body class='loading'>
Paste the code immediatly after it as shown below.
Press Save.
8) Ok, if you have made it this far, your blog is now ready to install the Facebook Social Plugings that you want.
9) First we go to the Facebook Social Plugins Page and decide which Plugin you want to install.
http://developers.facebook.com/plugins
10) For the purposes of this FAQ I'll be installing the Recommendations Plugin but the instructions are VERY similar for all of the others.
11) Click the Recommendations Plugin. You will be taken to the following screen.
12) Fill out the Form, use your blogs link as the Domain, and configure your settings. When ready click the GET CODE Button.
13) When you click the Get Code button, you will get a popup.
14) Copy the XFBML code eg for me it's
<fb:recommendations site="http://tvtechgirl.blogspot.com/" height="400" font="arial"></fb:recommendations>
15) Now We need to add this code as a Widget. Goto Design, Page Elements and click the Add Gadget link.
16) Select HTML/Javascript Widget.
17) Put in a title and copy the XFBML Code into your Widget.
18) Press Save and View your blog, you should now have a nice Facebook Recommendations Widget.
You can add other widgets the same way starting back from Step 9 and repeat the process.
I hope you have found this useful.
Any questions, ask in the comments.