Skip to main content

Comment Counts

Add the count.js script to your html tree. On a page that includes the Stream Embed this is done for you automatically, however for best performance we recommend to include it into the <head> tag.

<script
  class="coral-script"
  src="//{{ CORAL_DOMAIN_NAME }}/assets/js/count.js"
  defer
></script>

NOTE: Replace the value of {{ CORAL_DOMAIN_NAME }} with the location of your running instance of Coral.

Insert an html element with the class coral-count and configure it using data-coral-* attributes.

<span
  class="coral-count"
  data-coral-url="http://example.com/blog-entry-1/"
></span>

After successful injection it will become:

<span class="coral-count" data-coral-url="http://example.com/blog-entry-1/">
  <span class="coral-count-number">5</span>
  <span class="coral-count-text">Comments</span>
</span>

Available data-coral-* attributes​

Set the class of your html element to coral-count in order to get story counts. The following data-coral-* attributes will configure the output:

  • data-coral-id – The id of the story of which counts should be injected.
  • data-coral-url – The URL of the story of which counts should be injected. See more info below on when it needs to be set.
  • data-coral-notext – If set to "true", only the count number will be injected

The data-coral-url attribute should always be provided or be able to be inferred from the canonical url reference or current page url. If it is not provided in the data attribute, the story URL will be retrieved from the canonical url reference <link rel="canonical" href="..."> or inferred using the current page url. Therefore, on pages where the story URL cannot be inferred from the canonical url reference or current page url (such as indexes and homepages), it's important that the data-coral-url be included.