Random Post Link Addon Script for Blogger

This addon has been updated. Please use the new version.

You may have noticed a new feature on my blog, namely the addition of a random post message at the top. I programmed a cool Javascript addon to accomplish this, and I've decided to share it with the world.

It is made up of two main parts. First, place the following code where ever you want the random message to appear:

<div id="extract_output">
</div>

Now place this code section below both the blog archive and the section that you just placed. The best place is probably the bottom of the page. The script will retrieve a random post from your blog archive and display a message advertising it.

<script type="text/javascript">
/*<[CDATA[ <!-- */
//Beginning dynamic archive extract code.

//Locate the archive list.
var archive = document.getElementById("ArchiveList");
var archive_html = archive.innerHTML;
var links = [];

var introArray = new Array(
"Have you read ^?",
"Check out ^.",
"Looking for something to read? How about ^.",
"My blog says: \"Look at ^\"",
"I dredged up an old post just for you: ^",
"Please look at ^.",
"I wonder if you'd like to read ^?",
"You might enjoy reading ^.",
"Look what I found for you: ^",
"My blog has a post just for you: ^."
)

//Now search for child elements that have the class "posts"
//These contain the links that we want to extract.

function random_number(range)
{
return (Math.round(Math.random()*200000)%range);
}

var found_place = archive_html.search('<');

while(found_place!=-1)
{
var extract_string = archive_html.substring(found_place,found_place+10);

//Check to see if we found the beginning of the link section we want.
if(extract_string.localeCompare("<ul class=")==0|
extract_string.localeCompare("<UL class=")==0)
{
//Found the link list, now go through and extract the links.
var inner_search = archive_html.search("<");
if(inner_search==-1)
{
links[links.length]="(Failed)";
exit;
}
var loop_flag = true;
while(loop_flag)
{
if(inner_search==-1)
{
exit;
}
else
{
if(archive_html.substring(inner_search,inner_search+5).localeCompare('</ul>')==0|
archive_html.substring(inner_search,inner_search+5).localeCompare('</UL>')==0)
{
//Finished with this archive section so exit.
loop_flag = false;
}
else if(archive_html.substring(inner_search,inner_search+2).localeCompare('<a')==0|
archive_html.substring(inner_search,inner_search+2).localeCompare('<A')==0)
{
//Found a link to extract, now find the end of the link.
var end_link = archive_html.search("</a>")+4;
if(end_link==3) //Returns negative one if fail, so +4 becomes 3.
{
//Must be Internet Exploder, do a capital search.
end_link = archive_html.search("</A>")+4;
}
//Do the slice
links[links.length] = archive_html.substring(inner_search,end_link);
}
}
//Cut out opening just found.
archive_html = archive_html.substring(inner_search+1);
//Search again.
inner_search = archive_html.search('<');
}
}

//Trim out the opening we just found.
archive_html = archive_html.substring(found_place+1);
//Search again.
found_place = archive_html.search('<');

}

//Great, now we have a list of links from the archive
//Do something with them.

var output_string = introArray[random_number(introArray.length)];

output_string = output_string.replace("^",links[random_number(links.length)]);

//Pick a random link and put it in the output area.
document.getElementById("extract_output").innerHTML = output_string;

/* ]]> --> */
</script>


Further notes: Your blog archive widget must be organized by months so that the code can pull out the links.

Hopefully this can be of some help to you as a blogger. If you like this script and decide to use it on your blog please link back to my blog or to this post specifically. I thank you in advance.

Your Rating:
Inkweaver Review 2008-09-09T09:56:00-05:00

44 replies so far. What are your thoughts?

-Flickzzz- said...

Fantastic job!

If it's possible to make rotating links from blog archive, is it possible to use this script to make rotating ad banners (for example AdSense and AdBrite)?

Thanks!

NathanKP said...

It is quite possible if you modified it to select your ads instead of the archived post links.

NathanKP

Ingrid said...

