Friday, May 04, 2007

Display Random Post

Ever wanted a way to display a random post? Well, now you can :D

First, add the following javascript to your page's header (Template -> Edit HTML)

<script type="text/javascript">
//<![CDATA[
var _yourBlogUrl = "http://purplemoggy.blogspot.com";

function randomPost() {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTotalPostsCallback&start-index=1&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTotalPostsCallback(json) {
var totalResults = json.feed.openSearch$totalResults.$t;
if (totalResults > 0) {
getRandomPostNumber(totalResults);
}
};
function getRandomPostNumber(totalResults) {
var randomNumber = Math.floor((Math.random() * totalResults) + 1);
getRandomUrl(randomNumber);
};
function getRandomUrl(randomNumber) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTheUrlCallback&start-index=" + randomNumber + "&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTheUrlCallback(json) {
var theUrl = json.feed.entry[0].link[0].href;
window.location.href = theUrl;
}
//]]>
</script>

Make sure to replace the _yourBlogUrl variable with your blog's URL.

Then just add the following link anywhere in your page
<a href="javascript:randomPost();">View Random Post</a>


Since this uses JSON feed callbacks, you'll need to make sure that you (at the very least) have summary feeds enabled for your blog.

13 comments:

Игрици said...

Works perfect for me! Thank you so much! That's exactly what I was recently looking for.

protesto said...

Great ;) I've implemented it already.

PurpleMoggy said...

Just as an FYI, if you want to use this as a button you could do something like:

<input type="button" onclick="randomPost();" value="View Random Post"/>

Guradian said...

hi,
i've translated this post into Chinese and put it in my blog(guradian.blogspot.com).
Is this OK?

PurpleMoggy said...

@Guradian

Yup, that's fine

Pottschalk said...

Hello is it possible to display more than 1 Random Result ? I would really like the result of the randomize as 4 Posts....! thank you...and second question...
Will there be a function that automatically randomizes the posts on reload ? That would be sooo great ! Best wishes and regards to your work !
Would really like to read from you

Pottschalk@pottschalk.de

Tom said...

Nice job! It looks like the random function includes all items each time, including those that have already been displayed. Is there an easy alteration that would make it "random without replacement"?

joey b said...

is it possible to automatically display a random post on the main page (without the user having to click a link)?

BlogHer said...

Hello,

I have been trying to add your random post widget but no luck. I'm not good at this. I have been pasting the HTML in Layout, Add a Page Element. Is this okay or is there somewhere else I should install it?

Thank you.

BlogHer said...

If I add someone here--who knows how to do this--to my blog as moderator would that someone install the random post widget for me?

Thank you.

B 4 CH said...

Very nice, might try to add this to my blogs. Thanks for the undoubted hard work that went into building and testing this

AnakMuda said...

Ok..i'll try it... :D
thanks

Atomic Justice said...

thx... though, the original code (the larger portion) didn't work for me. I had to view your page source and steal that one ;)

Take care...