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:

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.


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.


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: at 2008-05-13 11:36

madin said...

replica Cartier is the renowned French jeweller
and watchmaker with a history of pioneering design and a drive for excellence. The first references to replica Ballon Blanc de Cartier watches wristwatches date back to 1888.

madin said...

Short for Monestier-de-Clermont, cheap moncler jackets uk an Alpine town near Grenoble,replica man moncler jackets France, Moncler was founded in 1952 by René Ramillon as an outdoor-gear company, producing sleeping bags, tents, and other mountain-climbing necessities. Today, the French-Italian label is best known for its lightweight, super-warm quilted down jackets, as well as ready-to-wear and accessories hardy enough to take on harsh winter weather.

madin said...

Cartier is the renowned French jeweller and watchmaker with swiss replica watches a history of pioneering design and a drive for excellence. replica rolex watches The first references to Cartier wristwatches date back to 1888. Late in the 19th century it was pocket and chatelaine watches that were most popular, but Louis Cartier saw a future in timepieces that could be worn on the wrist.

madin said...

Use Alexander McQueen shoes to create a look from the feet.Cheap ALEXANDER MCQUEEN Shoes Wacky women's sneakers use jewellery replica mens ALEXANDER MCQUEEN embellishments and iconic skull motifs to instantly elevate any casual outfit to luxury, while glossy leather boots