1. Creating Application on Facebook: Initially you need to do is to create an App ID on Facebook and that can be done easily by Facebook Developer.
- Login to your Facebook account
- And go toFacebook Developers website
- Click on Create New App Button
- A Small pop out will appear which would ask you to insert little information about your application.
- Write the App name and press the continue button.
- Now you in next page it would provide you your application details like App ID, App name and etc.
- You need to copy these keys and enter them later.
2: Installing Facebook Comments in Blogger:
This part contains adding code to blogger.- Login into your Blogger account.
- From dashboard go to Template >> Edit HTML and search for the following HTML. Make sure to backup your template first.This code is usually present at the first lines of your template’s code.
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
- Now just next to the highlighted code (as shown above) add xmlns:og='http://ogp.me/ns#'.
it would somewhat look like this.
<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
- Now search for the <body> Tag.
- Just below it paste the following code. Make sure to replace the YOUR_APP_ID with your Facebook application id.
<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>
- Now search for </head> and just above it paste the following code. Make sure to replace the YOUR_APP_ID with your Facebook application id.
<meta property="fb:app_id" content="YOUR_APP_ID" />
3: Adding Facebook Comments in Blogger:
- Last step is to implement Facebook Comments using the HTML Code.
- In the template, search for <b:includable id='comment-form' var='post'> and just below it paste the following HTML Coding.
Incase, you are unable to find <b:includable id='comment-form' var='post'> then you can paste it just below <div class='post-footer-line post-footer-line-1'></div>
- Make sure you repeat the process because there are more than 1 tags on you them.
<b:ifIf its not working disable the google plus comments just follow below steps
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>
.JPG)
.JPG)
That’s it You have successfully added Facebook Comments in blogger blog. You can also preview your posts to see everything is working in an order or not. Please share your views if you are using Facebook comments in your blog in the comments below and if you face any problem while implementing above code you can ask for the help in the comments below.
.gif)
.gif)
.jpg)
No comments:
Post a Comment