How to use the Facebook comment plugin on a website.

Technology and Entertainment > How to use the Facebook comment plugin on a website.
07/08/2024 11:15

546

Using the Facebook Comments Plugin on your website is a great way to increase user engagement and make it easy for them to comment and share content. Facebook provides a variety of social plugins for this purpose, including commenting, liking, and sharing.

Steps to install the Facebook Comments Plugin

1. Prepare a Facebook App ID

If you don’t already have a Facebook App ID, you need to create an app in Facebook Developer to get one.

Go to Facebook for Developers
Log in with your Facebook account.
Click on My Apps at the top right corner, then select Create App.
Choose the appropriate app type and follow the steps to create a new app. After creating it, you will receive an App ID.

2. Generate the code for the Comments Plugin

Go to https://developers.facebook.com/docs/plugins/

You will see that Facebook provides a variety of Social Plugins, such as the Like button, Share button, and comment box. Today, we will demonstrate how to use the Comment Plugin.

Enter the URL of the web page where you want the comments to appear. You can set the width and the number of posts you want to display. Then click the Get Code button to receive the code.

Configure the plugin

URL of the object: Enter the URL of the web page where you want to enable comments.
Width: Set the width of the comment box (in pixels).
Number of posts: Set the number of comments to display.
Options: Choose additional settings, such as displaying the Like button, sending messages, or different comment formats.

Place it on the web page where you want the comments to appear.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website Facebook Comment</title>
</head>
<body>
  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/th_TH/sdk.js#xfbml=1&version=v20.0&appId=xxxxxx" nonce="ruCBQxno"></script>

  <!-- Add your other content here -->

  <div class="fb-comments" data-href="https://understandplease.com/xxxxxxx" data-width="500" data-numposts="5"></div>
</body>
</html>

After placing the code on the desired spot on your website, the comment box will appear as shown.

To fix the issue of the Facebook comment box not resizing to 100% width of the layout, add data-width="100%" to the div class="fb-comments" ... tag.

  <div class="fb-comments" data-href="https://understandplease.com/xxxxxxx" data-width="100%" data-numposts="5"></div>

Also, add style code to set the width to 100% to resolve this issue.

  <style>>
	/*Fb Comments Width Fix*/
	.fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe {
		max-width: 100% !important;
		width: 100% !important;
	}
</style>

Please rate your satisfaction with this article

Post a Comment
Your email address will not be displayed to others. Required fields are marked *

How to use the Facebook comment plugin on a website.

Steps to install the Facebook Comments Plugin

1. Prepare a Facebook App ID

2. Generate the code for the Comments Plugin

Configure the plugin

Recommended Content