Origami Frontend Components & Services

Readme: o-comment-count

o-comment-count has a support status of "dead". This means that there are no plans to fix any issues with this component, and it may stop working at any point. More information on the status of this component is available in the README. If you still rely on this component or have concerns, please contact the Origami team.

📢 This component has been deprecated. The comment count functionality has been moved into o-comments. Please speak to the Comments team if you have any questions.

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>

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:
Optional fields:

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 (http://registry.origami.ft.com/components/o-comment-api#configuration) 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 (http://registry.origami.ft.com/components/o-comment-api#configuration).**
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:

    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.

dead Origami v1 (Bower)
Switch component view

GitHub: o-comment-count

Install o-comment-count

If using the Build Service, add o-comment-count@^0.5.1 to your script tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-comment-count@^0.5.1".

Help & Support

o-comment-count is maintained directly by the Origami team. If you have any questions about o-comment-count or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com