Search This Blog & Web

Monday, May 14, 2012

New Facebook Comments Box For Blogger In Very Easy And Simple Steps (Full Guide)


How to Get FaceBook Comments Box to Your Blogger Site. Its soo easy and Simple Steps.


1 Step : Just go this page Facebook Developers 

2 Step : Click Create new App

3 Step : enter your application name (you can type any name)

4 Step : Click website tab and Enter Your Site URL

Step 5 : and click save changes button

Step 6 : Copy your app ID and keep anyware (eg: notepad)


Step 7 : Then go your site and log in and go Template tab and Click EDIT HTML

Step 8 : Tick the Expand Widget Template

Step 9 : Then find the following code (get search box ctrl + f )
                                <html


Step 10 : and after it add following code
                             xmlns:fb='http://www.facebook.com/2008/fbml'

You must type a Space before it and after it, hear is an example
(<html  xmlns:fb='http://www.facebook.com/2008/fbml'  expr:dir='data:blog..............2005/gml/expr'  >)


Step 11 : click save template and check any error found or not. if not go step 12.

Step 12 :  Search for  <body> tag.

Step 13 : and after adding 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>




Step 14 : please dont forget to change YOUR APP ID to your app ID (you got in the previous step),

Step 15 : Copy the following code and edit


<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='MY-SITE-NAME' property='og:site_name'/>
<meta content='YOUR-APP-ID'   property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>



and change the colored text to the following,
Change MY-SITE-NAME with the one you want to appear when a user likes a page.
Change YOUR-APP-ID with your application ID number.
Change YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID.

After changing and Add befor the this code    </head>




Final step 


Please find the Following Code
<data:post.body/>

Paste the Following 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 width='450' expr:title='data:post.title' expr:href='data:post.url' colorscheme='dark' expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'>  <b><a href='http://www.dtlakmal.blogspot.com/' target='_blank' title='blogger tricks'>Facebook comments for blogger</a>  Brought To You By <a href='http://www.dtlakmal.blogspot.com/' target='_blank' title='blogger tricks'>dtlakmal.blogspot.com , Get Yours?</a></b></div>
</b:if>


you can change 450 to what ever you want. it's in pixel.

And now Click The Save Template Button and Enjoy..................



No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...
Web Analytics