Tuesday, July 29, 2014

How to Add Facebook Comments System in Blogger

 

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


  • 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: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>
Read:

That’s it You have successfully added Facebook Comments in blogger blog.

0 Comments:

Post a Comment