Origami Frontend Components & Services

Demos: o-comment-count

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>
Switch component view

GitHub Repository

Install o-comment-count

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

If running a Manual Build, run bower install --save "o-comment-count@^0.3.8".

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