Add Facebook Comments System In Blogger
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.
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 siteIf you like our tutorial then please share with your friends and give me your feedback via comments