Info, Tutorials, Downloads, Audio Books, Videos, Ebooks and More

Tuesday, May 9, 2017

How to Add Facebook Comment Box on Blogger?

Facebook Comment box helps visitors to comment on your blog via their Facebook account. Every person have Facebook account and they feel easy to comment using it. Facebook comments helps to increase site traffic.

Follow the instructions below to add Facebook Comment Box on Blogger Blog.

How to add Facebook Comment Box on Blogger?


STEP 1 : Create App with Facebook Account for Facebook Comment Box.


We have to create app on Facebook. It is Simple and easy. Follow this post.

to go on Facebook Developers.

Click on Add a New App.
How to Add Facebook Comment Box on Blogger?


Fill Form with Display Name and Contact Email and Click on Create App ID.
How to Add Facebook Comment Box on Blogger?


Change app review status to Yes with Provide category.
How to Add Facebook Comment Box on Blogger?

How to Add Facebook Comment Box on Blogger?



Your Facebook App is ready. Note your App ID to use.
How to Add Facebook Comment Box on Blogger?


STEP 2 :  Add Facebook Comment Box on Blogger.


Login to your blogger account and open that blog where you want to  Add Facebook Comment Box.

Go to Themes > Edit HTML
How to Add Facebook Comment Box on Blogger?


CTRL+F to find  <html and Paste code below just after <html
How to Add Facebook Comment Box on Blogger?

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

Now Search <head> and paste below meta tags just below <head>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='SangitabBlog' property='og:site_name'/>
<meta content='Facebook App Id' property='fb:app_id'/>
<meta content='http://www.facebook.com/SangitabBlog' property='fb:admins'/>
<meta content='article' property='og:type'/>


Customize :
Replace
SangitabBlog with your Blog Name
Facebook App Id with your Facebook App Id
http://www.facebook.com/SangitabBlog with your Facebook Fan Page.

If you have not fan page you can give your own profile link there.

Again Search for <body and paste given code just below it as shown on Image.
How to Add Facebook Comment Box on Blogger?

<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;FB APP ID&#39;,
      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(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).appendChild(e);
    }());
</script>
Replace FB APP ID with your Facebook App ID.

Now you have to determine where you want to place your Facebook comment box. Here is common place to add facebook comment box.

Find
<b:include data='post' name='post'/>

Paste code below just after above code.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='100%'/></div>
</b:if>

To Add Facebook Like and Share Button Add following code.
<div  class="fb-like"
  data-share="true"
  data-width="450"
  data-show-faces="true">
</div>


Recommended Articles :


No comments:

Post a Comment

Dear Readers,

Great !! You've decided to leave comment for us. Let's make meaningful conversation by adding your name.

Please note that,

Comments deemed to be spam or questionable spam, including profanity and containing language or concepts that could be deemed offensive will be deleted.
Including a link to relevant content is permitted, but comments should be relevant to the post topic.