How To Add Facebook Comments Manually To Your Website

We all know that Facebook is the undisputed King of Social Media with more than 1.2 billion users (the user-base in increasing regularly) using it daily. With this user-base, when Facebook announced that they are offering Facebook comments for Websites and blogs, webmasters and business owners were in complete joy because using it would let them to improve their website’s Facebook presence.

For example, when you have integrated Facebook comments in your website or blog and a user leaves a comment, the comment will not only get posted in your website but also in the user’s Facebook profile. So, if the user has a large number of friends, then they will eventually see the content along with your website link and if the content on your website is good, it may go viral and get a large number of people to visit your website.

Sounds interesting, right? Well, it is. But, if you are using WordPress CMS then adding Facebook comments to your blog or website will be quite easy. On the other hand, if you are running an HTML based website then adding Facebook comments is not a straight-forward task. You will need to do certain tasks before having Facebook comments. If you haven’t got a clue about this, well then let me teach you. Let’s find out how you can exactly add Facebook comments manually to your website.

Tutorial To Add Facebook Comments Manually To A Website:

1) To get started, go to Facebook Developers page, hover over “My Apps” in navigation bar and click on “Add a New App“.

2) Now, a pop-up will show up asking you to select the platform for which you are going to create the app. Click on “Website“.

3) A new page will open up asking you enter the Name of the App. Enter any name of your choice. For this tutorial, I am going to use my website’s name “CrackAloud Comments“. Once you have entered the name, click on “Create New Facebook App ID“.

4) A pop up will show up asking you to select category. Select a category based on your website niche. Also, the pop up will ask whether this a test for an existing now. Select “No” and click on “Create App ID“.

5) Once done, you will see the Facebook SDK Javascript. Don’t bother about it at all. Just scroll down, and you will see Facebook asking you to enter your website URL as well as website’s mobile version URL. If you have a separate mobile version of your website, enter both or else enter your website URL. Once done, click “Next“.

6) Now you will see “Test your Facebook Integration“. Leave it and scroll down until you see “Social Plugins” under the Heading “Next Step“. Next, click on “Social Plugins”.

7) You will see a new page opening up. In that scroll down a bit and you will see a lot of options. In them, click on “Comments“.

8) Now, you will in this page: https://developers.facebook.com/docs/plugins/comments/. Here you can see the options to create a comment box for your website. In the options, enter your website URL, width based on your website’s width, number of posts you would like to show up on the comments box and color scheme. Once done, click on “Get Code“.

9) A pop-up page will open up with your code. Now, choose HTML 5 (as it is the best way to add Facebook Comments to a HTML based website). You will see two codes: Javascript SDK which you need to place on your website’s tag and another code which you need to place where you would like to show the Comment Box.

Just, copy these codes and place them in the respective places in your website and that would be it. Now, you have successfully added Facebook comments manually on your website. If you would want to moderate the comments, check out our guide to Facebook Comments Moderation.

If you face any challenges or if you have any suggestions for us, do let me know using the comments section below.