Blogger also providing their comment system and in some templates have threaded comments system in blogger.But now a days social media is increasing and most of traffic also come from social
media therefore adding Facebook comment system is a good idea for get feedback from social media king site Facebook.In today’s tutorial we will discuss on Facebook comment system and learn how to add this system in Blogger blog / site. So, Lets start our today’s tutorial.
How To Get Facebook App ID?
This tutorial divided in some steps you need just follow these steps giving below.- First Go to Facebook Developers Page
- Give you app name as your site title name etc and click on continue button as showing below
- Now fill security check captcha and then continue
- Now you go on a new page here you can see your app id and we need it in next steps
How To Add Facebook Comments In Blogger?
- First go to Blogger > Template > Edit HTML
- Now search for <html and just after it give a space and paste the below code
xmlns:og='http://ogp.me/ns#
- Now search for <body> tag and just below it paste the following code
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_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 YOUR_APP_ID with your Facebook Application ID
- Now search for </head> and just above it paste the below code
<meta property="fb:app_id" content="YOUR_APP_ID" />
- Replace YOUR_APP_ID with your Facebook Application ID
- Now search for <b:includable id='comment-form' var='post'> just after it paste the below code
<b:if
cond='data:blog.pageType == "item"'>
<div
style='padding:20px 0px 5px 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='550'
/>
</div>
</div>
</b:if>
- Now click on Save Template button and you are done !
- Now you have successfully added Facebook Comments System in Blogger for result check preview of your site
@Ehtisham
ReplyDeleteThanks dear
Thanx for the walkthrough. However hiding regular comments also hides the faceook comments as well. I just want facebook. Any solution to this?
ReplyDeletePS : I just noticed when I made a post, I have to refresh to see the comment. Any autorefresh option available like in facebook?
@ Bluent
DeleteYour Most Welcome Dear for appreciating our work well now here is no autorefresh system when introduce i will tell you
Hello Dear Admin Thank You Very Much For Sharing A Nice Post About The Topic Use Facebook Yahoo And Google+ Comment ssystem Together
DeleteI can't save it.
ReplyDeleteIt says ---Error parsing XML, line 3, column 46: Element type "html" must be followed by either attribute specifications, ">" or "/>".
Help Please
Hi, I got the same message. You'll have to close the line
Delete"xmlns:og='http://ogp.me/ns#"
With another '
Or else it'll be left oper
@khai and @ Punk
Deleteyou have to close all tags so the message will not show up
I did that, and now get this message:
DeleteThe widget with id "Blog1" cannot contain element: "b:if". A widget can only contain b:includable elements.
Nice comments..very informative i can't resist not to comments.. thumbs up!
ReplyDeletehello austan, unfortanately it's not working to my blogger blog, i follow all the steps..facebook comment box didn't appear.. :( can you help me with this please? :D
ReplyDelete@innoval
Deletedear try all steps carefully we also use these steps on an other blog and its working fine
Hello. When I enter in my coding I get the following error "The reference to entity "appId" must end with the ';' delimiter."
ReplyDeletehow do I fix this
@angela
Deletetry steps one by one carefully
Nice write up i will use it on my blog jayboss.blogspot.com
ReplyDeleteWorking excellent even without registering Application on facebook
ReplyDeletehttp://www.humorstash.com/
I'll try, thanks
ReplyDeletehttp://www.beste-koch-rezepte.com/
What a lovely tutorial, but there are things to be correct here. I got it but and its working fine on my blog http://www.ichangemynation.com/2013/10/about-i-change-my-nation.html
ReplyDeleteHere is the correction because I wasted so much time to get it done.
Copy this below code to the line 3 and replace it with original one so as to saves yourself some time
after that, all the code are straight forward
Check my site http://www.ichangemynation.com/2013/10/about-i-change-my-nation.html if you know about good and bad activities of Nigeria in your environment, you can easily pass the information here
After trying this from instructions on various other blogs, this is the one that was clear enough for a layperson like me to follow. It finally works, yaaay, on my blog http://bookloversmelbourne.blogspot.com.au
ReplyDeleteSupperb Trics I like this thank you but after installing this facebook comment box ..
ReplyDeletewhen I open My blog post there is a shown a massage box
"The `href` parameter must reference a valid Facebook page, but "" is not a valid Facebook page."
How to fix it???
this site
http://gulmibreaking.blogspot.com
Thanks! This was the first of these that I got to work :)
ReplyDeleteThanks, this works with our blog.
ReplyDeleteAwesome share. Keep us updated.
Visit our blog also:
http://www.cyberpunkgx.ml/
Very nice tutorial.
ReplyDeleteCopy this below code to the line 3 and replace it with original one so as to saves yourself some timefacebook
ReplyDeletenice post
ReplyDeletehttp://itpcworld.com