» » » » Facebook Comment Box For Blogger

0 , , 04:54

In 2009 Facebook developers introduced their best social plugin called "Facebook Comments Box". This plugin can be embedded in any website or blog and visitors can use their IDs of Facebook, Yahoo, AOL or Hotmail to leave a comment at your site.Facebook Comments can bring better interactivity into your Blog. These comments will work like a Facebook Wall.This tutorial will help you to easily setup Facebook Commenting on your Blogger Blog.
You can add comment box in 4 easy steps -

  1. Hiding Existing Comments
  2. Creating Facebook App
  3. Add Application and Moderator Meta Tags
  4. Adding Comment Box To Blogger


Features:

  1. Threaded Comments i.e Reply Button To Comments.
  2. Comment Permalinks.
  3. Likability.
  4. Can Subscribe or unsubscribe to comments.
  5. Can Moderate Comments at one place.

Drawbacks:

  1. Won�t Sync with your Existing Blogger Comments.

Adding Facebook Comments To Blogger


1. Hiding Existing Comments

  • Before adding facebook comment box to blogger you have to disable your current blogger comments.
  • To disable comment form Go to Settings > Posts and Comments and set the Show Comments option to Hide and Save the Settings.


    2. Creating Facebook App

    • Enter Some name for your App.
    • Agree to the Terms and click on the continue button.
    • If it issues a Captcha verification, type the Captcha and click on the Submit Button
    • Now you will be taken to a Settings Screen.


    • In the App Domain Field give blogspot.com (If you are using a custom domain give that) Give your Blog Address in the Site URL field under �Website� and Save The Changes. Copy the Application ID from the screen.

    3. Add Application and Moderator Meta Tags

    • Now go to Blogger Dashboard � Design � Edit HTML.
    • Tick the Expand Widget Templates Box.
    • Find <head> tag.
    • Add below code just after <head> tag.

    Modify the below code with the application id copied in setting page.

    <meta content='YOUR_FACEBOOK_APPLICATION_ID'   property='fb:app_id'/>

    Save your template.

    You should create the Facebook Application and the above fb:app_id meta tag should be added to your Blog. Otherwise you won�t be able to manage/moderate your Comments from a single Place(you will have to go to posts one my one and moderate and that too is possible only if you have added the fb:admins open graph meta tag).

    4. Adding Comment Box To Blogger

    Now you have to add the Facebook Comment Form to your Blog Template. To do that Go to Edit Template > Design > Edit HTML and click on the �Expand Widget Templates� checkbox

    Find the following code in your template(Use the keyboard shortcut Ctrl + F), and immediately below that paste the following code:

    <p class='post-footer-line post-footer-line-3'>


    If you can't find this try this one.

    <div class='post-footer-line post-footer-line-3'>


    If you cant find that as well, then find

    <data:post.body/>


    Paste the following code just below the line that you just found out

    <b:if cond='data:blog.pageType == "item"'>
<div id="fb-root"></div>
<script>(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/>
</b:if>



    • If you want to change the width of comment box then find this line width='450' in line number 9
    • If you want dark version of facebook comment box then find this colorscheme='light' and change light to dark in line number line.

    5. FB Namespace Declaration

    Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following XML namespace declaration will take care of that. To declare the namespace, find

    <html


    and change it to

    <html xmlns:fb="https://www.facebook.com/2008/fbml"


    Save the Template. This namespace declaration is necessary for all FBML widgets using the fb tag. So if you have already added the namespace declaration while adding some other FB plugin, then you can skip this.

    You are done.....
    Check your blog you should see the comment box on your blog.

    Displaying Facebook Comment Count (Optional)

    Use the following code in the post loop to get a Comment Count Display with a link to the comment form. This code should be added within the post loop. For example, this can be added below <data:post.body/>

    <b:if cond='data:post.isFirstPost'>   
<script>(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<a expr:href='data:post.url + "#fb-root"'><fb:comments-count expr:href='data:post.canonicalUrl'></fb:comments-count> comments</a>


    If you are getting problem then post it below through comments.I'll glad to help you.
    Preference - Bloggerplugins.
    Posted by

    Share to:

    Post a Comment

    Subscribe to: Post Comments (Atom)
     
    Top