Hi everyone,
I’m looking for a way to insert a reading time estimator for my blog.
Can you help me find a solution?
Thank you. Thank you.
Here is my public share link: LINK
(how to access public share link)
I have the same question! If I find the answer I’ll let you know.
Ok, so @CGW-Marketing this is the current fix I’ve devised.
There isn’t an automatic way to do it that I see, so i’m doing it a bit manually.
In your blog post CMS collection, make a number field labeled ‘Read Time’ and make it required. When you design your blog post layout, include 2 pieces of text aligned horizontally to each other in a flexbox. For the first piece of text, link it to the Blog Post CMS field ‘Read Time’. For the second piece of text, just write ‘Min.’ and leave it.
that way when you update the read time field, it will update for each blog post.
I would reccomend making the hint the calculation for read time - I think it’s 1 minute for every 60 words? But I could be completely off.
Hope that helps!
“A bit” manually? That about as manually as it can be 
This could easily be done with javascript. Fetch amount of characters/words in the rich text field, do a simple calculation based on characters/words per minute, post the text.
Do you have an example of the Javascript for something like this? I can’t code, so manual is my only suggestion.
1 Like
Thanks for your reply.The manual way is an alternative, but I do it for my clients. So I won’t ask them to do another task when writing an article.
I’m looking for a piece of code to integrate but I haven’t found it yet.
Reading time is subjective and based on the target audience.
I can probably cook something up but you have to provide the published link of an example article.
If you want to discuss this privately, you can also contact me via email.
I made a working example here: word countings - JSFiddle - Code Playground
It’ll count the words in a div (preferrably the text field you want to count), then do maths on the number and calculate the minutes needed to read it (60 words per minute). The result is posted to another div.
Just put the javascript at the bot there into your site’s custom code part (remember the script tags), then rename the “richtextfield” part to the actual name of the text field.
Finally, set an empty div somewhere where you’d like the number to pop up. Set the div id to “result”.
Change the x variable in the javascript to however many words you think you can read per minute (it’s set to 60).
Edit: Fixed a link.
5 Likes
Hi, Fonsume.
Thanks for your help.
I did as you said, but I don’t know where to put the script. I put it at the bottom of my page in the HTLM Embed component. It’s not working.
Can you tell me where to put it?
Put it in the custom code segment on the page / collection page. It goes into the bottom one.
Remember to include the <script> </script> tags!
1 Like
Thank you for the help - I’ll probably be using this on my site as well!
1 Like
Okay, it’s working. Thank you for your help.
Great community.
1 Like
This is a great suggestion. Thank you for sharing!
Wow~ That’s interesting! Thanks a lot.
According to Medium, the average reading speed is like:
English: 265 words per min.
Chi / Jp / Kr: 500 characters per min.
This is something I am using, modified from the scripts from someone else:
https://codepen.io/pen/NWbNyGz
Fonsume’s script (adjusted the wpm)
https://codepen.io/pen/QWGNQjV
But they are both not counting character-based / no-spacing languages like Japanese and Chinese correctly as Medium does, as such characters are skipped from counting.
Any idea how to make it right?
Make it possible to count mixed characters finally! 
Not really neat but it works.
Hope it will be helpful to some of you.
CodePen: https://codepen.io/pen/XWNRxWN
Some known issues:
- Some punctuation marks are not able to be removed from the counting yet.
- Wrong counting with Korean characters (not sure why…)
- Minor but mysterious word counting to blank and image elements.
Glad if anyone has brilliant ideas!
2 Likes
I used your code today. Thank you!
1 Like
This works awesome on a collection template page, thank you.
I tried to add it to a blog collection list landing page (where all the blog items are previewed), but it only works for the first one. Is there a way to make this to work on multiple (collection list) items?
1 Like
Sure, you just have to add it inside the collection list item as a custom embed and put in the correct info from there. You can remove the entire highligted part and insert a dynamic link to the text field used.
You also probably want to adjust the reading speed. I lowballed it a bit.
This is really working @Fonsume but I am having the same issues as @livstrawbridge … I need it visible on multiple elements, can you please try to describe this step once more? I tried following your steps but i must have done something wrong
1 Like
did you manage to get it working on multiple collection lists?