HTML5 Facebook Comments Plugin Attributes

If you have read our other blog post on Adding Comments To WordPress, you may be wondering what kind of customization is available to those who choose to manually insert the Facebook comments feature into their WordPress website. In this post, we’ll explore the settings that the comments configurator doesn’t include and show you how to implement them on your website.

Facebook Comments HTML5 Attributes

When using Facebook’s comments configurator, you really only have the following attributes to edit:

  • class
  • data-href
  • data-numposts
  • data-colorscheme

In addition to the attributes that come through the comments configurator, you can also manually include the following attributes:

  • data-mobile
  • data-order-by
  • data-width

Each of these attributes has different possible values that we’ll list with an explanation.

  1. data-colorscheme (Will change the look of the comments for light or dark looking websites)
    • light (default)
    • dark
  2. data-href (What URL the comments are coming from)
    • Absolute URL (e.g.
    • Dynamic URL (in PHP) and then
  3. data-mobile (This is a boolean value that will show a mobile-optimized version of the comments — we will discuss later)
    • true
    • false
  4. data-numposts (The number of comments to show by default. Minimum value is 1)
    • 10 (default)
  5. data-order-by (The ordering system used to display comments)
    • social (default)
    • time (Oldest comments at the top. Newest comments at the bottom)
    • reverse_time (Newest comments at the top. Oldest comments at the bottom.)
  6. data-width (How wide the comments feature should be in pixels)
    • 550 (default)
    • 100% (This enables a 100% fluid width. The mobile version ignores the width value and will display a 100% fluid width)

The class attribute is not discussed here because it is not unique to Facebook. You can get pretty creative with CSS selectors and find ways to customize these comments to your site.