How to Install Facebook New Comments in Google Blogger Blogspot Blogs

In this post I am going to discuss how to install Facebook new comments plug-in in Blogger.

Step 1:

Login to facebook and register your domain by creating a new facebook application via anyone of the below links –

http://developers.facebook.com/setup/ (I will recommend this as this is easy)

http://www.facebook.com/developers/createapp.php

Step 2: Once the app is created, you will get App ID and App Secret for your domain. You can also get you App Id and App Secret from URL http://www.facebook.com/developers/ if you need it later.

image

Step 3: Add Facebook xmlns:fb code in Blogger:

  • Click on the Design tab
  • Click on Edit HTML
  • Click the check box for Expand Widget Templates
  • On your keyboard, hold the Ctrl+F and type "<head>" and hit Enter
  • Above <Head>, enter the following code:

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

    image

    Step 4: Add Facebook Meta tags in Blogger:

    • Add below meta tags after <head>

    <meta content=’Replace with Your Facebook Profile IDproperty=’fb:admins’/>
    <meta content=’Replace with Your Facebook Application ID‘ property=’fb:app_id’/>

    Step 5: Add Facebook OpenGraph Protocols:

    • Add below meta tags before </head>

    <!– Start facebook code –>
    <b:if cond=’data:blog.pageType == &quot;item&quot;’>
    <meta expr:content=’data:blog.pageTitle’ property=’og:title’/>
    <meta expr:content=’data:blog.url’ property=’og:url’/>
    <b:else/>
    <meta expr:content=’data:blog.title’ property=’og:title’/>
    <meta expr:content=’data:blog.homepageUrl’ property=’og:url’/>
    </b:if>
    <meta content=’Software Testing Times’ property=’og:site_name’/>
    <meta content=’Replace this text with your blog image URL‘ property=’og:image’/>
    <meta content=’article’ property=’og:type’/>
    <!– facebook code ends –>

     

    Step 6: Add Facebook SDK code:

    Add below meta tags after <body> tag

    <!– Facebook SDK script Code –>
    <div id=’fb-root’/>
    <script>
    window.fbAsyncInit = function() {
    FB.init({
    appId  : ‘YOUR APPID’,
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true  // parse XFBML
    });
    FB.Event.subscribe(‘comments.create’, function(response) {

    });
    FB.Event.subscribe(‘edge.create’, function(response) {

    });
    };

    (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>
    <!– End SDK script Code –>

  • Step 7: Add Comment box code in Blogger:

  • Search for below code in blogger:

    <div style=’clear: both;’/> <!– clear for photos floats –>
    </div>

    </b:if>

    Add the below facebook comment code after the above code.

    <b:if cond=’data:blog.pageType == &quot;item&quot;’>

    <fb:comments expr:href=’data:post.url’ num_posts=’5′ width=’550’/>

    </b:if>

    Adding the code in Step 7 depends upon your blog template and setup. In some cases, you need to You might need to search for below code:

    <data:post.body/>

    and add comment code after <data:post.body/>

    Also Read: Improvements and new features in Facebook comments plug-in

     

  • Tags: , ,
    Posted under: Blogger, Facebook, Social Networks

    3 Responses to “How to Install Facebook New Comments in Google Blogger Blogspot Blogs”

    1. Lorraine says:

      Hi! I followed all the instructions I do well until, it comes to the tag I can’t find it, I followed different people website in how to install comment box in blogger but I’m already overwhelmed can you help me, I will appreciate it.

      Sincerely,

      Lorraine

    2. Lorraine says:

      I meant the body tag I cant find that one.

    3. Maisie says:

      I visited several sites but the audio feature for audio
      songs existing at this web page is actually fabulous.


    Leave a Reply