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:


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: Save the settings.


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> -->

which would change to:

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


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:

Linked from:

  1. Read API
  • 3 replies
  1. K
    Koos @koos
      2022-02-18 16:55:36.205Z2022-02-21 12:03:23.070Z

      Hi, I got the above to work. But I'd like to get the number without having to wrap the <a> around it, preferably through JavaScript, so I can conditionally show text around it (f.e. 'There are 2 comments.' and 'There is 1 comment'. Would that be possible?

      1. You could send the HTTP request to fetch the comment counts, yourself, and interpret the result and update the page HTML (e.g. adding "There are 2 comments"). However that's quite a lot of work, I think. Anyway, if you have a look here:

        you'll see how you can construct an API request, and fetch the comment counts, and process the result via Javascript.


        Maybe instead it'd be better if the "2 comments" and "1 comment" etc, was included in the translation bundle, and one could configure Ty to show "2 comments" etc. instead of just "2"? — You'd still need to wrap in an <a>, but the "end goal", namely "There are N comments", would be fulfilled?

        Or if you could configure a template string, with placeholders for the comment count, e.g.: "There are ${NumComments} ${CommentsSingPlur}" which would expand to "There are 1 comment" or "There are 2 comments". Hmm

        1. KKoos @koos
            2022-02-22 14:37:30.654Z

            I see, yeah I didn't get that to work! I solved it in a less elegant but simpler way: a MutationObserver that checks if the innerHTML of<a class="ty_NumCmts"> gets changed and if so, uses that as the count :)

            If it's any use to someone else:

             const commentsCounter = document.getElementById('commentsCounter'); // You could also do something like document.getElementsByTagName('.ty_NumCmts');
              if (commentsCounter){
                observer = new MutationObserver(() => {
                  if (commentsCounter.innerHTML !== ""){
                    count = parseInt(commentsCounter.innerHTML);
                observer.observe(document, { attributes: false, childList: true, characterData: false, subtree: true });