Home ›

How to Display Presence for Multiple Screen Names

Building on the example where we displayed a presence box for a single screen name, this example shows how to extend it to handle multiple screen names.

  1. Visit http://developer.aim.com/manageKeys.jsp and grab an API key if you don't have one already.
  2. In the <head> of your document, paste this line: 
    <script type="text/javascript" src="http://o.aolcdn.com/aim/web-aim/aimapi.js"></script>
  3. Next, paste this code into your document directly after the previous <script> element or, ideally, add it to a separate file and reference it: 
    <script type="text/javascript">
AIM.params.callbacks.getPresenceInfo = ["presenceBoxWidget.displayPresence"];
var presenceBoxWidget = {
  init: function() {
    AIM.params.DEBUG = false;
    AIM.transactions.getPresenceInfo();
    // Our API key. Don't forget to update this with your own key.
    AIM.params.wimKey = "somewimapikey";
    AIM.util.createStyleSheet("http://o.aolcdn.com/aim/web-aim/presenceWidget/multipresence.css");
  },
  displayPresence: function(json) {
    if(json.response.statusCode==200) {
      var i = json.response.data.users.length;
      while(i-->0) {
        var oData = json.response.data.users[i];
        var oContainer = AIM.util.getElementsByClassName(document.getElementsByTagName("body")[0],"div",oData.aimId)[0];
        if(oData.state == "offline") {
          oContainer.appendChild(document.createTextNode(oData.displayId + " is not online right now."));
          continue;
        }
        createAndAppend(oContainer,"img",null,{"class":"icon","src":oData.buddyIcon});
        var oDiv = createAndAppend(oContainer,"div",null,{"class":"info"});
        createAndAppend(oDiv,"h3",oData.displayId,{"class":"userName " + oData.state});
        var oDL = createAndAppend(oDiv,"dl",null,{});
        var oSpan = createAndAppend(oDL,"span",null,{});
        createAndAppend(oSpan,"dt","Status: ",{});
        createAndAppend(oSpan,"dd",oData.state,{});

        if(oData.state == "mobile") {
          var onlineTime = "";
        } else {
          var oSpan = createAndAppend(oDL,"span",null,{});
          createAndAppend(oSpan,"dt","Online for: ",{});
          createAndAppend(oSpan,"dd",AIM.util.elapsedFromSeconds(oData.onlineTime),{});
        }

        if(oData.idleTime) {
          if(oData.idleTime > 60) {
            var iTime = Math.floor(oData.idleTime/60) + " hours.";
          } else {
            var iTime =oData.idleTime + " minutes.";
          }
          var oSpan = createAndAppend(oDL,"span",null,{});
          createAndAppend(oSpan,"dt","Idle Time: ",{});
          createAndAppend(oSpan,"dd",iTime,{});
        }
        if(oData.state == "away") {
          createAndAppend(oDL,"hr",null,{});
          var oSpan = createAndAppend(oDL,"span",null,{});
          createAndAppend(oSpan,"dt","Away Message: ", {});
          createAndAppend(oSpan,"dd",oData.awayMsg,{});
          var oSpan = createAndAppend(oDL,"span",null,{});
          createAndAppend(oSpan,"dt","Away For: ",null,{});
          createAndAppend(oSpan,"dd", AIM.util.elapsedFromSeconds(oData.awayTime),{});
        }
        if(oData.profileMsg) {
          createAndAppend(oDiv,"hr",null,{});
          createAndAppend(oDiv,"p",oData.profileMsg,{});
        }
        createAndAppend(oContainer,"br",null,{"class":"clearMe"});
      }
    }

    function createAndAppend(pNode,cNodeType,tNodeValue,attrList) {
      var x = document.createElement(cNodeType);
      if(tNodeValue){
        try{ x.innerHTML = tNodeValue; } catch(err) { }	
      }
      for(var i in attrList) {
        if(i == "class") {
          x.className = attrList[i];
        } else {
          x.setAttribute(i,attrList[i]);
        }
      }
      pNode.appendChild(x);
      return x;
    }
  }
}
window.addEventListener?window.addEventListener("load",presenceBoxWidget.init,false):window.attachEvent("onload",presenceBoxWidget.init);
<script>
  4. Place this markup in your document where you'd like the presence widget to appear, and be sure to replace ScreenName1, ScreenName1, etc., with the screen names for which you want to show presence. Add as many as you like. 
      <div class="AIMPresenceWidget ScreenName1"></div>
  <div class="AIMPresenceWidget ScreenName2"></div>
  <div class="AIMPresenceWidget ScreenName3"></div>
  <div class="AIMPresenceWidget ScreenName4"></div>
» Submitted by Developer Network on April 8, 2008 - 4:28pm.