facebook comment boxFacebook have successfully released many of the resources and plugins for bloggers. In the whole plugins of Facebook, LIKE and Share were the most inspired one. Now they have released Facebook comment form for bloggers on which I am going to give the tutorial today. Facebook comment form helps the bloggers in getting most comments and more social media exposure. This Facebook comment plugin looks simple, cool and it allows users to comment on your blog by logging into Facebook, Yahoo, AOL and Hotmail. This plugin by them is really an awesome resource for bloggers, so what are you waiting for???!!. lets move on with the tutorial.


How To Add Facebook Comments form to Blogger

Creating An App in Facebook

1. Go to Facebook developers page to create a new app.

2. Create an new app with your blog details as shown below.

create a new app in facebook


3. Note down your Facebook app id which will be shown like this.

find your facebook app id

  JavaScript SDK for Facebook comment box


4. Now go to your blogger dashboard --> template --> Edit Html (Tick expand widget template option).

5. search(Ctrl+F) for <html  and replace it with the following code.
<html xmlns:fb='http://www.facebook.com/2008/fbml'

6. Find For <body> tag and add the following code just after it.


<div id='fb-root'/>
<br />
<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>


Note:: Replace YOUR_APP_ID with your app id you just noted down.

  Facebook Open graph tags

7. Now search for </head> and add these open graph meta tags just above it.

<meta expr:content='data:blog.pageTitle' property='og:title'/><br />
<br />
<meta expr:content='data:blog.url' property='og:url'/><br />
<br />
<meta content='Helper Bloggers ' property='og:site_name'/><br />
<br />
<meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/><br />
<br />
<meta content='YOUR_APP_ID ' property='fb:app_id'/><br />
<br />
<meta content='http://www.facebook.com/bloggertricksdotbiz' property='fb:admins'/><br />
<br />
<meta content='article' property='og:type'/>


Note::
Replace Blogger Tricks with your blog name.
Replace YOUR_BLOG_LOGO_IMAGE_LINK with your blog logo image url.
Replace YOUR_APP_ID with your app id.
Replace http://www.facebook.com/bloggertricksdotbiz with your Facebook page url.

Facebook Comment box widget code

8. Now search for this code.

<b:includable id='comment-form' var='post'>

Add the following code just below it.

<b:includable id='comment-form' var='post'><br />
<br />
Add the following code just below it.<br />
<br />
<b:if cond='data:blog.pageType == "item"'> <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='500'/></div>
</div>
</b:if>
Note:: 
  • You can change the width of widget by replacing 500 with your desired width.
  • As you all know you can change the color scheme to light or dark.
9. Save your Template.
That's It pals. . .

7 comments:

  1. I do not like to complicate, best I leave the subject of management
    someone's social networks and ready.

    Facebook Pages Administration

    ReplyDelete
  2. Wow! Such an amazing and helpful post this is. I really really love it. It's so good and so awesome. I am just amazed. I hope that you continue to do your work like this in the future also. pname com facebook orca

    ReplyDelete
  3. Hoodia has no recognised facet outcomes; however, professionals say that eating an excessive amount of may want to significantly reduce meals intake, which in flip may lead to a reduced metabolism, and eventual weight gain ultra fast Keto boost .

    ReplyDelete
  4. Ultimately, a balanced or ideal nutrition application can never exit without the consumption of right quantity of precious fiber rich products like culmination and greens. To keep a fiber stage inside a body is critical sufficient to now not to be not noted Ultra Fast Keto Boost Scam .

    ReplyDelete

 
Top