Categories

Social Media Exchange Website - Likenation

Thursday, October 24, 2013

Facebook Comments System for Blogger

Blogger also providing their comment system and in some templates have threaded comments system in blogger. But now a days social media is increasing and most of traffic also come from social media therefore adding Facebook comment system is a good idea for get feedback from social media king site Facebook. In today’s tutorial we will discuss on Facebook comment system and learn how to add this system in Blogger blog / site. So, Lets start our today’s tutorial.


Source


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

Source

  • 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

Source


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#
xmlns:og='http://ogp.me/ns#

  • Now search for 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

xmlns:og='http://ogp.me/ns#

0 comments:

Post a Comment

Please leave a comment as your signature for a visit... Thank you!!!