How to Add Reading Minutes to Blog Posts

[EricSalvi]

I wanted to visually show my readers how long blog posts are in minutes. I felt that this would be a great way to keep my readers engaged. Plus it looks cool.

In my blog template, I edited the Post Template and Listing Template. I looked for the HubL loop section,

{% for content in contents %}

Inside this section is where the system will loop through how many posts I have published. I knew I wanted mine next to the post Date, Author, and Topics.
Here is the code I added using a simple HubL variable and filters.

{{ content.post_body|wordcount|divide(300) }}

The first part, content.post_body is getting all the information from the post body. Pretty straightforward. Then appending the filter |wordcount which is telling us to get the total number of words in the post_body. After that, I then added |divide(300). The average adult human reads 300 words per minute.

To finish up I added the span class to stylize with CSS and then added the appropriate font awesome tag.

<span class="reading-minutes">
   {{ content.post_body|wordcount|divide(300) }} minute read
</span>

You now have implemented the finished code like in my image above.

NOTE: 
This code will always round down. I found that if I had 899 words and then divided it by 300 it would show me 2 and not 3. I have updated my code as follows for it to always round up or down to the nearest 100. I also added an If statement to check to see if the post-reading time is less than 1. Maybe you have a post with just one video or infographic and it would not look good with a 0 for the reading minutes.
Update: Added the striptag filter to the code below to remove any of the HTML from videos or images and such that could cause your final outcome to be extremely high when it comes to reading minutes. 

<span class="reading-minutes">
   {% set initialPostWords = content.post_body|striptags|wordcount %}
   {% set calculatedPostWords = (initialPostWords/100) * 100 %}
   {% set finishedPostWords = calculatedPostWords|divide(300)|round(2) %}
   {% set number = finishedPostWords|round %}
   {% if number < 1 %}
 
   {% else %}
   {{ finishedPostWords|round }} minute read
   {% endif %}
</span>

Let me know what you think.

[roisinkirby]

Very cool - thanks for sharing! Tagging @jlamb @wspiro @Tom from the HubSpot Support design specialist team, as I'm sure they'd be interested in this. Thanks @EricSalvi 🙂

[stefen]

@EricSalvi awesome work! I've seen people do this with javascript but server side is a much nicer solution when possible imo. Thanks for sharing!

[mgrubbs]

Hah! I totally missed the |wordcount filter in the documentation...

I've been using something so similar but way more hacky:

{{ content.post_body|split(' ',5000)|length|divide(350)|round(0,'ceil') }}

350 because I read somewhere that college-educated WPM is 350-450.

Here I was thinking I was so smart for splitting on the spaces and counting... I assume the |wordcount does pretty much this exact same thing...

Thanks for sharing!

[EricSalvi]

@mgrubbs Thanks for commenting. I like that you are using the split filter and then followed by the length. I guess with my code I could always change the 300 to 350 or 400 but I figure that if someone reads at the 500 WPM and they see my posts as a 4 minute read then they will most likely know they will get through it a lot faster.

[ndwilliams3]

@EricSalvi

Awesome hack, Love it! Thanks for sharing.

[rayckay91]

Nice @EricSalvi!

Out of interest, does anyone here measure blog reading minutes? Would marketers consider this a key performance indicator for this sort of content? I'm a sales professional but a marketing/smarketing newbie. 

[JohnPate]

Awesome! Never would have looked for this solution!

[DLahey]

I'm pretty new to this, how would you explain this to someone with, basic coding experience? 

Thank you! 

[EricSalvi]

Hey @DLahey,

Essentially to use my HubL code you will need to be comfortable editing the HubL markup for the blog post or listing template. 

https://designers.hubspot.com/docs/hubl/blog-content-markup shows you what the code looks like and you will need some basic HTML understanding as well but if you were to edit the post or listing template in your account, you will need to look for the area where you want the reading minutes to display. This should be in a for loop so that each post displays their own individual reading minutes and that looks something like this, 

{% for content in contents %}

