Embedded Comments

Embedded comments are a simple way to put public post comments - by a Page or a person on Facebook - into the content of your web site or web page. Only public comments from Facebook Pages and profiles can be embedded.

Settings Layout

Step-by-Step

1. Choose Comment Link

Pick the link of a comment you want to use with the embedded comments plugin. To get the link to a comments right-click the timestamp right next to a comment and copy the link address (Details see: Getting a comments's URL).

2. Update HTML snippet

Update the attribute data-href to the URL of your comment:

<!-- Load Facebook SDK for JavaScript -->
<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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your embedded comments code -->
<div class="fb-comment-embed"
   data-href="https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185"
   data-width="500"></div>

3. Copy & Paste HTML snippet

Copy and past the snippet into the HTML of the destination website.

Embedded Comments Code Generator

URL of comment

Width

Include parent comment (if url is a reply) [?]

Get Code

Settings

The configurator above doesn't include all of the possible settings for the embedded video player. You can also change the following settings:

Setting	Description	Default
`data-href`	The absolute URL of the comment.	`n/a`
`data-width`	The width of the embedded comment container. Min. `220px`.	`560px` on desktop. On mobile this parameter is ignored and the width is always `100%` (fluid width).
`data-include-parent`	Set to `true` to include parent comment (if URL is a reply).	`false`

Getting a comments's URL

To get the URL of a comment:

Click the comment's publishing time (e.g. "18 hours", marked red in screenshot below). Wait for the page to be reloaded.
Copy the updated URL from your browser's address bar. The URL should contain the string comment_id= (see screenshot).

Layout on Desktop

You can adjust the width of embedded comments on desktop via the data-width attribute in the embedded comment tag as shown in the example below. Chose a value between 350 and 750 pixels.

Do not use CSS style tags to adjust the size of a plugin. It may result into display errors.

<!-- WRONG! -->
<style type="text/css">
.fb-comment-comment {
  width: 500px;
}
</style>
<div class="fb-comment-comment" data-href="{your-comment-url}"></div>

<!-- CORRECT -->
<div class="fb-comment-comment" data-href="{your-comment-url}" data-width="500"></div>

Embed from Facebook

You can directly get embed code from public Facebook comments.

Embed from Comments Plugin

You can directly get embed code from comments plugin.

Changing the Language

You can change the language of the embedded comments plugin by loading a localized version of the Facebook JavaScript SDK. When you load the SDK, change the value of js.src to use your locale. Replace en_US with your locale, e.g., fr_FR for French (France):

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.2";

Supported locales are referenced in the Facebook Locales XML file.

You may need to adjust the width of a Social Plugin to accommodate different languages. You may find more information on our Localization & Translation page.