Streaming live at 10am (PST)

Blog Reading Timer

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

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: https://jsfiddle.net/98xctarq/
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.

3 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.
2020-01-21 13_27_05-Webflow - PF 2.0

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.
https://help.medium.com/hc/en-us/articles/214991667-Read-time

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! :grinning:

Not really neat but it works.
Hope it will be helpful to some of you.

CodePen: https://codepen.io/pen/XWNRxWN

Some known issues:

  1. Some punctuation marks are not able to be removed from the counting yet.
  2. Wrong counting with Korean characters (not sure why…)
  3. Minor but mysterious word counting to blank and image elements.

Glad if anyone has brilliant ideas!

1 Like

I used your code today. Thank you!

1 Like