Now it’s time for descent into geekery as a distraction from other things…
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.
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 —>
var entries = Dabble.view('All entries').entries;
var fields = Dabble.view('All entries').fields;
<!— print the quotation —>
document.write("<p><span style='font-family:Georgia; font-size:11pt;'>");
document.write("</span><br /><br />\n");
<!— print the author if not blank—>
document.write("<span style='font-family:Georgia; font-size: 9pt; font-style:italic;text-align:right;'>—\n");
See my complete collection of quotes <a target="_blank" href="http://www.stephen.fleming.name/quotes.html">here</a>.
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:
<iframe frameborder="0" height="175" src="http://www.stephen.fleming.name-a.googlepages.com/random_quote_id.html" id="SRF_quote" style="overflow:visible;" scrolling="yes" width="100%" name="SRF_quote"></iframe>
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!