.
Back to Top

1 Create Facebook Comment Box on Your Sites Easily

Facebook recently launched an app for their custom message box to embed in our sites. Facebook have already created a massive impact on the online social networking platform. Most of the time people don't participate into messages because they do not have time to log in on your site again and again. 

Use of Facebook login could be a wise decision because looking at their current expansion rate, you can instantly get a comment on your posts using visitor's pre-logged status. 


This article will guide to create a Facebook Message box right below your posts using 'Facebook Developer App'


Things needed: Facebook Account with Mobile registered, Blogger Blog

Log In to Facebook Account

Step 1, Creating App for Facebook Message Window


Click “Create New App” at top right



Fill the information with your App Name, App Namespace- you wish to give - it must be valid and unused and Select App category as per your interest.



After confirming, a system will ask you for Captcha, Confirm it.

Facebook may ask you for your mobile no. confirmation as a part of security option which is necessary while working on Facebook’s administrative tasks. Enter you mobile number and use the code received in your mobile message to confirm your account if not done earlier.

In App Basic Window, fill the details of your websites



Note your App ID, as it will be required to enter in your blog's Template's code window.

Fill the App Domains such as blogspot.com, wordpress.com etc as per your blog

Keep the Sandbox Mode Off to ensure App is workable to public. Sandbox allows only developers and admin to access the app.

You can also fill your website address in other sections such as in Mobile Web option, it is self-explanatory.

Make sure to save changes to App section by clicking "Save Changes"

You will see confirmation page showing your App is live.

Step 2, Embedding Facebook App in Blog

Replace App ID in below code line to your created App ID.
<meta content="FACEBOOK-APP-ID" property="fb:app_id" />

It should look like
<meta content="462523130528239" property="fb:app_id" /> (In my case) Copy this code line

Go to your Blogger’s Dashboard > Template > Edit HTML

Ensure you take a full backup of your template at this stage If you do a mistake or something happen while pasting, your blog will show something fuzzy.

In code window use Ctrl + F and search for <head>

Paste above code lines just below it. It will look like
<head>
<meta content="462523130528239" property="fb:app_id" />



Now search for
<div class='post-footer-line post-footer-line-3'> code line by copying some part of it and again Ctrl + F in code window



Note: Make sure to search in the code window and not in browser's search bar at top or bottom. This is a common mistake many of us do.

If above code does not appear (depending upon your template) search for
<data:post.body/>

Paste following code lines exactly below the code you searched

<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>

Message Window Modification: Facebook App allows changing width and color scheme of the box in above codes.
You can change width and color scheme from light to dark (only two options are allowed at current)

At the top lines of template codes, you will easily see “<html”



Insert below codes in front of this
xmlns:fb="https://www.facebook.com/2008/fbml"

Make sure to look like

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

Save Template. Your website is ready for Facebook Comments.

App Modifications for Comments

Here you will see settings for your App Comments, Modify as per your requirements.



Enjoy your new Facebook message bar, wait for comments to appear!
If you have any question, please ask below in comments.
Related Posts Plugin for WordPress, Blogger...

Zergnet