No internet connection
  1. Home
  2. Documentation
  3. How To

How to Show Blog Post Comment Counts

By KajMagnus @KajMagnus2021-08-24 17:44:43.700Z2021-08-24 18:27:15.308Z

Here's how to show [the number of comments on each blog post], from your blog post index page:

First:

Enable Cross-Origin Resource Sharing (CORS)

You need to configure Talkyard to allow "How many comments?" API requests from browsers visiting the blog:

  1. As Talkyard admin, go to https:// your talkyard site /-/admin/settings/features
  2. Tick the Enable API checkbox.
  3. Tick the Enable Cross-Origin Resource Sharing (CORS) checkbox.
  4. In the Allow CORS requests from field, type the address to your blog, for example: https://your-blog.example.com. Save the settings.

Thereafter:

Add HTML tags

Where you want the comment counts to appear, add <a> tags that link to the blog posts, and that have a class="ty_NumCmts" CSS class attribute.

For example:

<h2>Blog Post 1 Title</h2>
<a href="link-to-blog-post-1" class="ty_NumCmts"></a> comments
...
<h2>Blog Post 2</h2>
<a href="link-to-2" class="ty_NumCmts"></a> comments

Talkyard's embedded comments script will do an API request to the Talkyard server, fetch the comment counts, and insert into those <a> tags. Afterwards, can look like so:

<h2>Blog Post Nr 1 Title</h2>
<a href="https://link-to-blog-post-nr-1" class="ty_NumCmts">123</a> comments
...
<h2>Blog Post Nr 2</h2>
<a href="https://link-to-blog-post-nr-2" class="ty_NumCmts">456</a> comments

You can also place the class="ty_NumCmts" on a tag nested inside an <a href=...> tag that links to your blog post, for example:

<a href="https://link to blog post.html">
  <h2>Blog Post Title</h2>
  <span class="ty_NumCmts"></span> comments   <!-- this is inside the <a> -->
</a>

which would change to:

<a href="https://link to blog post.html">
  <h2>Blog Post Title</h2>
  <span class="ty_NumCmts">123</span> comments
</a>


 
Lastly:

Reload the blog homepage (the blog post index page) in you browser, and comment counts ought to appear.

if not, look in the browser's error log — in Edge and Chrome: https://developer.chrome.com/docs/devtools/open/#console

Linked from:

  1. Read API
  • 0 replies