How to Insert Facebook Comments Box Plugin in Your Blog or Website in 5 minutes.

I was once like you – I needed tutorials on how to insert Facebook Comments Box plugin into one of my sites, a blogger blog – www.writeshub.com. If you use custom blog design as I do, you would realize that by default the comments box disappears. And it is not good industry practice to lack comments box on your site because of very obvious reasons. 

So to solve the above challenge, I went online and read a lot of articles; three of which were from what I consider authority sites in blogging and webmantics. Anyway, what I got was ok, but very detailed and comprehensive – yet, that is not what I really needed at the time. All I needed was how to only insert Facebook Comments Box Plugin in my blog. I got the skills though which later helped me to implement Facebook Comments Box Plugin on my blog which ease. But I had to pull off the long details, go back to the drawing board and finally, got what I needed – implementing of a Facebook Comments Box Plugin in my blog the faster and easier way.

In this tutorial, I’ll be showing you how to easily and rapidly insert Facebook Comments Box Plugin on your blog or website. I use blogger blog, so I’ll be making reference to that. If yours is wordpress or custom coded website, you can do the same thing by just following my lead.

Before you continue;

This tutorial is only for people who do not wish to waste too much time with developing Facebook App – which many sites will tell you to do first of all. Personally, I don’t think it’s worth the trouble developing an app (which essence is to help you moderate comments made by the Facebook Comments Box plugin) prior to simply inserting a simple Facebook Comments Box Plugin into your site. That’s a waste of time when you do not care about moderating contents of the comments coming in. all you need is to insert Facebook Comments Box Plugin into your blog now and get going like a pro – the easy way. So having said that, let’s get down to details.

Steps to implementing Facebook Comments Box Plugin in your blogger blog within 5 minutes

ON FACEBOOK

• Login to your Facebook account or the Facebook account you wish to use.
• Open another tab on your browser and load the Facebook developers resources for Facebook Comments Box directly: https://developers.facebook.com/docs/plugins/comments



GETTING THE CODES FROM FACEBOOK DEVELOPER  

• The page that loads is where you will simply set two things to get your Facebook Comments Box code to be implemented on your site: Site URL and width

• As you see below, simply supply the website address you want to use and (to be on the safer side) set your width to 100% (remove the default one there)
• Click on “generate code”

ON YOUR BLOGGER BLOG

Before you implement the above sets of codes on your blog as instructed by Facebook, you need to work on the first code; else you will see error – as I saw and became a bit worried. Thanks to infomatricks!

So to guard against that, the code you get from Facebook should look 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/sdk.js#xfbml=1&version=v2.3";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

All you have to do to fix the impending error is to insert “&amp;” between “1” and “&”. That takes effect on line 6. So in essence, the line 6 will now look 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/sdk.js#xfbml=1&amp;&version=v2.3";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

 So that’s the code you’ll be using. That fixes the parse error which would have shown on your blog like this:

//bla bla bla . ..The reference to entity "version" must end with the ';' delimiter.

Don’t touch the second block of codes. It’s ok the way it is.

So having done that, enter your blogger template, edit template. Remember to always back up your templates every time you are about making changes on your template codes. It is very important.

With that done, Go to your blogs opening body tag, <body. You can simply search for it by clicking anywhere in the codes and pressing CTRL + F. then search (in the search box that shows up on the blog) for <body

Underneath the <body place your first set of codes you edited. I like commenting within my codes to help me in future as you can see in the snapshot below.

This is the first set of codes I mean:

<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/sdk.js#xfbml=1&amp;&version=v2.3";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

Now, depending on where you wish to show the Facebook Comments Box plugin, you may place the second set of codes from Facebook on either the first, second or possibly third <data:post.body/>

IMPLEMENTING THE FIRST CODE FOR MOBILE VIEW 

To get to the <data:post.body/> simply do as before by pressing CTRL + F

The first <data:post.body/> is for mobile view. Any other <data:post.body/> after the first is for PC view. So if you wish to insert your Facebook Comments Box plugin in any of the views, simply place the second set of codes below any of the <data:post.body/> and save.

For example, to show the Facebook Comments Box plugin in mobile view alone, simply place the second set of codes you got from Facebook under the first <data:post.body/> alone. It will show on mobile, but not on PC.

IMPLEMENTING THE FIRST CODE FOR PC VIEW 

To show the Facebook Comments Box plugin in PC view alone, simply place the second set of codes you got from Facebook under the second or third <data:post.body/> alone. It will show on mobile, but not on mobile devices.

To show the Facebook Comments Box plugin in both PC view and mobile view, simply place the second set of codes you got from Facebook under both the first, and then second or third <data:post.body/> . It will show on both mobile and PC.

Then save. That’s all!

In conclusion therefore, inserting a Facebook Comments Box implies inserting a  Facebook Comments Box plugin in your site. The first set of codes is a directive which links your site to your Facebook account. The second set of codes determines where your Facebook Comments Box will display on your blog. If you insert it anyhow, then your Facebook Comments Box will show, maybe in the middle of your post. So you have to be careful where you place it.

<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/sdk.js#xfbml=1&version=v2.3";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

The first set of codes must be padded before they can work on blogger blog et. al. Whether it’s a mistake from Facebook or that of the blogger template, all I know is that if you do not pad it as shown above, it will not work for you.

If you look at all the above critically, you will agree with me that it can be done within less than 5 minutes. Give me the job; I’ll finish it in 2 minutes. Thank God, now you know.

Facebook comments box implemented on my blog www.writeshub.com

Having issues or it worked for you? Lemme hear from you in the comments box below. I also blog at www.writeshub.com – where I implemented what I’m discussing with you on April 9^th, 2016.