Blog

Step 1: jQuery Your SharePoint Site

The first step is to get jQuery and put it somewhere on your site. Visit http://www.jquery.com to find the latest version of the script and download a copy to your computer.

Once you have it downloaded drag it to the images directory, or a directory of your choosing on your SharePoint site. You can see here that I've uploaded both the development versions and the minified versions for different purposes.

Step 2: Create Your Presence List

Create a custom list and add the following fields:

Column (click to edit)	Type	Required
Twitter	Single line of text
ADUser	Person or Group
Skype	Single line of text
Phone	Single line of text

You'll end up with a list that looks similar to this: Don't forget to populate it with our own data.

Step 3: Prepare Your Script

Copy the following script into notepad or a text editor:

* Configuration settings for the Twitter Presence List

var twitterNameField = "Title"; //Name of the field used for the twitter name

var twitterNameFieldInt = "Title"; //Internal Name should be the same, but just in case its different or has spaces

var adNameField = "ADUser"; //Name of the Field with the Active Directory User

var adNameFieldInt = "ADUser"; //Internal Name should be the same, but just in case its different or has spaces

var skypeNameField = "Skype"; //Name of the field used for the Skype Name

var skypeNameFieldInt = "Skype"; //Internal Name of the field used for the Skype Name

var phoneNameField = "Phone"; //Name of the field used for the Skype Name

var phoneNameFieldInt = "Phone"; //Internal Name of the field used for the Skype Name

var listName = "{B5B2B296-9B79-4950-862E-5163DFDA3BC5}"; //Name/Guid of the list you're storing the values in

* Url, Relative to the SharePoint site with the list.

* This link should not be terminated with a "/" forward slash

* Since "/_vti_bin/lists.asmx" will be appended;

* IE: "http://www.sharepointevolved.com" would be ""

var urlToSite = "/presence";

* Script by Isaac Stith http://www.sharepointevolved.com

* Modify below this line at your own risk

var lastLookupId = "";

var lastLookupName = "";

var curTweeter = null;

var curElement = null;

var curSkype = null;

var curPhone = null;

var foundTName = false;

var readyToClose = false;

$(document).ready(function() {

//Lets put some javascript here!

$("a[href*='userdisp']").hover(

function () {

setNotReadyToClose();

var loc = $(this).attr("href");

var name = $(this).html();

var id = loc.substring(loc.indexOf("=")+1,loc.length);

curElement = $(this);

getTwitterName(id,name);

function () {

setReadyToClose();

}

);

});

function getTwitterName(id,name)

{

if(lastLookupId != id)

{

removeOldBox();

var soapEnv =

"<?xml version=\"1.0\" encoding=\"utf-8\"?> \

<soap:Envelope xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> \

<soap:Body> \

<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>\

<listName>"+listName+"</listName> \

<query><Query><Where><Eq><FieldRef Name='"+adNameField+"' /><Value Type='User'>"+name+"</Value></Eq></Where></Query></query> \

<viewFields><ViewFields><FieldRef Name='"+adNameField+"' /><FieldRef Name='"+twitterNameField+"' /><FieldRef Name='"+skypeNameField+"' /><FieldRef Name='"+phoneNameField+"' /></ViewFields></viewFields> \

<rowLimit>0</rowLimit> \

<queryOptions><QueryOptions/></queryOptions> \

</GetListItems>\

</soap:Body>\

</soap:Envelope>";

lastLookupId = id;

lastLookupName = name;

foundTName = false;

$.ajax({

url: urlToSite + "/_vti_bin/lists.asmx",

type: "POST",

dataType: "xml",

data: soapEnv,

complete: getTwitterNameCallback,

contentType: "text/xml; charset=\"utf-8\""

});

}

else

{

//Same information being retreived, check and see if the div is closed

if($("div#tweeter").html() ==null)

{

popupFromJson();

}

function removeOldBox()

{

if($("div#tweeter").html() !=null)

{

$("div#tweeter").remove();

}

function getTwitterNameCallback(xData, status)

{

$(xData.responseXML).find("listitems").children().children().each(function(){

if(foundTName ==false){

var title = ($(this).attr("ows_"+twitterNameFieldInt));

var usr = ($(this).attr("ows_"+adNameFieldInt));

curSkype = ($(this).attr("ows_"+skypeNameFieldInt));

curPhone= ($(this).attr("ows_"+phoneNameFieldInt));

var curid = usr.substring(0,usr.indexOf(";"));

if(lastLookupId == curid)

{

getTwitterStatus(title);

foundTName = true;

return;

}

});

}

function getTwitterStatus(username)

{

$.getJSON("http://twitter.com/status/user_timeline/"+username+".json?count=1&callback=?",getTwitterStatusCallback);

}

function getTwitterStatusCallback(json)

{

curTweeter = json;

popupFromJson();

}

function popupFromJson()

{

//Need to get all the parameters we want to display and put them ina nice little tooltip

var outdiv = "<div id='tweeter'><img src="+$($(curTweeter).attr("user")).attr("profile_image_url")+" height='25'/>"+$(curTweeter).attr("text")+"<br/><a href='skype:"+curSkype+"'><img src='http://mystatus.skype.com/smallicon/"+curSkype+"' style='border:0px;'/></a> <a href='skype:"+curSkype+"?call'>Skype Call</a> | <a href='skype:"+curSkype+"?chat'>Chat</a> | <a href='skype:"+curSkype+"?call'>Skype Call</a> | <a href='skype:"+curSkype+"?add'>Add</a> | <a href='skype:"+curPhone+"?call'>Call Phone</a></div>";

$(curElement).after(outdiv);

var pos = $(curElement).position();

$('div#tweeter').css("top", pos.top+10);

$('div#tweeter').css("left", pos.left+25);

}

function setReadyToClose()

{

readyToClose = true;

window.setTimeout(finallyClose,2000);

}

function setNotReadyToClose()

{

readyToClose = false;

}

function finallyClose()

{

if(readyToClose==true){

$("div#tweeter").remove();

}

function EnsureIMNControl()

{

}

</script>

div#tweeter{

background-color:#FFFFCC;

border:3px black groove;

margin: 5px;

padding-right: 5px;

padding-top: 5px;

padding-left: 5px;

padding-bottom: 5px;

position:absolute;

}

div#tweeter img{

vertical-align:text-top;

border: 1px black solid;

padding: 2px;

margin-right:5px;

float:left;

}

div#tweeter a {

text-decoration:underline;

color:black;

vertical-align:bottom;

}

</style>

The only thing you have to change if you've followed the instructions are the listName and the url to site properties in the configuration section. You Can find the listId by going to the list settings of the Presence list and looking at the end of the URL.

You'll need to change the urlToSite property to the relative url to the site you're currently working on. You may also need to change the location of the jQuery file depending on where you've placed it on the site.

Step 4: Master your Master Page

Now that your script is ready, it is time to put it in your Master Page. Open up your master page in SharePoint designer and find the closing body tag. Should look like this:

You're going to paste the script you've modified for your use right above the closing body tag, then go ahead and save the master page.

If you've gotten this far should have successfully modified your site to see the presence information when you hover over a username. As an added bonus, I've removed the function that calls Microsoft's presence information in the EnsureIMNControl().