In this tutorial it is not compulsory you disable your blogger comment box, you can use the both comment box to provide different options to your readers commenting on your blog.
Let's Get This Applied To Your Blog/Site
STEP 1= How to GET your Facebook App ID
- Go to facebook developers page to get your App ID
- Click "+Create New Application"
- Click "Go to App" > "+Create New App"
- A window will pop up enter your desired name and click "Continue" as shown below.
In the next window that appear, you will need to fill some box as shown in the image below.
- Enter Blogspot.com to where the red arrow is pointing.
- Enter your blog/site url to where the purple arrow is pointing, in this format http://www.realcombiz.com/
- Copy your App ID from where the brown arrow is pointing and paste it into a notepad.
- Click "Save Changes"
- Login to your blogger dashboard
- Click on "Design" > "Edit HTML" please make sure you back up your template
- Mark/Tick "Expand Widget Template"
- Use ctrl F to find <html
- Give a space after </html tag and paste the code below after it.
xmlns:fb='http://www.facebook.com/2008/fbml'
Note : Give space at both ends of the code above.
Example: ----***</html xmlns:fb='http://www.facebook.com/2008/fbml' ***---
- Find the next code <body>, if you can find that, then find
<body expr:class='"loading" + data:blog.mobileClass'> - Paste the code below immediately after any of the code you find.
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'App ID',
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('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'App ID',
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('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
- Replace App ID with your application id which you copied in the first step.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Realcombiz' property='og:site_name'/>
<meta content='Blog logo url' property='og:image'/>
<meta content='App ID' property='fb:app_id'/>
<meta content='http://www.facebook.com/realcombiz' property='fb:admins'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Realcombiz' property='og:site_name'/>
<meta content='Blog logo url' property='og:image'/>
<meta content='App ID' property='fb:app_id'/>
<meta content='http://www.facebook.com/realcombiz' property='fb:admins'/>
<meta content='article' property='og:type'/>
- Replace Realcombiz with your blog title
- Replace Blog logo url with your blog logo image url, this will appear next to your post title when you post is shared by readers.
- Replace App ID with your application id, which you copied in the first step.
- Replace http://www.facebook.com/realcombiz with your facebook profile url.
- Now find the code below
<div class='post-footer-line post-footer-line-1'>
Paste the code below immediately below/after the code above.
<b:if cond='data:blog.pageType == "item"'>
<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='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.realcombiz.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>Realcombiz.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.realcombiz.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Realcombiz.com</a></b></div></div>
</b:if>
<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='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.realcombiz.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>Realcombiz.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.realcombiz.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Realcombiz.com</a></b></div></div>
</b:if>
- To specify the type of background you want, change light above to dark, if you want a dark scheme.
- To change the comment box size, edit width='520'
- To change the footer credits size, edit width:510px
- The difference between the comment box and the footer box should not exceed or below 10px.
- Click "SAVE TEMPLATE"
LIGHT COMMENT BOX
DARK COMMENT BOX
The process seems to be long, don't worry we are almost there. To get notification you will need to add to some code your blog, and you will be receiving notification directly into your facebook account as shown below
Let's get this done
- Login to your blogger dashboard
- Click on "Design" > "Edit HTML"
- Mark/Tick "Expand Widget Templates"
- Use ctrl F to find <b:skin><
Confused? Feel free to ask
I rarely comment on blogs but sincerely speaking your blog rocks. This a whole lot of info. For grabs . Keep it up
ReplyDeleteThanks bro
DeleteThanks looking pretty. Add Facebook Comment box is not so simple as you explained. But Because of you I am able to do same.
ReplyDeletepuff and pie
what if i stop in step 2. will the facebook comment box still appear. I ask bcos I have completed that and saved template but still dont have fb comment box
ReplyDeleteif you stop in step 2, your facebook comment box will still appear, it's just that you won't be able to receive any notification if someone comment on your site using the fb comment box. if you still have any problem, feel free to ask
Delete@Durodola Ridwan
ReplyDeletexmlns:fb='http://www.facebook.com/2008/fbml'
when I add the above code after <html before and after as adviced I notice that after I save the code is pushed to the end of the line and does not stay right after <html
Below is how it appears
<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'>
(Used HTML encoder as tags are not allowed here)
Is this a problem. Could this be a reason for the fb comments box not appearing after all the steps have been followed?
don't add the code before and <html, just add it only after <html, in this format ----</html xmlns:fb='http://www.facebook.com/2008/fbml' ---, take note of the space between </html and the code and the space after the code. If you still don't get your your fb comment box, then restore your previous backup, and start again following the tutorial carefully.
DeleteI don't know my blog logo url ... I don't have any special one - can I skip this step?
ReplyDeleteYou can skip it, and you can add it later if you wish.
Deletewhen i go to "facebook developers page" i could not find "+Create New Application"
ReplyDeletehelp me out plz
~+๐oO[ ลอตเตอรี่ ]Oo๐+~
ReplyDelete--------------------------------
~+๐oO[ ลอตเตอรี่ออนไลน์ ]Oo๐+~
หาไม่เจอ ให้เซิดกูเกิลว่า
"ลอตเตอรี่ออนไลน์"
โทร 0863132381/082-0793134
ragtrixro@yahoo.com
หรือจำไว้ว่า http://www.ลอตเตอรี่ออนไลน์.com
--------------------------------
~+๐oO[ มีตรวจหวยรางวัลที่1ด้วย ]Oo๐+~
~+๐oO[ สลากกินแบ่งรัฐบาล ]Oo๐+~
~+๐oO[ เลขเด็ด ]Oo๐+~
~+๐oO[ หวย ]Oo๐+~
~+๐oO[ facebook ]Oo๐+~
~+๐oO[ เกมส์ ]Oo๐+~
~+๐oO[ lottery ]Oo๐+~
~+๐oO[ หนัง ]Oo๐+~
~+๐oO[ รถ ]Oo๐+~
~+๐oO[ บ้าน ]Oo๐+~
~+๐oO[ งาน ]Oo๐+~
~+๐oO[ ขาย ]Oo๐+~
~+๐oO[ รูปภาพ ]Oo๐+~
~+๐oO[ ข่าว ]Oo๐+~
~+๐oO[ คลิบ ]Oo๐+~
~+๐oO[ การ์ตูน ]Oo๐+~
~+๐oO[ ดวง ]Oo๐+~
~+๐oO[ หญิง ]Oo๐+~
thank you very much bro i am very happy for your site and your this post its working very very good i like it bro
ReplyDeleteHey, great post and it really helped me get the facebook comments working on my blog. I wanted to get some SEO out of it but the iframe issues (search engines won't crawl iframes) made this impossible and, of course, the only way I could find to pull the text of the comments was through php scripts (which blogger doesn't support). Soooo, i wrote a php script and threw it on my server and then called it as an object on my blogger template and viola! - it worked.
ReplyDeleteIn kind, I thought I'd share it with you and maybe add a little value to your already great post. Just paste this code in your blogger template above or below the commenting code and it should be good to go. If you want to view the results temporarily change the opening div tag to just <div> and refresh the page(s) to see how Facebook feeds the text. Hope this helps some of you!
One more note, the php script grabs the referring URL(of wherever you've put the html script) so it should work for any and all posts/pages dynamically (including canonical URLs) - I thought that was a nice touch ;-)
<!-- BEGIN Graph API comment pull and text insertion in an invisible div for SEO purposes -->
<div class='separator' style='clear: both; display: none; text-align: center;'><object data='http://sukithookahs.com/get_comment_text.php' height='60px' type='text/html' width='450px'>
</object></div>
<!-- END Graph API comment pull and text insertion in an invisible div for SEO purposes -->
A final note, I AM NOT a programmer so this isn't the prettiest thing in the world, but it works great...
First of all thanks for the article.
ReplyDeleteI do everything in steps 1&2 and when I click to save the template or preview it I get the following message: XML error , line 1009, column 24: Element type "meta" must be followed by either attribute specifications, ">" or "/>".
Can you please help me?
Thank you
Error
ReplyDeleteApp Domains: http://yinyangyohackers.blogspot.in should not contain protocol information.
what to do now ????
It means you are making a mistake from the developers page. Check the second screenshot provided for guide on how to fill the data required correctly.
Deleteunfortunately the notifications are not working for me........
ReplyDelete