How to Add Reading Minutes to Blog Posts

[#1]

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.

<span class="reading-minutes">
   {% set initialPostWords = content.post_body|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.

[#2]

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 

[#3]

@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!

[#4]

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!

[#5]

@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.

[#6]

@EricSalvi

Awesome hack, Love it! Thanks for sharing.

[#7]

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. 

[#8]

Awesome! Never would have looked for this solution!

[#9]

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

Thank you! 

[#10]

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.

[#11]

@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.

[#12]

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.