Add facebook comment box to blogger

Hi All,

it has been ages since the last time i talk about 'techie thingy'.. :-) Being a full time mother for now almost 6 months,  my technical section of the brain does not really  functioning to the fullest. The most technical thing that i did .....could be how to sharpen the kitchen knife?

I am going to share the simple steps to include the facebook comment box to our blogger post. What you need to do:

STEP 1: Facebook Application Creation

1. Create facebook application. Go to https://developers.facebook.com/apps .If this is your first app, before you can proceed with the creation, there are some verification needed. The codes will be send to your mobile phone  to activate the developer mode.

Click on the "+Create New App" button.The green button on the top right of the screen.

Go to Setting --> Basic, key in your valid email and save  changes.

You have successfully created you application. Change the application setting to be viewable by others .

 go to status & review. Click on the "NO" button  as below

Your application now is accessible to others.

go to setting--> Basic and note the application Id. this ID will be the ID to be use in the blog setting.

Step 2 : Blogger Configuration

1. Go to your blog, make sure you login to your blogger account. Click DESIGN on the TOP RIGHT of the page.

2. Click on Template --> Edit HMTL

You will get this. For those without coding knowledge , easy.. this will not be as complicated as you thought.

3. Find this line started with

4. Replace html  with html xmlns:fb='http://www.facebook.com/2008/fbml' . Leave the rest of the codes.

yours might be different depend on the setting you have set before. Just make sure the first part in bold is right.

5. Search for the tag

</body>

  Add this code just before the tag.

<div id='fb-root'/>

<script>
window.fbAsyncInit = function() {    FB.init({      appId  : &#39;Your-App-Id&#39;,  
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(&#39;script&#39;);  
e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;  
e.async = true;  
document.getElementById(&#39;fb-root&#39;).appendChild(e);    }());
</script>


Replace Your-App-Id  with your application ID created in STEP 1

6.  Search for 

</head>

and paste this codes  just before it.

<meta expr:content='data:blog.pageTitle' property='og:title'/> 

<meta expr:content='data:blog.url' property='og:url'/>

<meta content='Journey To Happiness' property='og:site_name'/> 

<meta content='Blog-Logo-Image' property='og:image'/> 

<meta content='Your-App-Id' property='fb:app_id'/> 

<meta content='http://www.facebook.com/Noraida' property='fb:admins'/> 

<meta content='article' property='og:type'/> 

Then Replace:

Journey To Happiness:-                       With Blog Title Name 
Blog-Logo-Image:-                               With Logo Image 
Your-App-Id:-                                        With Facebook App id 
Noraida:-                                               With Facebook Page Username 

7. Now we want to place the Facebook comment box on the blogger page. search for

<b:includable id='comment-form' var='post'> 

paste the below code right after the search line

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div>
<fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='530'/></div>
</div>
</b:if>

just incase you cannot find <b:includable id='comment-form' var='post'>  try to look for 

 <div class='post-footer'> 

and paste the code above it. If you find it 2 times, paste above the second one. Save the template and view your blog.

Note:

<fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' expr:mobile='data:mobile' width='530'/>

 hold the possible setting for your facebook comment box setting

I AM THE AUTHOR

Noraida Arifin
16 years  programming experience and  still learning.
spent 13 years of my life span as a software engineer
in a multinational company

Currently  a retire programmer.
Feedback are welcome.

Contact me at :
https://www.facebook.com/makcikprogrammer