Blogger
Blogger gadgets
Facebook
How to
widgets
Add Facebook Comments System In Blogger
Add Facebook Comments System In Blogger
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
If you like our tutorial then please share with your friends and give me your feedback via comments Take Care ! - See more at: http://www.googleagra.com
0 comments:
Post a Comment