header ads

Add Facebook Comment Box To Blogger

Unknown 9:49 AM
Facebook developers always try to make user experience more better with its features and Facebook itself. So that's why Facebook developer also introduce Badge and social plugins which includes number of helpful things for rest of web. For the list of number of best plugins Facebook comment is one of them. Facebook Comment box helps your blog visitor to comment on your blog via Facebook account. Facebook comments also helps to increase your site traffic because if someone use its account to make comment then your commented post automatically comes in their news feed. Which increase chances for getting more visitors. As i already discuss about the advantages of adding Facebook Like Box and also using Facebook Like button in between articles. Facebook Comments box also help you to make your blog for user friendly if you have great visitors from Facebook. So if you want to add Facebook comment into your bloggers blog then follow below given simple steps carefully.

Steps To Add Facebook Comment Box


1. Create Facebook Application

    • First of all you need to create an app on Facebook. To create new app Visit here

    facebook comment app
    • Just create app with valid App name, their is no need to add or change any another option and if you want then add.
    • After Creating new App change sandbox mode settings to OFF
    • Click on Save Button and Note down your App Id.
      facebook comment app

      2. Settings of Facebook Comment Box For Blogger

          • Open Your Blogger Template section of Blog >> Then Edit HTML
          • Now Search for <html and Replace it with below code
          <html xmlns:fb='http://www.facebook.com/2008/fbml'

            • Now search for </body> and paste below code just before it.

            <div id='fb-root'/>
            <script>  
            window.fbAsyncInit = function() {    FB.init({      appId  : &#39;Your-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 Your-App-Id  with your app id.
              • Now Search </head> and paste below code just above it.

              <meta expr:content='data:blog.pageTitle' property='og:title'/>
              <meta expr:content='data:blog.url' property='og:url'/>
              <meta content='Safe Tricks' property='og:site_name'/>
              <meta content='Blog-Logo-Image' property='og:image'/>
              <meta content='Your-App-Id' property='fb:app_id'/>
              <meta content='http://www.facebook.com/SafeTricks' property='fb:admins'/>
              <meta content='article' property='og:type'/>

              Replace:-

              Safe Tricks:-                With Blog Title Name
              Blog-Logo-Image:-        With Logo Image
              Your-App-Id:-               With Facebook App id
              SafeTricks:-                 With Facebook Page Username

              This above method will give better appearance to blog in Facebook News Feed when someone comment on your blog.

              3. Setting For Comment Box Placement.

                  • Now Search For this code <b:includable id='comment-form' var='post'> or code look like same.
                  • Paste Below code Just after above searched code.

                  <b:if cond='data:blog.pageType == &quot;item&quot;'>
                  <div style='padding:0px 0px 0px 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='530'/></div>
                  </div>
                  </b:if>

                    • In case if are not able to find above searched code or in case if comment box not appear then instead this code <b:includable id='comment-form' var='post'>
                    • Search for this code and paste above given coding just below it.
                       <div class='post-footer'> 
                      • This code may comes 2 times always choose code which comes second.
                      • Now to change width of comment box change values of  width='530' and width:520px
                      • Now Save Your Template Settings. Now Refresh your any blog post and see live Facebook comment box.

                      4. Steps To Hide Blogger Comment Box

                      • If You want to hide your blogger comment box 
                      • Then go Settings tab of blog >> Then  Post and Comments 
                      • Now Change Comment Location to Hide and then save settings.
                      I try to explain the whole process into 4 sub parts in which i explore about comment app creation, then design placement, then comment box placement and Blogger comment box hiding. I hope you will follow all steps as i mention carefully without any mistake.
                      In case if you face any issue while implementation feel free to share your comment.
                      Tags:

                      Post a Comment

                      0 Comments