Show Estimated Read Time on Your Blog

Options
Shawn
Shawn Member Posts: 18 mod
edited July 9 in Tips & Tricks

Hi everyone! I’m Shawn with the content team here at Duda. We recently added an “estimated reading time” widget to our blog, so I wanted to take a moment to share with you guys how we did it, and why.

Why did we build this widget?

If you haven’t seen it before, an estimated reading time widget essentially calculates how long it might take for a reader to finish an article. A lot of platforms, particularly Medium, employs this in an attempt to make content more digestible for readers.

There’s a surprising amount of marketing research behind this. Studies have shown that presenting an estimated read time can increase article engagement as much as 40%! The idea is that if a reader knows they only have 10 minutes to spare, then they won’t be intimated by your 7 minute article.

How do you calculate the total reading time?

The formula itself is pretty straightforward. You just need to find the total number of words in an article, then divide that by the number of words the average adult reads in a given minute. We chose to use the same estimated words-per-minute (WPM) as Medium, 265. Some adults may read faster, some slower—that’s why it’s estimated.

How do you do this automatically with Duda?

Time for the meat and potatoes, how can you create this yourself with Duda? We used the Widget Builder, but you could very easily build this with the HTML widget instead.

<div class="readTimeBlock">
  <span class="readTime">0</span> minute read
</div>

In the above code, we’ve created two elements; a div and a span. The div element contains our text and we can use it to easily style the element later via CSS or the Design Editor portion of the Widget Builder. On the Duda Blog, for example, we wrapped the entire element in a tan pill-esque design. You’re free to style it however you want, though!

The span is where the magic happens. This number will be replaced, using JavaScript, with the actual estimated read time. The result is text that says “7 minute read” for an article containing around 1900 words.

function readingTime() {
    const text = $(".blog-post-row").text();
    const wpm = 265;
    const words = text.trim().split(/\s+/).length;
    const time = Math.ceil(words / wpm);
    $(element).find('.readTime')[0].innerText = time;
}
readingTime();

On Duda, all blog content is contained within an element of the class .blog-post-row. Knowing that, we can use the .text() function of jQuery to find all of the text contained within a blog article. Then, we can find individual words by splitting the text based on empty spaces using the function .trim().split(/\s+/), where /\s+/ represents “ “.

The number of all of these words is then cleanly divided by the words per minute using the Math.ceil function. Math.ceil divides without a remainder, helping us avoid any weird fractional minutes. Finally, we replace the number within our span using $(element).find('.readTime')[0].innerText = time;.

That’s it! Nice and easy. Let us know if you decide to use this on any of your client’s blogs—we’d love to see it. Just place the HTML widget or Custom Widget within the Blog Post Layout, then publish the site. You can see it in action by checking out any of our articles over at blog.duda.co. Enjoy!