Ajax Feed Partner Bar

dion — Tue, 18 Dec 2007 19:54:28 +0000

The Google Ajax API team has given us some new magic to sprinkle on our sites. This time we have a PartnerBar, which is “a control designed to enable contextual cross linking and promotion of sites within or across network. You configure the control with an array of Partner objects which include a feed url, partner name, etc. and the PartnerBar takes care of the rest.”

Here is an example:

It is very simple indeed to setup. The bulk of my bar is in the JavaScript:

google.setOnLoadCallback(function() {
var partners = [
        {
          feed: "http://ajaxian.com/index.xml",
          moreTitle: "More Ajaxian news",
          link: "http://ajaxian.com/",
          logo: "logo-aj.png",
          classSuffix: "extra"
        },
        {
          feed: "http://devphone.com/index.xml",
          moreTitle: "More devphone news",
          link: "http://devphone.com/",
          logo: "logo-dp.png",
          classSuffix: "extra"
        },
        {
          feed: "http://google-code-updates.blogspot.com/atom.xml",
          moreTitle: "More Google Code",
          link: "http://code.google.com/",
          logo: "logo-gc.png",
          classSuffix: "extra"
        }
      ];
 
      var options = {
        linkTarget: google.feeds.LINK_TARGET_BLANK,
        numEntries: 3
      }
 
      new PartnerBar("partnerbar", partners, options);
});

There are many options for you to tweak your bar. You can use CSS to entirely change the look, and you can even do really smart things, such as grab the image for the particular section dynamically. You do this by configuring a resolver callback, such as this one that grabs the image from the RSS feed itself:

// tie the option to the resolver: { logoResolver : logoResolverCallback, ... }
 
function logoResolverCallback(partner) {
  var url = "";
  var n = partner.result.xmlDocument.getElementsByTagName("rss")[0];
  if (n) {
    n = n.getElementsByTagName("channel")[0];
    if (n) {
      n = n.getElementsByTagName("image")[0];
      url = n.getElementsByTagName("url")[0].firstChild.nodeValue;
    }
  }
  return url;
}

You can also see this running on Entertainment Weekly’s online presence. It is nice to see that this came out of Mark and his team working with EW.

techno.blog("Dion") » googleajaxapis

Ajax Feed Partner Bar