How to Show Blog Post Comment Counts
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:
- As Talkyard admin, go to
https:// your talkyard site /-/admin/settings/features - Tick the Enable API checkbox.
- Tick the Enable Cross-Origin Resource Sharing (CORS) checkbox.
- 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:
- KKoos @koos
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?
KajMagnus @KajMagnus2022-02-21 12:20:59.897ZYou 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- KKoos @koos
I see, yeah I didn't get that to work! I solved it in a less elegant but simpler way: a
MutationObserverthat checks if theinnerHTMLof<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); commentsCounter.remove(); observer.disconnect(); } }); observer.observe(document, { attributes: false, childList: true, characterData: false, subtree: true }); }