Add reading time info on your blog posts in Hubspot

Today it’s an easy one, boys.

We are going to add the typical X min read info on our blog posts, so the visitors can see in a breeze how long it will take them to read the post and decide if they want to go with it or leave it for later when they have more time.

The snippet is quite simple actually:

Snippet

{% set mins = (content.post_body|striptags|split(" ")|length / 300)|int %}
{{ "%s mins read"|format(mins) if mins > 1 }}

Explanation

We grab the post body, strip all the HTML tags (so we don't count the HTML that won't be read) , split it by spaces, and count the number of words. Then we divide it by 300 (average reading words per minute) and, voilà!.

Finally, we display the text {{ minutes }}mins read if it is longer than one minute. We won't display it for 0 or 1 min reads. If you want to add the 1 min read you can swap the operation for >=.

Placement

I like to place it next to the meta-information (blog author, tags, and date) of a post page, and also on the listing. This way, the visitor doesn't need to go to the post page to actually find how long the entry is.

You will likely need to dig into your own listing and post templates that would look different than mine. But if you are not code-savvy you can try to find points of reference to find where to place it (or just try trial and error 😊).

Enjoy!