Blog

How to show off your old posts

by

8 Comments http://bro.gs/unfa

Back in October we launched yet another design for Dave’s site, pushing out some HTML5 and CSS3 goodness. But as can usually occur, something happened that we didn’t account for. By dropping the year from the date within the posts we had an increased number of comments on those older posts. Although it didn’t necessarily break the site we thought it best to implement a solution.

The Solution

As you may have already seen on the site we have the following appearing above the content on any post older than one year.

Image of what we output in old posts

Rather than mess around with anything already designed and implemented we came up with a solution that is more visual in showing when a post is old or not, along with a friendly message to go along with it.

The Code

Here’s the point of this post, some people have mentioned to Dave that they like the idea so we’re going to put the code here for everyone to use, not that it was protected before. As you may be able to tell the code is written in JavaScript (more specifically jQuery) so is code anyone could have access to anyway, but why make people go hunting when we can make their lives a little easier.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

if($('#single').length > 0){
	var postdate = $('#single article time').attr('datetime');
	var postdatesplit = postdate.split("-");
	var year = postdatesplit[0];
	var month = postdatesplit[1];
	var day = postdatesplit[2];
	var today = new Date();
	var one_day=1000*60*60*24;
	var olddate = new Date();
	olddate.setFullYear(year,month-1,day);
	var datediff = Math.ceil((today.getTime() - olddate.getTime())/(one_day));
 
	if(datediff > 365){
		$('.entry').prepend('<div id="old"><h6>Old</h6><p>This post was written in '+year+' and is '+datediff+' days old, so is a bit old now.</p><p>Feel free to read and comment on this post, just remember some things change with time and the facts in this post might not be accurate anymore.</p></div>');
	}
}
1
2
3
4
5
6

<body id="single">
	<article>
		<time datetime="2011-02-09"><span>9</span> Feb</time>
		<div class="entry"></div>
	</article>
</body>

Using Time

As we built Dave’s site trying to use as much HTML5 as we felt we could safely use we plumped for using the new <time> tag wherever we were specifying a date. What this tag does is provide us the ability to show a date in the format we require whilst including in the ‘datetime’ attribute a date that is machine readable, in the format YYYY-MM-DD. You can also include hours, minutes and seconds if you wish.

Using the time tag also works great as it gives us a defined date format in which to work with, but not everyone is rocking HTML5 yet so you can easily change the html to this:

1
2
3
4
5
6

<body id="single">
	<div class="post">
<div class="time" title="2011-02-09"><span>9</span> Feb</div>
<div class="entry"></div>
	</div>
</body>

and the JavaScript to this:

1

var postdate = $('#single .post .time').attr('title');

Where you put the id of single doesn’t matter so much but it has to appear only on pages that show only a single post, not multiple posts.

Why JavaScript?

We could implement the solution in what would be a simpler form by using server-side code like PHP, but as you will know this then makes this content indexable to Google (read search engines in general). As this content is of no relevance to Google and we don’t want it appearing in any descriptions on Google we use JavaScript instead.

There you go

That’s it, feel free to go and use the code on your site, improve it where you can and also ask if you have any queries.

If you do use it then please add a comment below with a link, it would be great to see how you use it.

8 Comments

  • hobo 861 days ago

    http://www.hobo-web.co.uk/seo-blog/

    Nice one :) will test it out

    Reply

  • Dan Cryer 861 days ago

    http://www.dancryer.com/

    This is great, definitely going to add it to my own site.

    It’s funny, as just prior to reading this post, I was replying to an email in response to a “freelance developer needed” post I wrote in December ’09. They thought there was a possibility I’d still be looking, as my site just said “December 18″ with no year attached.

    Reply

  • Jim Rudnick 861 days ago

    http://www.canuckseo.com

    While I’m sure many of your readers will use this methodology, for ourselves as we use a WordPress blog site, we merely installed “Tweet Old Post” as a fully configurable Plugin and it works nicely eh!

    :-)

    Jim

    Reply

  • Kean Richmond 861 days ago

    @jim Thanks for that. Though that plugin gives a good way of promoting old posts does it give the functionality to easily show visually to users that the post you’re tweeting out is an old one, rather than something new?

    Reply

  • Jennifer 859 days ago

    http://scriptygoddess.com

    I just found an old article and saw that at the top of the page and went poking around your site to see if you talked about it. How cool. I can’t tell you what a pet-peeve it is of mine when people remove dates from their posts and you have no idea if the content is still relevant or not! THANK YOU!

    Reply

  • Chris 859 days ago

    http://www.rootswebsolutions.com/

    This is definitely a useful tool, I’m going to add it to one of my well established sites this weekend and give it a trial run.

    Reply

  • Evgeni Yordanov 846 days ago

    http://seoptimizacia.com/

    It looks like I’ll be able to implement it on my blog. Of course I won’t go with the HTML5 version… at least not for now. But thanks for the HTML5 version as well.

    Reply

  • Dave from The Longest Way Home 845 days ago

    http://www.thelongestwayhome.com/blog/

    It would actually be great to see this as a wordpress plugin, with the option to have it show on posts over XX amount of days. :)

    Reply

Write your comment

Optional

The Bronco Family
Work With Us