Sports,Education,Entertainments,Technology and many more

Tuesday, November 26, 2013

How to Put Facebook Comment Box in Blogger Template?


Here I am Going to Describe the Tutorial about how to Put Facebook Comment Box in Blogger Template.This time Facebook is the most popular Social Media in the world. Maximum of people uses Facebook almost every time.During Surfing on Internet, many of people wants to Comment on Blogs/websites and if there is a option to comment by using Facebook that will be reliable for visitors. so Facebook Comment Box is almost important for Blogs and Websites.

I want to Put Facebook Comment Box in my Blogspot or Blogger , but how???

Today I am going to Give some tips to those who wants to keep Facebook comment Box in the Blogger. It will be Far better if you have Facebook Comment Box in your Blogger. It is very easy to Put Facebook Comment Box in your Blogger Templates but you need to give little time for it and you must put the Codes Carefully.

To Put Facebook Comment Box in Blogger, First of all ,you need to Make Facebook Application and you have to install Facebook Comment in your Blogger then you have to Put Facebook Comment Box in your Blogger.Here is the  Easy step by step Tips to add Facebook Comment box in your Blogger.

First Of All you need to make Facebook Application

For this
1.Go to Facebook developer page and click on “Create New App” button at the top right.

2. Now enter the Application name ( title of the app ) and its  Namespace (Link for your app). Click on continue button and fill out the captcha and proceed.




3. Now you’re half done. On the next page, type your base domain . Enter custom domain ( If you’re using a custom domain) or just blogspot.com( if you’re using .blogspot sub domain) in the space provided to the app domain under Basic info.

Click on “Website with Facebook Login” tab and type your blog address ( http://www.jptpost.com/ or http://jptposts.blogspot.com/ ). Make sure you have typed your blog’s URL starting with http:// and ending with / as shown in below screenshot.




4. Now scroll down the page and click on save settings button. You’re done with creating the application. On the same page you can see your Facebook application ID and its Secret id. Copy them and save to notepad on your computer.


Add Facebook Comment Box on Blogger Templates

Step 1 : Sign in to Your Blogger account and Go to Template and EDIT HTML

Step 2 : Now Find the Code  <html  using Shortcut Key Ctrl + F  in your Blogger Template.Then put the Following Code just after the <html Code : 

xmlns:fb='http://www.facebook.com/2008/fbml'

Be sure you have added a space before and after the above Code.

Step 3 : Use the Shortcut Key Ctrl + F and Find the </head> code in your blogger template.

Step 4: Then Copy and Paste the Following Code just before the </head> Code in your Blogger Template.

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='JPT POST' property='og:site_name'/>
<meta content='Image-Link-Of-Blog-Logo' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/uniquepost1' property='fb:admins'/>
<meta content='article' property='og:type'/>

Customization

Replace your blog title or name instead of JPT POST
Add your blog's logo link with Image-Link-Of-Blog-Logo.This logo will appear next to your post titles on Facebook profiles of visitors.

Replace YOUR_APP_ID with the App id that i asked you to save.
http://www.facebook.com/uniquepost1  is the link of  Facebook fan page.Just replace with your profile page or like page URL.

Step 5 :  Find the Code <body> using shortcut key Ctrl + F in your Blogger Template 
If you can’t find this code, it should be a similar code like below one. 

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

After one of above codes in your template,paste below code.

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY APPLICATION ID HERE',
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>

Make sure that you have changed the MY APPLICATION ID HERE with your Application ID.

Step 5 :
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>

<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>

Note: You can also customize the widget of the comment box by adjusting 550 the numbers in the above code.

Congratulations: Finally you have successfully learned how to add Facebook Comments  in blogger blog. You can also preview your posts to see Facebook Comment Box is Working or not.

I hope this tutorial has helped you in adding Facebook comments in blogger. Are you using Facebook comments in your blog? If yes, then please take few minutes to tell us about your experience in the comments below.

Share:

0 comments:

Post a Comment

Connect with us in Facebook

Popular Posts