Add Facbook Comment Box to your Blogger Blog

Removed Ads

Facebook is the Most visited site and even defeat google for popularity, having a facebook comment box

not only brings good navigation but a good TRAFFIC!

This tutorial will take you through the steps of adding a facebook comment box to your Blogger blog.

The Facebook comments will take the place of Blogger comments.

This tutorial is intermediate to difficult. Please save your template before making any edits.

STEP A
Create an app on Facebook – http://developers.facebook.com/apps/

*Note: You may be asked to verfiy additional security at this point. Follow the prompts through the security process if asked.

A3. Once through the security screen you’ll be given an App ID – copy and paste into notepad (you’ll soon need this number).

A4. Type your domain into “App Domain”. This will be blogspot.com if your blog url has blogspot.com at the end. If you’ve
purchased a custom domain type your domain in the space.

A5. Under the title “Select how your app integrates with Facebook” click “Website” to open the form. Type your full url into this box.

A6. Click “Save Changes”.

*Note: To moderate comment box goto https://developers.facebook.com/tools/comments.

STEP B

Edit Blogger Template

B1. Goto your Blogger dashboard (the old interface) click design > edit html

B2. Place the following code after the <head> tag in your template replacing YOUR_APPLICATION_ID with your App ID.

B3. Find <html and change to this code <html xmlns:fb="https://www.facebook.com/2008/fbml"

B4. Tick the box to Expand Widget Templates.

B5. Find the code <div class='post-footer-line post-footer-line-2'>

and paste the following code after.

<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'/> comments</a>

B6. Find the code <div class='post-footer-line post-footer-line-3'>

and paste this code after

<b:if cond='data:blog.pageType == "item"'> <div id='fb-root'/> <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> <div style='margin: 20px 0 0 0;'><fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='900'/></div> </b:if>

*Note: You can change the width=’900′ to your size preference.

B7. Save Template.

B8. Goto the Blogger Settings tab > Comments then tick the “Hide Comments” & Save.

Removed Ads

Removed Ads