How To Add Facebook Comments To Your Blog

How To Add Facebook Comments To Your Blog: You might have noticed that bloggers, e-commerce websites and other online applications are taking facebook integration seriously.

Facebook likes and Facebook comments are popular among them. But what you haven’t noticed that it is not that complex thing to add up in your blog by yourself. By reading this post step by step will surly get your blog interact with facebook comments, So let’s begin it would take just 5 steps. 

.

1-Become a Facebook Verified Developer

To become a Facebook Verified Developer is much easier task, Never let this fancy terminology demoralize you. Let’s start with step-by-step:

.

.

• Goto Facebook Developer 
• Now click on “Apps” in the top right
• After registering as a developer, now Click on “Create new App”

That’s Cool you have become a Facebook Verified Developer, now you can move on to other important things.

.

2. Create a Facebook App

Since you have become a verified Facebook developer, so you can now create a new Facebook App. The new Tab you’ll see is a little popup for creating new app.

App Name is basically the name that will be displayed for others.

App Namespace is simply used for Canvas Pages and Open Graphs.

Do not fear this step, we are not building an actual application so it doesn’t require to display anything to others. just write simple names available so in future it can be quickly identified. example: “my blog comments”.

Your App ID:

This is the most important thing you need. It has all the required information that we are upto. Save these App ID and App Secret because we will surely be needing it.

Configure your App

It is just the basic info needed for your app development or you can say a bit configuration  for your app. App display name and App namespace were already filled. Just type your Email and website address in the App Domain without “http://”.

Select how your app integrates with Facebook
Scroll down a bit lower you will see this portion.  Select “Website” and your website’s URL  but this time with “http://” so it would be like “http://www.cheers4all.com”.

Nothing more to be touched as we have no concern with other terminals. Just save the changes and our configuration for Facebook app has been done.

.

3. Get Your Code

We are shifting on the other section of developers site.  Click here so you can get your comments code. If you have added facebook page widget or facebook like button then you might be familiar with this step, if haven’t then don’t worry its pretty much easy. 

First thing is configuration that how will the comment box look like on your website:

• Add your blog’s URL (http://www.cheers4all.com)
• Specify the number of posts or comments displayed on your post, e.g 10
• Select the width of box depending upon the  content area, e.g 550
• Finally select the “Color Scheme” Light or Dark. If your blog got dark background then go with darker one elsewise Light color is much preferred. 

The section at the bottom of the screen (see image below) will show the live preview of how this Box will look like once installed. Once you have set it Click on  “Get Code”.

This will give HTML5 JavaScript Code. 
.

From the first Box Copy the Code. No need to change anything since Facebook already integrated the App ID in the code. Your Code will be something like this: 

<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1&appId=[YOUR APP ID]“;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

 

.

4. Adding the Code to your Site

Now time to place this code in your PHP code in header.php, though it sounds difficult but  it is pretty easy. There are 2 ways of it,

1. Either you can do this via FTP client by connecting through server.
2. Or second option is from WordPress Dashboard.

I guess second option sounds digestible, right ? Every wordpress theme got this section. 

WordPress Dashboard > Left Menu > Appearance > Editor. 

Every theme file is present on the right side of screen,

1. Find   “Header (header.php)”
2. Click on it. This will display code in the header file. 
3. Now Paste your Code right after the <body> TAG as shown below.
4. Save it !!

.

5. Adding the Facebook Code to Your Comments

Now Let’s get back to Step 3, There was other code at the bottom of the main code which looked like this: 

<div data-href=”http://yourdomain.com” data-num-posts=”10″ data-width=”550″></div>

If you want to install the comments in every single post manually then this code does the job. This code is generated for specific domain and is ready for work.

a) So we replace the section containing your domain (http://cheers4all.com) for this <?php the_permalink() ?> and now your code will be like 

<div data-href=”<?php the_permalink() ?>” data-num-posts=”10″ data-width=”550″></div>

 

b) Now your facebook comments will be automatically regenerated after every single post you publish on your blog. 

c) Go back to wordpress dashboard and click Editor. Go for the file named “comments.php” from the menu on the right.

.

d) What really does matter is positioning of code, as i want them on the top of WordPress default comment system so that’s why i placed this code above image .

e) Don’t forget to save.

.

Results

It’s the moment of truth, Go back to your site and look for the comment box is it showing up in our posts. And this is what you should see:

Let’s Test It!

Let’s test this box to make sure everything is fine and working properly. 

a) Comment right there in your blog post and make sure that Post on facebook is marked Ticked. 

b) Now check whether the comment is being displayed on your Facebook Timeline.

c) We can see that headline, post image and meta description of posts are displayed on your timeline, Likewise to share !!!

.

Reply from the Timeline

Now what if someone comments on my facebook timeline instead of my website. So for that purpose I’m replying with my friend’s account. let’s check what happened. 

When we get back to our blog post we see that comment is there as well, it should be looking like this. 

.

Authentication

If user hasn’t logged into his/her Facebook account, then they will be asked for an option to sign in right from the website’s post. so to check that lets sign out and check it again, and look it worked perfectly. 

Congrats !!!!  Now you’re having Facebook Comments on your website posts.