I hope this helps. Searching designers.hubspot.com may give you some more insight and also these community boards.

[FloStu]

@EricSalvi

Very cool, thanks for sharing. Would it be possible to implement this function on the  website pages as well? We have many pages which are very long and that would be a good added value for the readers.

[EricSalvi]

Not that I know of. The idea of this was strictly for blog posts so the reader knows how long they are in minutes. The HubL snippets will only work for the blog content. We don't have any HubL Variables to get the word count on a website page. There would be way too many modules where you could add content and having one source of code looking through all those modules for the word count just wouldn't work.

Now that being said there might be a way to achieve this using jQuery. With a quick search in Google, I found this, https://www.jqueryscript.net/other/Article-Word-Counter-Reading-Time-Plugin-jQuery-KeepReading.html

You could also manually set the reading minutes per page by creating some type of custom module where all you would need to do is add the word count per page. You will just need to get the word count from the page. You could do this easily by copying and pasting the content into a Word editor and then look at the word count through the external program. Then in this custom module, you could set it up to take the number from the word count field and then use my code to do the math and then it would display the reading minutes.

I hope this helps.

[gepot]

When using this method where a video is included in the post body, it also counts the length of the video, so a blog that would typically be 4 minutes without the videos are now suddenly 30 min with videos.

Is there any way to strictly count the words of the post body, excluding videos?

[EricSalvi]

Hey @gepot, as far as I know, there is no way for the HubL to take the duration of the video and add it to the minutes read. Essentially what it does is takes only the wordcount which will only count the words in a string and that string is the post content. 

When I did my testing of this snippet, I found that adding a video was providing a reading minute of 0 since there were no words for the filter to generate and calculate. I added a conditional statement to say if the reading minutes are equal to 0 to not display anything.

If there is a bunch of HTML then possibly that could be added to the overall page count but I can't see it taking up an additional 26 minutes. Adding the striptags filter may also be helpful but feel it is not necessary. 

Do you mind sending me a link so I can take a look?

[gepot]

@EricSalvi Thanks for the quick response - you can have a look at this post: https://www.epiuselabs.com/data-security/whats-popping-with-popia

As you can see, this one shows a 66min read due to the lengthy video, but the actual word count is relatively low.  The designer used the method in this post verbatim.

[EricSalvi]

Hey @gepot I think the issue is all of the HTML that is also present in the source of the body content which is adding a large number of extra words to the final result. 

If I could suggest you trying to add the striptags filter before the wordcount filter to see if this greatly decreases the reading number?

Here is an updated HubL sequence 

{% set initialPostWords = content.post_body|striptags|wordcount %}
{% set calculatedPostWords = (initialPostWords/100) * 100 %}
{% set finishedPostWords = calculatedPostWords|divide(300)|round(2) %}
{% set number = finishedPostWords|round %}
{% if number < 1 %}
    A super quick read.
{% else %}
    {{ finishedPostWords|round }} minute read
{% endif %}

You can change the text for "A super quick read" to whatever you want it to say if the post is less than 1 minute of reading. 

[gepot]

Excellent thanks, that solved the problem for me!

[EricSalvi]

Great to hear it. I just updated the original post. Thanks for finding this out for me.

[Nynke_HM]

This is awesome. Thanks for sharing! 

[rdecker]

I just found your "reading time" solution. Great, thanks!

About the rounding issues:

I fixed that by converting the word count to a floating point number, then dividing it and the result is always rounded up.
That makes the code a little simpler, in case somebody is still looking for it.

Here is what I use to display minutes, with a minimum of 1 minute if there are no words in the post_body:

{% if content.post_body|wordcount > 0 %} 
   {{content.post_body|wordcount|float|divide(300)|round(0, 'ceil')}}
{% else %}
   1
{% endif %}

putting it in one line:

{% if content.post_body|wordcount > 0 %}{{content.post_body|wordcount|float|divide(300)|round(0, 'ceil')}}{% else %}1{% endif %}