Most-quoted Obama quote widget

Here is a new widget that employs the quotes feed within Google News to display one frequently quoted Barack Obama quote. If it’s installed on iGoogle or Orkut, it also displays a canvas view showing more quotes. Canvas view is possible, since October, in the OpenSocial spec. I’ll tell you how I made it.

The gadget XML file displays this page made with Expression Engine (my CMS) in the home view shown at left. I’ve used Expression Engine’s built-in Magpie feed parser to show the top item in the Google News quotes feed.

EE’s intelligent implementation of Magpie helped me pick apart Google’s quotes feed, which makes formatting a little tough if you stick to the standard description element. Within the feed they wrap “description” in an HTML table including elements using some of Google’s custom namespaces. Is that a good practice? Seems a little selfish to me, considering that a lot of the automatic feed rendering services can’t use anything except description, and a table will almost certainly mess up the output in many situations.

EE will recognize any standard or non-standard element in a feed, so it was just a matter of staring at the source and finding what the heck was meant by the snippet element or the occurrences element, and asking EE to render them in the right place.

For EE heads, my template code looks like this:

{exp:magpie url="http://news.google.com/news?hl=en&tab=wn&as_qdr=d&as_drrb=q&as_mind=29&as_minm=12&as_maxd=30&as_maxm=12&nolr=1&output=rss&qsid=tPjE5CDNzMicGM" limit="1" refresh="60"}
    {items}
    <div class="quote">{snippet}</b>
    </div>
    <br />
    <div class="howmany">Quoted {occurrences} times by news outlets like <a href="{link}" target="_top">this</a>.
    </div>
    <br />
    {/items}
{/exp:magpie}

For the iGoogle canvas view I display this page, showing the top 5 quotes, and in this case I did output the whole tabled description element. It looks like this within iGoogle:

(Aside: it looks like Screentoaster got its audio recording going. Cool. I’ll have to try it out when I have more time.)

Orkut is Google’s socnet that’s hot among Brazilian users and in my geo community, Indian users. The destination for its full application link leads to the same canvas view used in iGoogle. It has a special view called “Profile” that appears on a user’s profile page and it’s kind of an awkward shape. Looks like this:

Embed the Google gadget in your page or blog, or add it to your iGoogle start page or add it to your Orkut profile.

I also made a page optimized for the iPhone. You can add it to your phone’s home screen by hitting the plus sign button. Did you know you can assign an iPhone icon to a domain by placing a graphic called apple-touch-icon.png in your domain’s web root? Nice, but it doesn’t work so well for me. What if I wanted another icon for some other iPhone page in sidebarstuff.com. Use another domain I guess? Is there an alternative?