[CORL-181] Add docs for comment count integration (#2598)

* docs: add docs for comment count integration

* docs: update count docs

* chore: improve integration docs
This commit is contained in:
Vinh
2019-10-01 19:27:00 +00:00
committed by Wyatt Johnson
parent 093202f9e2
commit d3931db285
3 changed files with 57 additions and 15 deletions
+38
View File
@@ -0,0 +1,38 @@
---
title: Comment Count Integration
permalink: /v5/integrating/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.
```html
<script href="//{{ CORAL_DOMAIN_NAME }}/assets/js/count.js" defer></script>
```
> **NOTE:** Replace the value of `{% raw %}{{ CORAL_DOMAIN_NAME }}{% endraw %}` 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.
```html
<span class="coral-count" data-coral-url="http://example.com/blog-entry-1/"></span>
```
After successful injection it will become:
```html
<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.
- `data-coral-notext` If set to `"true"`, only the count number will be injected
Either `data-coral-id` or `data-coral-url` should be set. If none are provided the story url
will be retrieved from the [canonical url reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs#Using_%3Clink_relcanonical%3E) `<link rel="canonical" href="...">` or inferred using the current page url.