Friday, April 25, 2008

PartnerBar: Google's feed aggregating magic javascript widget thingy

I was browsing the Google AJAX Search API blog recently when I discovered they were using an interesting widget at the bottom of the page, it turned out to be PartnerBar. PartnerBar was created as an example for the Google AJAX Feed API. I have been very busy with family stuff recently so I managed to completely miss this when news of it first broke in December (Ajax Feed Partner Bar and The PartnerBar - Contextual Cross Linking). In my defence this is easy to miss, it is called "PartnerBar", which means nothing to anybody on this side of the pond and the launch article talks about "contextual cross linking" (meaningless technobabble!). Essentially, PartnerBar is a feed aggregating magic javascript widget thingy, if it had been launched as such I would have spotted it sooner.

Anyway I have been playing with it recently and have made some minor tweaks to improve it for my own usage, I'm very happy with the results. I can't decide whether to install the resulting widget permanently on my blog because I think people would find it annoying if I were to place it somewhere prominent.

My tweaks and modifications

Feed titles and links.

In the instance of PartnerBar on their blog, Google store an array of their blogs in a JavaScript file: http://www.google.com/uds/solutions/partnerbar/google-blogs.js.

Incidentally, notice how it supports tags so that you can use the same array for multiple widgets with distinct content.

My first modification was to tweak the code so that I did not have to supply the feed name and link, this information is stored in the feed (why store it twice?). To achieve this I overrode the loadPartner method - I think the trick with overriding methods in JavaScript is to make sure the method you override is a small one!

My array of blogs looks like this: blogs.js

Alternating row colours

Secondly, I wanted the feed entries to display in alternating colours. Again, I found a small JavaScript method in PartnerBar (resetClassOnPartnerDom) and overrode it (AFAIK there is no "super" keyword in JavaScript, which is a shame). In order to do this I made use of a getElementsByClassName method that I found on the web.

Final result

You should be able to see the widget in action at the top of this blog entry. However, you can link out to see the final result in standalone glory here.

Here is my final JavaScript which my customised widget uses: partnerBar.js.

Design

Although I suffer with CSS, I am not a graphic designer and so I tend to steal gather inspiration from elsewhere. I based my widget on the Infected table theme from the CSS table gallery.

1 comments:

ismjml said...

Nice article. However, an article on the well known "A List Apart" teach us that alternating row colors in tables is useless, or even reduce real readability (versus perceived readability). Consider reading this article : Zebra tables


Note: Comment imported. Original by ThaNerd website: http://www.thanerd.net/ at 2008-05-13 11:36