Adding Facebook Comments on Blogger
Go to Edit HTML - tick Expand Widget Templates ..
1- First , "Create an Application" , here http://developers.facebook.com/setup/ , Fill,
Site name: Your Blog Name
Site URL: http://YOUR-BLOG.blogspot.com/
Locale: ...
Note: on the "Site URL" you must type "/" at the end of URL , example : http://seoblog7.blogspot.com/ , if not, your fb comment will not work well...
Then click "Create Application" , and you'll see your "App ID" , example my App ID is "App ID:124929134233306"
2 - Back to blogger , add the following code into your top section of Template Code, befor the <head> tag :
xmlns:fb='http://www.facebook.com/2008/fbml'
And will look like below:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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'>
<head>
Note: You can ignore the code above, but your fb comment will not work except in firefox
3 - Next, add the following meta tags , after the <head> tag , before the <b:skin><![CDATA[/* code ,
<meta content='YOUR Blog Name' property='og:site_name'/>
<meta content='YOUR App ID' property='fb:app_id'/>
<meta content='Your Facebook ID' property='fb:admins'/>
And will look like below approximately :
<meta content='SEO Blogger 7' property='og:site_name'/>
<meta content='125488420843950' property='fb:app_id'/>
<meta content='Iwan Rachmanto' property='fb:admins'/>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
4- Next , Find this code : "post-footer-line post-footer-line-3" , and place the following code after the end section (afer the </div> code)
</div><div align='left'>
<b:if cond='data:blog.pageType == "item"'>
<div>
<fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' width='400'/></div>
</b:if>
</div>
And will look like below approximately :
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>
</div>
</div>
</div>
<div align='left'>
<b:if cond='data:blog.pageType == "item"'>
<div>
<fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' width='400'/></div>
</b:if>
</div>
You may change width='400' and align='left' with yours , example : width='500' and align='center'