Adding "On This Day" to Blogger

Latest update info here.

All the new features added by Blogger in their redesign have improved the design of the blogs no end with lots of benefits for those who have switched over. We implemented all the things mentioned in that article within hours of the redesign being launched and have been adding further hacks since. I've been meaning to write how-to posts for quite a while now and have finally got around to doing one. What with this and the long fabled Victoria Tunnel report allegedly coming on the same day you must be looking out of the window for the flying pigs now.

The first hack to be written up is the On This Day hack. That's because it is the simplest one to do, and by extension, the easiest for me to write up. So what does this hack do? Can you see the On This Day links at the top of the page? The interesting bit is what they link to - the On This Day pages at various websites which have famous events, births, deaths and observed holidays from around the world many of which are linked to good articles on the subject. The sites currently linked to are:

• BBC
• Wikipedia
• The History Channel
• Daily Bleed
• Internet Movie Database
• New York Times
• This page!

So for the minimal effort of inserting a little bit of code in your template you automatically get a link of the day style thing for every day you publish a post. Note that you don't need to be using the new designs to use this hack - it works equally well on the old templates too.

Onto the hack itself. The first stage is to ensure your dates are in the correct format. To do this go to the dashboard and then go to Settings / Formatting as shown here.

Set the date this format:

Set the date language to English. Mine is English UK but any of the English options should work. It may even work with other languages but I've never tried it. If you do want to try a different language make sure the date format you choose has the month name and year to ensure the script has the best chance of turning the date into a link.

Save your changes.

Now we are going to edit the template to put the JavaScript code in to do the date linking. Before you start you should back up your current template just in case there are any problems when you are implementing it. Done that? OK. Copy the following code and paste it just before the </HEAD> tag in your template.

<script type="text/javascript" language="javascript">
function WikiOnThisDay(dateToMangle)
{
  var strMonthNames=new Array(
   "January","February","March","April","May","June",
   "July","August","September","October","November","December"
   );
  var DTM = new Date(dateToMangle);
  
  var nMonth = DTM.getMonth(); // 0 - 11
  var nDate = DTM.getDate(); //1-31
  var nYear = DTM.getFullYear();
  var strMonthNameProper = strMonthNames[nMonth];
  var strMonthNameLower = strMonthNameProper.toLowerCase();

  nMonth+=1;
  var MM = nMonth<10?"0"+nMonth:nMonth;
  var DD = nDate<10?"0"+nDate:nDate;
  
 var BBC =
  "<a href=\"http://news.bbc.co.uk/onthisday/hi/dates/stories/" +
  strMonthNameLower + "/" +
  nDate + "/default.stm\">BBC</a>";
 var Wikipedia =
  "<a href=\"http://en.wikipedia.org/wiki/" +
  strMonthNameProper + "_" +
  nDate + "\">Wikipedia</a>";
 var HistoryChannel =
   "<a href=\"http://www.historychannel.com/tdih/tdih.jsp?month=" +
   (10272953+nMonth) +
   "&day=" +
   (10272965+nDate) +
   "&cat=10272946" +
  "\">History Channel</a>";
 var IMDB = 
  "<a href=\"http://www.imdb.com/OnThisDay?day=" +
  nDate + "&month=" +
  strMonthNameProper +
  "\">IMDB</a>";
 var DailyBleed =
  "<a href=\"http://www.eskimo.com/~recall/bleed/" +
  MM +
  DD +
  ".htm\">Daily Bleed</a>";
 var NYTimes = 
  "<a href=\"http://www.nytimes.com/learning/general/onthisday/" +
  nYear +
  MM +
  DD +
  ".html\">NY Times</a>";
 var HowTo =
  "<a href=\"http://newlinks.blogspot.com/2004/06/" +
  "adding-to-blogger.html\">How To</a>";
 return  BBC + " " + Wikipedia + " " + HistoryChannel + 
 " " + DailyBleed + " " + IMDB + " " + NYTimes + " " + HowTo;
}
</script>

Now find this bit of code in your template...

<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>

...and replace it with this code.

<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$>
<br />
<small>
On this day:
<script type="text/javascript">
document.write(WikiOnThisDay("<$BlogDateHeaderDate$>"));
</script>
</small>
</h2>
</BlogDateHeader>

You can put any text or HTML tags you want around the JavaScript call so you can make it look exactly the way you want it to.

You may want to only display links for one or two On This Day sites so here's how to change what is displayed. First follow the installation above then find these lines in your template:

return  BBC + " " + Wikipedia + " " + HistoryChannel + 
 " " + DailyBleed + " " + IMDB + " " + NYTimes + " " + HowTo;

The BBC, WikiPedia, etc bits are the code for the links, the bits in quotes are just to put a space between them and the + symbols join it all together. Just remove the bits you don't want and any spare +.

Here are some sample variations. Note if I add any more On This Day links to the code I won't be putting more samples here - it should be easy enough to work out from the samples below:
BBC Only

return BBC;

Wikipedia Only

return Wikipedia;

BBC and Wikipedia

return BBC + " " + Wikipedia;

Save your changes. You can now either republish the blog to apply the changes to the whole blog or just wait until you post next to apply the changes to any new pages created.

This script has been improved and added to extensively since it featured on the Blogger Hacks page mainly due to suggestions in the comments. If you have any ideas for improving it further please leave a comment. It originally only featured the WikiPedia link but at the time of writing it now links to five sites. More would better so if you know of any sites that have On This Day pages let me know and I'll try and add them. If you've installed an earlier version of the code just paste the script above directly over the old one in your template.

Important Bit! The conditions of use of this script have changed since I first published it as many people were using the script without crediting us. This work is licensed under a Creative Commons License.

This means you are pretty much free to do whatever you want with this script. However I've reserved the right to be credited for the code. To satisfy that condition you must leave the How To link in the code AND/OR link to us either in a post or in a blogroll.

If you're wondering at my use of 'us' rather than 'me' in the previous paragraph it's because this is a group blog with varied types of posts on all manner of subjects - so check out the rest of NewLinks!

Here is a list of blogs that have implemented the code and credited us. I was manually tracking usage but that's taking too much time and effort (I know I've definitely missed some!) so if you want to add your blog to this list please email me with the address of your site at the email address in my profile.
Look At This, Councillor Bob Piper, Supermum, Lifetime Gamer, Frugal (contributed a PHP version), Do You Dream In Colour?, My Oozings, The Experiment Lab, gOOg's blOg, Wardy Fireball, Piece of Shep, JACkory's Listening Room, Freedom_from_Censorship, Joe's Town, The Iowa Truth, What It Is Today, Ramblings of a MadMan, Mama's Little Slimen, Mama's Other Little Stuff, Jackington Viego, Online Business Journal, Virres Blog, c0dep0et, the Front Line, News From The Ministry Of Truth, Unmangled Target Smile, Musings from the unemployment line a Multifarious Mind, Baby Tales, Reflective Musings, new and exciting time wasting technologies, King Leonard, The Burning Bush, CNBlog, Random Geek Thoughts, Reservoir Blog, Bwana Bomba, The Leviathan and The Republic, Life In The Shadows, Set Your Intellectual Property Free, .ERN, Half-baked Rhetoric, A Bama Blog, Follow Me Here.

EDIT (3rd Feb, 2005): I've just found out the code I put above didn't work due to a couple of missing lines. The script has now been corrected so if you've installed it since I added the Daily Bleed link then you'll need to copy this script over the top of the script in your template.