Thank youuuu this article was really useful! :) I will definitely try it, thanks soo much! :)

Susan Helene Gottfried said...

I need to turn the Tour Manager onto that because there's a lot of fiction in my archives that my readers would dig -- if it were easy to find.

Thanks for all the hard work you must have done with that!

NathanKP said...

I'm glad you appreciate it. Please let me know if you have any trouble whatsoever.

NathanKP

template-godown said...

hi, thanks for the script. may i post it on my blog?

also is it possible to not only the title? it might more useful if this script able to show full post or even some word about the post.

regards,
gre-

NathanKP said...

Yes, you may post the script on your blog if you link back to this post. Please show your appreciation by mentioning where you got the script from.

At this time the script can only show the title because it gets the titles from your blog archive widget, which only contains titles, not post content.

NathanKP

template-godown said...

hi nathan,

of course i will put your link as the source.

by the way, i try to install this but cannot works.

the code cannot be parsed well on xml platform.

will you please guide me?

thank you.

NathanKP said...

Okay, first of all, are you using Blogger? You must be using Blogspot and your page must have an Blog Archive widget on your page, set up to be hierarchical with monthly frequency.

Also make sure that the second code section is below the blog archive widget, and that the first code section is above the second.

What exactly do you mean by "the code cannot be parsed well"?

NathanKP said...

I just realized part of the problem. The script does not work with Windows Explorer, because the Microsoft people don't stick to the standards.

This is yet another proof of why Mozilla Firefox is better. I think I know how to fix it however, so I'll get a new version out on this upcoming Thursday.

I'm sorry about the inconvience you may have experienced, but please check back in a couple days for the new version.

NathanKP

NathanKP said...

Okay, I have found a work around for the Interent Explorer bug. The script should now work with all browsers.

Please let me know if there are any more problems.

NathanKP

طلاليات said...

this script is genius, thanx man .. it worked perfect with the arabic text ..

i did change the "var introarray" labels if thats ok with u ..

NathanKP said...

That is definitely fine with me. If you appreciated the script please link back to my blog.

NathanKP

طلاليات said...

thanx mate .. and yes, i did do that ..

NathanKP said...

You're welcome. :)

fairyhedgehog said...

I love this widget. I've reviewed this post on StumbleUpon and put the widget on my site. I've added the credit and the link at the foot of the page - are you OK with that or do you want it higher up?

NathanKP said...

That is fine with me! Thank you very much.

NathanKP

Shivam said...

Thankx man..!
Can your script provide a short description of the randomly picked article?

NathanKP said...

I'm sorry, but no. It only pulls out post titles, not post content.

Emir ALP said...
This comment has been removed by the author.
Emir ALP said...

second code pasted before archive widget but
XML error :The content of elements must consist of well-formed character data or markup.

NathanKP said...

You must put the code in your blog via the Add element section on the Layout page. You can't add the code directly to the template. Go to layout and put in a new HTML/Javascript element. Then paste the code into that element.

Code put directly into the XML of the template will always fail because Google does not allow it.

Emir ALP said...

Thanks NathanKP!
How can i list old post by fives,ten ...?
Best regards.

NathanKP said...

Try replacing the end below the comment with this:

//Great, now we have a list of links from the archive
//Do something with them.

document.getElementById("extract_output").innerHTML ='';
var number_of_links = 5;

for(var counter=0; counter<number_of_links; counter++)
{

var output_string = introArray[random_number(introArray.length)];

output_string = output_string.replace("^",links[random_number(links.length)]);

//Pick a random link and put it in the output area.
document.getElementById("extract_output").innerHTML += output_string;
}

Just modify the variable number_of_links to equal the number you want. Please let me know if this does or does not work.

Emir ALP said...

Nathan;
i try it but not working no have any output!

Emir ALP said...

Nathan;
Sorry, its working, i forgot last bracket.
Again thanks.

Ahlan wah ZahfraN said...

