Adding Reading Time to Blog posts

Site URL: https://thistooshallgrow.com/blog

Hi everyone!

I have a blog section on my site, where I write articles regularly. At the top of each article, I have a few elements I can change in the "settings" of each article: author, publication date, categories. I would love to have a "reading time" as well, since it can be useful for readers.

Any idea how I could add that?

Thanks a lot in advance!

This will requires JavaScript, not sure. Do you use Personal Plan or higher plan?

Also, I see on tablet, some text width is a bit narrow. Do you want to increase width?

Site URL: https://www.wtfjusthappened.net/

Hi. I am trying to add "reading time" to my blog posts (under articles and videos)

Here are 2 examples of the posts - 

https://www.wtfjusthappened.net/articles-videos-grief-afterlife/when-the-bully-wins

https://www.wtfjusthappened.net/articles-videos-grief-afterlife/the-five-stages-of-grief-and-why-they-are-wrong

---

I am following instructions (that seemed really simple) from here but even after following them the reading time never showed up: 

https://www.maryphilip.com/the-blog/how-to-add-a-reading-time-to-your-squarespace-blog

Any insights appreciated!! Thank you.

---

I did both of these:

1st: 

<div class="reading-time"></div>

2nd:  I tried to add to an individual post when it didnt work on all of them and this didnt work either

<div class="reading-time"></div>

15 minutes ago, LizLiz6 said:

I am following instructions (that seemed really simple) from here but even after following them the reading time never showed up: 

You don't appear to have followed the remaining steps in the article, or you have since removed the code.

37 minutes ago, paul2009 said:

You don't appear to have followed the remaining steps in the article, or you have since removed the code.

Hi Paul. Thanks for replying. I didnt' remove the code. I can't figure out what steps I didn't follow. Any insights?! Thank you!!

I did this - when I tried to add it to all blog posts (I checked for the obvious - that I didn't save etc)

1- post blog item code injection

When I tried to add to an individual. 

On 4/25/2021 at 3:35 PM, LizLiz6 said:

Site URL: https://www.wtfjusthappened.net/

Hi. I am trying to add "reading time" to my blog posts (under articles and videos)

Here are 2 examples of the posts - 

https://www.wtfjusthappened.net/articles-videos-grief-afterlife/when-the-bully-wins

https://www.wtfjusthappened.net/articles-videos-grief-afterlife/the-five-stages-of-grief-and-why-they-are-wrong

---

I am following instructions (that seemed really simple) from here but even after following them the reading time never showed up: 

https://www.maryphilip.com/the-blog/how-to-add-a-reading-time-to-your-squarespace-blog

Any insights appreciated!! Thank you.

---

I did both of these:

1st: 

To add to all blogs, go to the Blog’s Page Settings, click Post Blog Item Code Injection and add the following:

Copy Code

<div class="reading-time"></div>

2nd:  I tried to add to an individual post when it didnt work on all of them and this didnt work either

1. Add a empty placeholder for content to go: Add a code block where you want it to go, delete the dummy content and paste in the following:

To add it to each blog manually add the following to a code block to each blog:

Copy Code

<div class="reading-time"></div>

Not sure if you figured this out, but I just did it on my site. I think what Paul meant is that you only followed Step 1, which gives you multiple options depending on how you want the reading time to appear.

You still need to do the following for the text to actually display on your posts:

• Step 2 (Go to Settings > Advanced > Code Injection and paste the following into the Header...) 
• Step 3 (Change the design to your liking. Go to Design, click Custom CSS...). This step has 2 options for you. 

I hope this helps!

On 4/25/2021 at 12:52 PM, paul2009 said:

You don't appear to have followed the remaining steps in the article, or you have since removed the code.

I know this is old, but I'm wondering if anyone knows how to make the reading time appear at the top of the blog post and in the preview? Thanks!

<script>
document.addEventListener("DOMContentLoaded", function() {
    var blogPosts = document.querySelectorAll('.blog-item, .summary-excerpt');

    blogPosts.forEach(function(post) {
        var words = post.innerText.split(' ').length;
        var readingTime = Math.ceil(words / 200); // Average reading speed is about 200 words per minute

        var datelineLink = post.querySelector('.entry-dateline-link');
        var readingTimeElement = document.createElement('span');
        readingTimeElement.innerText = 'Estimated reading time: ' + readingTime + ' min';
        readingTimeElement.style.color = '#a59896'; // Set the color of the text
        readingTimeElement.style.display = 'block'; // Ensure the reading time appears on a new line
        datelineLink.parentNode.insertBefore(readingTimeElement, datelineLink.nextSibling);
    });
});

</script>

change .blog-item, .summary-excerpt to your ID's 

Hi everyone,

I am having some issues modifying the codes above to add reading time to blog posts as part of the blog meta item.

1) I initially used the script Oleg provided but it did not work

2) I then went back to the script from another post and successfully put the reading time under the blog title (screenshot 1)

3) I then modified the JS script in Code Injection > Header to append to blog-meta-item instead of blog-item-title. The results are wonky (screenshots 2 and 3) and I was unable to fix it after multiple tries

I am unfamiliar with JS so would appreciate any help. Basically, I would like to add the reading time "x Min Read" under the date + author name of the blogpost with the same paragraph break / padding-bottom / spacing before the blog content (screenshot 1 - boxes in red)

Website: www.agereconsulting.com

Password: test_help

Thanks again!

P.S. For reference, the codes in Code Injection > Header

Quote

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
  $(function () {
    var txt = $("article")[0].textContent,
        wordCount = txt.replace( /[^\w ]/g, "" ).split( /\s+/ ).length;
    var readingTimeInMinutes = Math.floor(wordCount / 228) + 1;
    var readingTimeAsString = readingTimeInMinutes + " Min Read";
    $('article .reading-time').appendTo('article .blog-meta-item');
    $('article .reading-time').html(readingTimeAsString);
  });

</script>

Post Blog Item Code Injection

Quote

<div class="reading-time"></div>

Design CSS

Quote

.reading-time {
  color: #C171A7;
  font-size: 13px;
  font-family: 'montserrat'
}

On 7/6/2023 at 7:46 PM, ACHK said:

Hi everyone,

I am having some issues modifying the codes above to add reading time to blog posts as part of the blog meta item.

1) I initially used the script Oleg provided but it did not work

2) I then went back to the script from another post and successfully put the reading time under the blog title (screenshot 1)

3) I then modified the JS script in Code Injection > Header to append to blog-meta-item instead of blog-item-title. The results are wonky (screenshots 2 and 3) and I was unable to fix it after multiple tries

I am unfamiliar with JS so would appreciate any help. Basically, I would like to add the reading time "x Min Read" under the date + author name of the blogpost with the same paragraph break / padding-bottom / spacing before the blog content (screenshot 1 - boxes in red)

Website: www.agereconsulting.com

Password: test_help

Thanks again!

P.S. For reference, the codes in Code Injection > Header

Post Blog Item Code Injection

Design CSS

 

You can add this code under

<style>
  .blog-meta-item--author .reading-time {
    display: none !important;
}
</style>