This is a more advanced example of using presence data. Unlike the example that just used the awayMsg property, this example will use all presence data to display online time, icons, profile messages and away messages, among other things.
Since we're dealing with more data in this example, the code is a bit more verbose, but is no more complicated. Let's get started.
- Visit http://developer.aim.com/manageKeys.jsp and grab an API key if you don't have one already.
- In the
<head>of your document, paste this line:<script type="text/javascript" src="http://o.aolcdn.com/aim/web-aim/aimapi.js"></script>
- Next, paste this code into your document directly after the previous
<script>element:<script type="text/javascript"> // Define the callback for getPresenceInfo AIM.params.callbacks.getPresenceInfo = ["presenceBoxWidget.displayPresence"]; // Define our widget object var presenceBoxWidget = { // The entry point for the application. Called from the windows load event. init: function() { // if you'd like to see the data stream, set this to true. AIM.params.DEBUG = false; // Our API key. Don't forget to update this with your own key. AIM.params.wimKey = "somewimapikey"; // Call the presence transaction AIM.transactions.getPresenceInfo(); }, // Our function to display all the incoming presence data. displayPresence: function(json) { // we only want to do anything if the status is Ok if(json.response.statusCode==200) { // create a reference to the element that we'll append all of the data to. var oContainer = document.getElementById("myPresence"); // get a reference to the first user object in the response // if there were more than one AIMPresenceWidget on the page, // there would be more than one user object in this array var oData = json.response.data.users[0]; // if the user is offline, just say so and return out of the function if(oData.state == "offline") { oContainer.appendChild(document.createTextNode(oData.displayId + " is not online right now.")); return; } // append an image to the container element that will display the user's buddy icon createAndAppend(oContainer,"img",null,{"class":"icon",src:oData.buddyIcon}); // append a div element to the container that will contain the user's buddy info var oDiv = createAndAppend(oContainer,"div",null,{"class":"info"}); // display the user's AIM ID and online state, i.e., away, idle, mobile, etc. 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 the user is mobile, we don't know how long they have been online. // Otherwise, we'll convert it from seconds into a legible time 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 the user has been idle, calculate their idle time and display it the same way we do with their online time. 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 the user is away, display their away message and how long they have been away. 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),{}); } // Display their profile message if they have one. if(oData.profileMsg) { createAndAppend(oDiv,"hr",null,{}); createAndAppend(oDiv,"p",oData.profileMsg,{}); } createAndAppend(oContainer,"br",null,{"class":"clearMe"}); } else { // hide the container element if there waqs an error oContainer.style.display = "none"; } // A utility function to append nodes to the DOM function createAndAppend(pNode,cNodeType,tNodeValue,attrList) { var x = document.createElement(cNodeType); if(tNodeValue) x.innerHTML = tNodeValue; // profiles and the like can contain HTML, so use innerHTML over createTextNode for(var i in attrList) { if(i == "class") { x.className = attrList[i]; } else { x.setAttribute(i,attrList[i]); } } pNode.appendChild(x); return x; } } } // attach the presenceBoxWidget.init function to the window's load event window.addEventListener?window.addEventListener("load",presenceBoxWidget.init,false):window.attachEvent("onload",presenceBoxWidget.init); <script< - Place this markup in your document where you'd like the presence widget to appear, and be sure to replace YourScreenName with your own AIM screen name.
<div id="myPresence" class="AIMPresenceWidget YourScreenName"></div>
- Add some CSS to style the widget to taste. The following should get you started.
#myPresence { border:1px solid #C0C0C0; border-right:1px solid #000; border-bottom:1px solid #000; background-color:#FFF; font:10px verdana; position:relative; width:250px; height:auto; margin:auto; padding:5px; } #myPresence .icon { float:left; } #myPresence .info { position:relative; float:right; width:70%; } .info .userName { font:bold 11px verdana; margin:0; padding:0; } .info dl { margin:0; padding:0; display:block; } .info dt { font-weight:bold; display:inline; } .info dd { display:inline; margin:0; padding:0; } .info dl span { display:block; } .info .status { text-transform:capitalize; } .info .away { color:red; } .info .idle { color:gold; } .info .online { color:green; } .info .mobile { color:gray; }