TypePad hacks: Display multiple random entries

Please excuse me while I geek out for a moment. I've added a feature to the individual entry pages of this site that displays links to 5 random posts from the archives. It requires a bit of a workaround for TypePad, a work around that I spent a while searching for. This won't apply to the majority of you, but I'm posting it here to save the next person a bit of time.

The hows and whys are after the jump.

The why of it is pretty straightforward. Many of the visitors to this site arrive via sites such as tastespotting and food gawker, which land them at individual entries. Some leave a comment, some poke around the rest of the site, but for the majority it's, "click, scan, next". I know this because that's exactly how I am with a lot of sites I visit through tastespotting.

The goal is to convert the scanners into clickers, and with any luck, repeat visitors. The required ingredients is of course a good-quality site, but for people to appreciate your hard work they need to be aware of it. A lot of blogs display photos or entry titles of archives entries in the sidebar, which both makes the site look good and encourages people to click around. TypePad has the ability to show display the x most recent entries, but I'm not a fan. If you're viewing it on the main page then it's completely redundant, and even on a deeper page if you've seen anything already you've probably seen those.

Displaying x random entries should be a piece of cake, but it's not. Other services such as Wordpress seem to offer this, but TypePad are less flexible. They offer an easy way to display one random entry, but if you do that 5 times you're likely to get repeats.

I tried coding a solution myself using JavaScript, but it was surprisingly hard. In the end I modified some code I found on a forum here, so credit goes to the user dawsonk. Be aware that this can only be used by users who have access to Advanced Templates. The code itself is below:

<script language="javascript">

entry = [<MTList name="Food photos">"<a href=\"<$MTListItem field="note" encode_js="1"$>\"><img src=\"<$MTListItem field="label" encode_js="1"$>\" class=\"random\" /></a><p></p>",</MTList>]
var j = 5;

entry.sort(function (a, b) {
return Math.round(Math.random() * 2) - 1;
});
entry.splice(0, j);
for (i=1;i<=j;i++)
{
document.write(entry[i]);
}

// Written by Tim of http://thesecondpancake.typepad.com, but
// the actual functionality uses code adapted from dawsonk of
// http://board.flashkit.com/board/showthread.php?t=732410

</script>

So there it is. Place that snippet of code wherever you want your random entries. There are two things that can be modified to suit your needs: the number of random entries, and how those entries are displayed. To modify the number of entries, on the line var j = 5;, change the default number (5) to whatever you like.

To modify the way your entry is displayed, modify the line beginning entry =. This will require familiarity with TypePad's advanced templates, keeping in mind that quotation marks should be preceded by a \ to ensure the script keeps running, and that encode_js="1" should be included with each variable you add to make sure TypePad generates content that won't break the script. Enjoy!

The comments to this entry are closed.