Random Quote Widget for Blogspot

Now it’s time for descent into geekery as a distraction from other things…

I have a lot of quotations collected, and I’m always harvesting more. I’ve collected them in various databases over time, from hand-rolled FileMaker to things like EagleFiler and Yojimbo.

The problem was that, if I wanted to share them with anyone, I had to somehow export them and reformat them as HTML, then post that on the Web somewhere, and then update that HTML whenever I found new quotes, and… ugh. I wanted a way to generate a single random quote, and to do it on this blog (which is hosted by Google Blogger/Blogspot).

For the attention-deficit crowd, click this button and follow the instructions on the next page:

That’s it; you should see a widget similar to the one on this page on your own Blogger page.

If you want to know how it works—perhaps you dislike my raving-libertarian streak and want to use your own selection of quotes—read on.

There are a lot of random-quote widgets out there on the Web, but the ones I found had a common architecture: they’d invisibly load all of the quotes in the background, then selectively turn on visibility for one random entry. That works for 12 quotes; it won’t scale to 1000 without unacceptable impact on page-load times.

The first step was to get the quotes into the “cloud”. I chose to use DabbleDB since they offer free service for data that will be released under a Creative Commons license.

So I set up a simple-stupid database with only two fields: “Quote” and “Author.” I thought of getting fancy with dates and sources and stuff, but simplicity won out. Now I had to figure out a way to extract a single quote (and author) from that database.

DabbleDB has a JavaScript API documented here. Actually, their documentation is lousy, but their tech support is great. And if you inspect enough examples from their forum, you can see what’s going on.

After a bit of trial-and-error, I wound up with the following code:


<!— aggregated, debugged, and © 2008 by Stephen Fleming —>

<!— http://www.stephen.fleming.name —>

<!— quotes hosted by DabbleDB: http://stephenfleming.dabbledb.com —>

<script src="http://dabbledb.com/scripts/api.js" type="text/javascript"></script>

<script src="http://stephenfleming.dabbledb.com/schema/quotationdatabase/65730579" type="text/javascript"></script>

<script src="http://stephenfleming.dabbledb.com/publish/quotationdatabase/6d376a72-5e76-41b2-a175-637f75296336/allentries.json" type="text/javascript"></script>

<script type="text/javascript">

var entries = Dabble.view('All entries').entries;

var fields = Dabble.view('All entries').fields;

var i=Math.floor(Math.random()*(entries.length+1));

<!— print the quotation —>

document.write("<p><span style='font-family:Georgia; font-size:11pt;'>");

entries[i].writeValue(0);

document.write("</span><br /><br />\n");

<!— print the author if not blank—>

if(entries[i].values[1].length>0)

{

document.write("<span style='font-family:Georgia; font-size: 9pt; font-style:italic;text-align:right;'>—\n");

entries[i].writeValue(1);

document.write("</p></span>\n");

}

scroll(0,0)

</script>

<span style="font-family:verdana;font-size:8pt;color:#333333;">

See my complete collection of quotes <a target="_blank" href="http://www.stephen.fleming.name/quotes.html">here</a>.

</span>

The DabbleDB bits are eye-watering but their site gives you a good walkthrough on how to configure them. After that, it’s just simple JavaScript to pick a random entry, display the quotation and (if an author is identified) its author. Miscellaneous formatting and prettification, of course.

I saved this file as ‘random_quote_id.html‘; I used my Google Apps space, but any Web-accessible server should do. You’re welcome to link to it.

Blogger/Blogspot is a bit particular about what it will accept in its widgets, so again, after some trial and error, I established that this will work:

In Blogger, go to Customize > Layout > Page Elements and click on “Add a Page Element”. Select “HTML/JavaScript” and paste in the <iframe> code.

You can see the results to the right of this page. I’m irritated that it’s apparently difficult/impossible to create an iframe that dynamically resizes itself to its content. I spent a couple of hours following various threads on the Internet and trying code snippets, but I couldn’t reproduce the desired behavior inside Blogger.

I settled for a medium-sized iframe (175 pixels) set to display a scrollbar if the random quote is too long to fit. That doesn’t make me happy, and if anyone knows a better solution, please email me.

This isn’t the cure for cancer, but it solves a problem that I haven’t seen solved this way anywhere on the Web. If you use it, I wouldn’t mind a link from your site back here. Let me know if you find bugs or make improvements!