Fancy Charity Counter

Date: Oct 06, 2009

We badly wanted to be able to show off how generous people have been when they donate to our two charities, so we added a counter at the top of the site. The tricky part was "how do we update the counter?"

Let me rephrase that: as nerds, how cool would it be for the counter to automatically calculate the donations from the donation home pages? (Frank Water and OLPC)

To see a demonstration, donate now and the counter above automatically changes. Do it. Do it for the children.

Nerd's Explanation

This little bit of magic is done using JavaScript, Yahoo Pipes and RSS feeds for each of the donation pages.

We take the raw RSS feed for each donation page (for example) and use Yahoo Pipes to clean up one element into a raw total of the amount donated.

The tricky bit is conning Yahoo Pipes into invoking our counter code with the current value. There is no obvious way to do this from Yahoo Pipes' website.

What Yahoo give you is a "Get as JSON" URL. If you open this URL in your browser you will see the raw JSON data. The question is, how do you download this URL and trigger the counter code?

The answer is: you need a callback method.

Fortunately, Yahoo Pipes has a sneaky callback method argument _callback. That is, add to the URL &_callback=myMethod and the resulting JSON will be wrapped in a call to a myMethod function (that your JavaScript needs to implement).

If you open up the URL with the callback

The resulting JavaScript is:

Charity.frankWatersAmount({"count":1,"value":{"items":[{"title":"581.00", ...}], ...}})

So now we just need a method to update the counter (see whole script):

Charity.frankWatersAmount = function(amount) {
  this.frankWatersValue = parseInt(amount.value.items[0].title, 10);
  this.updateSignage();
};

To trigger the load of the JSON, which then calls our callback method, we add the following to the bottom of every page:

<script src='http://pipes.yahoo.com/pipes/pipe.run?_id=4ec120cc28c82031e7bac7e810107c24&amp;_render=json&amp;_callback=Charity.frankWatersAmount'></script>
<script src='http://pipes.yahoo.com/pipes/pipe.run?_id=c0b542d7338705199733887c38dc8b63&amp;_render=json&amp;_callback=Charity.olpcAmount'></script>

A victory for Nerds around the world!