Renders the comment count for a given article.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

o-comment-count Build Status MIT licensed

A small UI component for rendering the comment count of a given article.


Adding comment count to your product


Use the following markup to enable comments:

<div data-o-component="o-comment-count"
    data-o-comment-count-config-template="{count} Comment{plural}">

        <div class="o--if-no-js">0 Comments</div>
  • data-o-comment-count-config-article-id a unique id for your content, ideally a UUID for FT content
  • data-o-comment-count-auto-init="false" a module which has this attribute with a false value will not be initialized on the o.DOMContentLoaded event. This allows you to defer component initialisation.
  • data-o-comment-count-config-{key} for any other configuration. {key} has the following rule: -- means new object level, - means camel case. Example: data-o-comment-count-config--data-format--absolute="value" is transformed to: {"livefyre": {"dataFormat": {"absolute": "value"}}}

For the full list of configuration, see the available configurations.

Those elements which don't have the data-o-comment-count-auto-init="false" attribute will be automatically initialized on the o.DOMContentReady event.

If you defer initialising oCommentCount by using data-o-comment-count-auto-init="false" then you can initialise the component whenever you want by calling


The init function may take an optional parameter: a context (this could be DOM element or a valid selector). The search would be performed only inside of this context element. If none is specified, it defaults to document.body.


Create an instance of the component with the parameters that are available:

var oCommentCountComponent = new oCommentCount(document.querySelector('.comment-count'), {
    articleId: 'article-id'

The widget is automatically initialized, unless you specify in the configuration autoInit: false. In this case you can initialize this particular object at a later time by calling the following:


For the full list of configuration, see the available configurations.

More about the constructor config object

The configuration object which is passed to the contructor can/should have the following fields:

Mandatory fields:
  • articleId: ID of the article, any string
Optional fields:
  • template: can be used if you want to override the global template for this widget. {count} will be replaced with the count, and {plural} will be replaced with blank for a count of 0 or 1, and with 's' for a count > 1.
  • autoInit: can be used to avoid initializing the widget automatically by setting this to false
  • autoRefresh: it refreshes the widget with the latest count if set to true
  • hideIfZero: if true, hides the dom element of the widget (visibility: hidden)

Global configuration

This module uses global configuration. These are related configurations for Livefyre.

The default configuration is the following:

    "template": "{count} Comment{plural}"

There are two ways for changing the default config:


In order to change the configuration, you can add a script tag in your page source with the format in the example below:

<script data-o-comment-count-config type="application/json">
        "template": "{count}"

This configuration will be loaded on the o.DOMContentLoaded event.

Also, don't forget to also add the configuration for o-comment-api ( if you want to change the URLs of the services.



The configuration can be changed using the setConfig static method. Calling this method with an object will merge the current configuration with the object specified (deep merge, primitive type values of the same key will be overwritten).


    "template": "{count}"

As on the event o.DOMContentLoaded the widgets declared in the DOM are automatically initialized, it is preferred to call this function before the o.DOMContentLoaded event is triggered.

Also, don't forget to also add the configuration for o-comment-api ( The API of o-comment-api is available by using oCommentCount.dataService.

JavaScript API



The oCommentCount.ready event is fired after the comment count is initalised and added to the DOM.

The event has the following properties:

  • - Widget id (deprecated)
  • detail.instance - Widget instance.
	document.body.addEventListener('oCommentCount.ready', function(e) {



Called automatically unless autoInit is set to false. Init will basically fetch the comment count and render the template. If it's called multiple times, it re-renders the widget each time with the latest available comment count.



Logging can be enabled for debugging purposes. It logs using the global 'console' if available (if not, nothing happens and it degrades gracefully). By default logging is disabled.


This method enables logging of the module.


This method disables logging of the module.


This method sets the logging level. This could be a number from 0 to 4 (where 0 is debug, 4 is error), or a string from the available methods of 'console' (debug, log, info, warn, error). Default is 3 (warn).

Browser support

Works in accordance with our support policy

Core/Enhanced Experience

Only the enhanced experience offers any kind of commenting functionality. Core functionality will be added in due course.