LavooijMedia
LavooijMedia

Based in Bournemouth since 2015, a full-stack web developer for a digital agency. In my spare time I work as a freelancer and love playing around with new and exciting web stuff and gadgets.

Ruben Lavooij
Author

Share


Tags


On this blog I happily talk about techy, geeky and (for me) fun stuff. I will be talking about all the problems / challenges I find in my day to day job, with examples, and how I have fixed those things. And maybe some of my 3D printing projects.

If you are having problems with your site, or need some work done, do not hesitate to contact me for a quick chat.

07-493102199 or info@lavooijmedia.uk
If calling during work hours leave a message and I will call you back as soon as I can!

Twitter


LavooijMedia

How to add "read time" to a blog

Ruben LavooijRuben Lavooij

I had to remove it from this blog for now, somehow it messed up the code to open the sidebar! time to investigate ;p

Medium is a great source for getting ideas, and when I saw this "read time" indicator, I wanted to have it on my blog as well. So how would we go about this? And why should we want it?

Why would you want this? well, read this:
https://blog.medium.com/read-time-and-you-bc2048ab620c

Also, people will stay on the site longer if they know beforehand what they are getting in to.

Now, how to do it?

There's 2 steps to this, the first one is making a location to write the time to, it is as simple as a div like below.

and the second step is a piece of scripty, what this does is looking at the .content div tag. this is where your page content is. It's looking at all normal characters (a-Z, 0-9) stripping out spaces and newlines and counting what's left. Based on the normal reading speed of 250-275 words per minute we can calculate the time to read.

$(document).ready(function(){
 var t=$(".content")[0].textContent,n=t.replace(/[^\w ]/g,"").split(/\s+/).length,e=Math.floor(n/250)+1,o=e+" min read";
 $(".read-time").html(o)
});

When it is executed it will amend the .read-time div with the results. voila.

This is ofcourse the really simple way of doing it and there's loads of plugins and other methods available who sport more features. but if you want the simple one, this will suffice!

^ this!

Author

Ruben Lavooij

Comments