o-comment-count

Renders the comment count for a given article.

active

Main

Basic setup

<!DOCTYPE html>
<html class="o-hoverable-on ">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title>o-comment-count: main demo</title>
	<meta name="viewport" content="initial-scale=1.0, width=device-width">
	<script src="//polyfill.webservices.ft.com/v1/polyfill.min.js?features=default"></script>
	<style>body { margin: 0; } .demo-js .o--if-nojs { display: none; }</style>
	<script>(function(d) { d.className = d.className + ' demo-js'; })(document.documentElement);</script>
	
</head>
<body>
<div data-o-component="o-comment-count" data-o-comment-count-config-article-id="3a499586-b2e0-11e4-a058-00144feab7de">
Comments
</div>



</body>
</html>

Custom_template

How to provide a custom template at an individual level

<!DOCTYPE html>
<html class="o-hoverable-on ">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title>o-comment-count: custom_template demo</title>
	<meta name="viewport" content="initial-scale=1.0, width=device-width">
	<script src="//polyfill.webservices.ft.com/v1/polyfill.min.js?features=default"></script>
	<style>body { margin: 0; } .demo-js .o--if-nojs { display: none; }</style>
	<script>(function(d) { d.className = d.className + ' demo-js'; })(document.documentElement);</script>
	
</head>
<body>
<div data-o-component="o-comment-count" data-o-comment-count-config-article-id="3a499586-b2e0-11e4-a058-00144feab7de" data-o-comment-count-config-template="This article has {count} comment{plural}.">
Comments
</div>



</body>
</html>

Auto_refresh

Enable auto refresh: interval of 1 minute

<!DOCTYPE html>
<html class="o-hoverable-on ">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title>o-comment-count: auto_refresh demo</title>
	<meta name="viewport" content="initial-scale=1.0, width=device-width">
	<script src="//polyfill.webservices.ft.com/v1/polyfill.min.js?features=default"></script>
	<style>body { margin: 0; } .demo-js .o--if-nojs { display: none; }</style>
	<script>(function(d) { d.className = d.className + ' demo-js'; })(document.documentElement);</script>
	
</head>
<body>
<div data-o-component="o-comment-count" data-o-comment-count-config-article-id="3a499586-b2e0-11e4-a058-00144feab7de" data-o-comment-count-config-auto-refresh="true">
Comments
</div>



</body>
</html>

Defer_init

Initialize later

<!DOCTYPE html>
<html class="o-hoverable-on ">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title>o-comment-count: defer_init demo</title>
	<meta name="viewport" content="initial-scale=1.0, width=device-width">
	<script src="//polyfill.webservices.ft.com/v1/polyfill.min.js?features=default"></script>
	<style>body { margin: 0; } .demo-js .o--if-nojs { display: none; }</style>
	<script>(function(d) { d.className = d.className + ' demo-js'; })(document.documentElement);</script>
	
</head>
<body>
<div data-o-component="o-comment-count" data-o-comment-count-config-article-id="3a499586-b2e0-11e4-a058-00144feab7de" data-o-comment-count-auto-init="false">
Comments
</div>

<script>
	setTimeout(function () {
		oCommentCount.init();
	}, 4000);
</script>



</body>
</html>
Bower Dependencies
o-comment-utilities ^2.3.0
o-comment-api ^2.4.0
GitHub Repository

Quickstart

Build Service

Add the following to your <script> tag

o-comment-count@^0.3.7

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-comment-count"@"^0.3.7"

For more information see the Origami build process.