Hi your latest script, which can post old posts by 5 or 10 works really great. Except that can't insert a newline break. Each post sticks to one another? how do I insert a newline break?

I tried \n but it doesnt work. Thanks in advance.

NathanKP said...

The newline in HTML is <br />

That should do it for you.

Nathan

CommanderCacho said...

Hi,

This is a great script, but I've been having one minor problem. The random link(s) generated never seem to be more than 3 months old.

My archive widget is hierarchical and sorted monthly. Maybe the inner_search doesn't traverse the whole ArchiveList?

Any help would be appreciated, and I don't mind leaving the script as is with attribution of course, thanks.

NathanKP said...

Sorry, Commander Cacho, but this is a limitation of Blogspots. They don't provide links beyond 3 months in the archive widget. Any older than that are loaded via AJAX when the user clicks.

I may one day modify the script to request via AJAX, but that would slow page loads.

Sorry,

NathanKP

CommanderCacho said...

I understand, thanks for the explanation, this thing's still really useful.

NathanKP said...

I'm glad that its of help to you.

Nathan

RW said...

Hi, came across this post and I put it on my blog, if you dont mind that is. made a few minor changes too. thanks for the great script!

NathanKP said...

I certainly don't mind RW. I hope that you enjoy it.

Nathan

Ari_1965 said...

I can't get this to work at all. I have the first extract output code inserted at the bottom of each post automatically by using Settings/Formatting. Then I have the longer piece of code inserted in the sidebar as an HTML element right below my Blog Archive widget. But it's not working. What am I doing wrong?

This seems like such a nifty hack--I would really like to use it. Thank you in advance for your reply.

NathanKP said...

I have corrected the new, updated version. This older version only works on blogs that have the archive widget set up properly. Please use the nwe version at:

http://experimentgarden.blogspot.com/2009/06/random-post-link-addon-for-blogger.html

Leonard said...

Very useful information! Thank you.

I have one question, off-topic, how can I add "subscribe to comments" (be announced by email if comments on this topic appear) button, just near the post comment (or anywhere in that area) button; "ticking" (checking) button style?

Thank you in advance!
And keep up the Good Work!

Leo

p.s. I want to add this subscribing form for users who are not signed in in a google account. Just a simple subscribing tool for comments, for all users.

NathanKP said...

In answer to your question, I don't think that is possible. A checkbox wouldn't know where to send the subscriptions too, unless the person was logged in.

Even if the person was logged in, your code can't have access to their info. The only reason a "Subscribe to Comments" link is possible beneath the comment form is because the comment form is technically not on your blog.

It is a page on Google's server which is copied to your blog. So your blog has no access to the private login data of the commenters who comment.

This also means that it has no access to their email address, or any other data that it could use to send subscriptions to them.

The only thing you could do is put a link to the comment feed for the post, but it couldn't be a checkbox, and the person would have to add the feed to their feed reader or aggregator service manually.

Leo said...

Thank you for the very useful information and replies. I understand what you're saying. I see now... The only way to add those kind of subscribing forms for comments (checkboxes, a.o.) is possible if you have your site (blog) put on a private server, with a private domain. That explains... I think. Because the only places I found those subscribing forms I mentioned above, were on private domains (hosted on other servers than blogger or other official blog platform).

Anyways, keep up the good work!

Deepak said...

Hey dude, u made my day!!
Many a thanks!!
:)

NathanKP said...

I'm glad to know that it works for you. You are welcome to use it.

Muhammad Azeem said...

This is a nice article..
Its very easy to understand ..
And this article is using to learn something about it..
asp.net, c#, javascript
Thanks a lot..!

Anonymous said...

WOW just what I was searching for. Came here by searching for
Tuition Tutor
Also see my page :: Singapore Tuition

Anonymous said...

I love looking through a post that will make men and women think.

Also, thanks for allowing me to comment!

Also visit my web page: jeremy scott wings hoodie
Here is my weblog :: jeremy scotts