Randall Munroe of XKCD at Google Gears Future APIs: Image Manipulation API
Dec 18

Ajax Feed Partner Bar

Ajax, Google, JavaScript, Tech with tags: , Add comments

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.

5 Responses to “Ajax Feed Partner Bar”

  1. han Says:

    Hidden IFrame Example 3

    var oIFrame = null;

    function createIFrame() {
    var oIFrameElement = document.createElement(”iframe”);
    oIFrameElement.width=0;
    oIFrameElement.height=0;
    oIFrameElement.frameBorder=0;
    oIFrameElement.name = “hiddenFrame”;
    oIFrameElement.id = “hiddenFrame”;
    document.body.appendChild(oIFrameElement);

    oIFrame = frames["hiddenFrame"];
    }

    function checkIFrame() {
    if (!oIFrame) {
    createIFrame();
    }
    setTimeout(function () {
    oIFrame.location = “ProxyForm.htm”;
    }, 10);
    }

    function formReady() {
    var oHiddenForm = oIFrame.document.forms[0];
    var oForm = document.forms[0];

    for (var i=0 ; i < oForm.elements.length; i++) {
    var oHidden = oIFrame.document.createElement(”input”);
    oHidden.type = “hidden”;
    oHidden.name = oForm.elements[i].name;
    oHidden.value = oForm.elements[i].value;
    oHiddenForm.appendChild(oHidden);
    }

    oHiddenForm.action = oForm.action;
    oHiddenForm.submit();
    };

    function saveResult(sMessage) {
    var divStatus = document.getElementById(”divStatus”);
    divStatus.innerHTML = “Request completed: ” + sMessage;
    }

    Enter customer information to be saved:
    Customer Name:
    Address:
    City:
    State:
    Zip Code:
    Phone:
    E-mail:

  2. wholesale replica handbags Says:

    good thank you

  3. Bruno Says:

    Hello Dion,

    I’m new in this tech stuff, and I’m not sure you can help me, but i’m gonna try:

    I’m using this partner bar in a blog – and I’ve managed to use the partner bar to get the latest posts from the categories dynamically , but it wont work in IE, can you drop by TvZine and if you can sort it out give me a holler?

    I would really appreciate it

    Thanks, Bruno

  4. Dion Almaer Says:

    Bruno,

    I am on the road at the moment. Thanks for the question though. The best place for this is to ask on the forum, which has Googlers watching to help!

    http://groups.google.com/group/Google-AJAX-Search-API

    Cheers,

    Dion

  5. Bruno Says:

    Thanks for the reply, it works fine now, just needed a good spanking …

Leave a Reply

Spam is a pain, I am sorry to have to do this to you, but can you answer the question below?

Q: What are the first four letters in the word British?