randomized quotes

So, there was an old Blogger hack documented in the Blogger help about using Javascript to have a randomly changing description or quote for your blog. When I started upgrading my other blog and playing with the new Blogger feeds, it occurred to me I could improve on it.

This will take a little bit of setup to get going, but once it's done it will be much easier to add new quotes. Or, in my case, if you have a shared blog, the less technical people can still easily contribute quotes without having to know Javascript and understand where in their template the code needs to go.

The technical stuff, for anyone who's interested: it's an AJAX call to the Blogger single-post full entry feed, which uses the Javscript DOM to get a count of list items and display one at random.

How to get it working

Enter your information into the form below, and then add the widget to your blog. There's one thing you need to do before you're ready to add the widget. Create a new post for your quotes and put at least one quote in it now (you can add more quotes at any time). Make sure to format it as a bulleted list-- the script will look for list elements and ignore everything else, so feel free to add other text or whatever you like. Now (this is as tricky as it gets), figure out the post id # of your new post and enter it in the form below. When you are editing the post in Blogger, the end of the url should look like postID=######.

<style type='text/css'> div#randomized-quote li { list-style-type:none;} </style> <div id='randomized-quote'></div> <div id="rndquote-tmp-store" style="display:none;"></div> <script type='text/javascript'> var url = 'http:// .blogspot.com/feeds/posts/full/ '; var xml; function getQuote() { xml = null; if (window.XMLHttpRequest) { xml = new XMLHttpRequest(); } else if (window.ActiveXObject) { xml = new ActiveXObject('Microsoft.XMLHTTP'); } if (xml != null) { xml.onreadystatechange=go; xml.open('GET', url, true); xml.send(null); } } function go() { var parser = null; if (window.DOMParser) { parser = new DOMParser(); } if (xml.readyState == 4){ var xmldoc; if (parser != null) { if (xml.responseXML) { xmldoc = xml.responseXML.documentElement; } else if (parser != null) { xmldoc = parser.parseFromString(xml.responseText, 'text/xml'); } } else { xmldoc = new ActiveXObject('Microsoft.XMLDOM'); xmldoc.loadXML(xml.responseText); } if (xmldoc == null) { return; } var content = document.getElementById("rndquote-tmp-store"); content.innerHTML = xmldoc.getElementsByTagName('content')[0].childNodes[0].nodeValue; content.innerHTML = content.innerHTML.replace(/&gt;/g, '>'); content.innerHTML = content.innerHTML.replace(/&lt;/g, '<'); content.innerHTML = content.innerHTML.replace(/<br>/g, '<br></br>'); content.innerHTML = '<div>' + content.innerHTML + '</div>'; var post; var li = "li"; if (parser != null) { post = parser.parseFromString(content.innerHTML, 'text/xml'); } else { post = new ActiveXObject('Microsoft.XMLDOM'); post.loadXML(content.innerHTML); li = "LI"; } var list = post.getElementsByTagName(li); var count = list.length; var rnd = Math.round(Math.random()*(count - 1)); deepCopy(list[rnd], document.getElementById('randomized-quote')); } } function deepCopy(node, parent) { if (node.nodeType == 3) { var txt = document.createTextNode(node.nodeValue); parent.appendChild(txt); } else { var curnode = document.createElement(node.tagName); for (var i = 0; i < node.attributes.length; i++) { curnode.setAttribute(node.attributes[i].name, node.attributes[i].value); } for (var j = 0; j < node.childNodes.length; j++) { deepCopy(node.childNodes[j], curnode); } parent.appendChild(curnode); } } getQuote(); </script>

Blog:	.blogspot.com
Quote post id #:
Title:
Note: If you don't want a title to display, you'll need to either leave it empty here or (better, if you're up to it, because then when you manage your template you don't have a nameless, unlabeled widget), after you add it use the "edit HMTL" option for your blogger layout, find the new widget (by title is easiest) in your template, and remove the code that displays the title.

---

A couple of caveats...

• Don't expect your quotes to show up in the Blogger preview, since the preview page isn't hosted under your blogspot domain name and most browser don't allow AJAX calls across domains because it's insecure.
• Your post content must be valid xml-- if you have the setting turned on to convert line breaks to <br>s, it may cause problems.
• This widget is only designed to work for blogs hosted on blogspot.
• This code has been tested in Firefox 1.5 and IE6; no guarantees it will work in other browsers.

---

Updated 2007-03-24: content length was limited by Javascript string size (which varies from browser to browser), and truncating the post content makes for invalid xml. Added a fix (storing the content in a hidden div) to get past this size limitation.