PHPMatters Help You Better Hosting Your PHP-based Sites
How to Add the Facebook Comment Box for Each of Your Webpages

How to Add the Facebook Comment Box for Each of Your Webpages

In order to make a solid bridge between Facebook and your website, you need to make use of the related plugins offered by Facebook community, allowing you to display a Facebook presence on your website easily. In our previous posts, we have told you how to embed Facebook posts and how to add Facebook buttons to your webpage with the help of Facebook plugins. In the following, we have introduced how to add a Facebook comment box for your site to achieve an easy communication between you and your readers and to improve your Facebook contacts subtly.

Get the Basic Coding Stuff

When it comes to adding an additional part to a website, the majority of webmasters choose to install a related plugin to do this for them. Surely, you can add the comment box by installing a plugin or a module such as SEO Facebook Comment. However, this practice may affect your page loading negatively especially when you have already integrated loads of tools and applications to your website. In this case, we recommend an easier method by making use of the HTML code.

Note that you do not need to come out the coding stuff on your own for it can be generated by Facebook plugin automatically. To get the code, you only need to login to your Facebook account and transfer to this page. Then, you need to finish the related configurations as the image displayed in the following.

get Facebook comment code

  • URL – This decides which website or webpage is integrated with the comment box, so you need to make sure its accuracy.
  • Width – This part can be decided based on your webpage width. You can check how wide your webpage is, and then decide the pixel number accordingly. Note that the default width is 550 pixels.
  • Number of Post – By default, you are allowed to display 10 comments in this special box, and you can decide the number as you want freely. Generally, we recommend no more than 10 comments as too many displays may affect the overall design of your webpage.
  • Color Scheme – There are only two options of color schemes – light and dark. Here, we sincerely recommend the light one.

Now, you can hit on the Get Code button to acquire the needed coding. Just like the Facebook embedded posts, you can only use the HTML5 code and the XFBML code. Here, we strongly suggest you to copy the HTML code for you only need to do one preparatory work of including JavaScript SDK. Besides, you can change some settings easily using the attributes accordingly.

Post Numbers

Post Numbers Code

Color Scheme

Color Scheme Code

Comment Width

Comment Width Code

Display Order

Display Order Code

Here, we have to mention that if you want to display the most relevant comments in the highest ranking, then you need to choose the “social” order. If you want to display them based on when they are posted, you can choose the rest two orders.

Moderate the Comments

Sometimes, you may find some bad comments appeared in your comment box coming with no relevancy to your posts, some of which are even the spam comments. This kind of comments can do no good to your website, so you’d better remove them once you have figured out. Filtering bad comments manually may be time and energy consuming, so you can make use of the built-in moderation function offered by this Facebook plugin. With it, you can prevent some irrelevant words from being visible in your comment box.

To do this, you need to set yourself as a moderator by adding the meta tag as below with your user ID number. Then, you are allowed to moderate your comments from the moderation dashboard.

Moderate Comments Code