(This article is written by Jolene and Qianting who are both student attachee in the Microsoft Innovation Center-Student Attachment Program)
To integrate the Windows Live Contacts control in your website is easy. There are references available on the Windows Live Developers website to guide you in creating the control. It uses Javascript that enables user to use the contact control with the web site.
To get started, you have to include the following JavaScript source into the source page of index.aspx page:
<script type="text/javascript" src="http://controls.services.live.com/scripts/base/v0.3/live.js"></script>
<script type="text/javascript" src="http://controls.services.live.com/scripts/base/v0.3/controls.js"></script>
You can include the codes below the <title> tag of the page.
Next step is to declare the xml namespace. You can make changes in the html tag as follows:
<html xmlns=http://www.w3.org/1999/xhtml xmlns:devlive="http://dev.live.com">
You have to add the JavaScript for the event handlers that you will use later in between the <head> tag:
<script type="text/javascript">
function signin()
{
};
function signout()
{
};
function showerror(p_msg)
{
}
function setAttributes()
{
var s = document.location.href;
s = s.substr(0,s.length - document.location.hash.length) +
"#" +
encode(elMessage.value);
document.location.replace(s);
document.location.reload();
}
function resize()
{
elContactsElement.style.width = "200px";
elContactsElement.style.height = "300px";
}
function hescq(p_str)
{
return p_str.replace(/&/g,"&").replace(/</g, "<").replace(/>/g,">").replace(/\"/g,""").replace(/\'/g,"'");
}
function encode(str)
{
if ("string" != typeof str) str = "";
str = encodeURIComponent(str);
return str.replace(/%/g, "\\"); // hide '%' from browser (Firefox)
}
function decode(str)
{
if ("string" != typeof str) str = "";
str = str.replace(/\\/g, "%"); // translate '\\' back to '%'
return decodeURIComponent(str);
}
</script>
Add the css code also between the <head> tag:
<style type="text/css">
body {
color:black;
background-color:white;
font-family:Verdana;
font-size:12px;
}
#ContactsControl {
border:solid 1px black;
float:right;
}
#message
{
height: 74px;
width: 330px;
}
</style>
Add a new HTML page in your project and name it as channel.htm:
Paste the following code in the source page of channel.htm:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Channel</title>
<meta name="ROBOTS" content="NONE"/>
<script type="text/javascript">
function doc_loaded()
{
try
{
var hash = window.location.hash.substr(1);
if (window.location.replace == null)
window.location.replace = window.location.assign;
// IE6 reports a security warning if iframe.src = "" or "about:blank" on an https page
window.location.replace("about:blank");
var name = hash.split("/")[0];
var win = null;
if (name)
win = window.parent.frames[name];
else
win = window.parent.parent;
win.Microsoft.Live.Channels.Mux._recv_chunk(hash);
}
catch (ex)
{
/* ignore */
}
}
</script>
</head>
<body onload="doc_loaded()"></body>
</html>
The next step to do is to add the contactscontrol in the <body> tag. You can place it below the <iframe> tag.
<devlive:contactscontrol
id="ContactsControl"
devlive:channelEndpointURL="channel.htm"
devlive:view="tile"
devlive:market="en"
devlive:onSignin="{ signin(); }"
devlive:onSignout="{ signout(); }"
devlive:onError="showerror"
></devlive:contactscontrol>
Modify the <body> tag into the following:
<body onload='resize();'>
The resize() method will resize the height and width of the contacts control.
Add the following JavaScript below the contacts control:
<script type="text/javascript">
var elContactsElement = document.getElementById('ContactsControl');
var elMessage = document.getElementById('message');
var elWidth = "200";
var elHeight = "300";
var elMarket = "en";
var elView = "tile";
if (document.location.hash.length > 1) {
var args = document.location.hash.substr(1).split('&');
if (args.length == 1) {
elMessage.value = hescq(decode(args[0]));
}
}
else
{
elWidth.value = "200";
elHeight.value = "300";
}
elContactsElement.setAttribute("message", elMessage.value);
elContactsElement.setAttribute("devlive:market", "en");
elContactsElement.setAttribute("devlive:view", "tile");
</script>
Add the following table just on the top of the end </body> tag:
<table style="display:inline">
<tr>
<td>
<strong>Message:</strong>
</td>
<td>
<textarea id="message" cols="20" name="S1" rows="1"> Hi friends, I have something really cool to share. Check it out at http://www.innovativesingapore.com ! :)</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input onclick="{ setAttributes(); }" type="button" value="Set Message" align="right" /></div>
</td>
</tr>
</table>
This table contains the message to be sent when you initiate conversation with people in your contact list. You can change the message to be sent in the textbox by clicking the ‘Set Message’ button.
You will get the following after you sign in to the website:
Feel free to rearrange the position of the controls to suit your preference.
The default message will be shown in the messenger chatbox when u click the msn icon( 
):
One thing that you have to take note is that you have to sign in to Windows Live Messenger in order to initiate conversation with them in the windows contacts control. You can choose an alternative way to email your contact by clicking the email icon (
).
Congratulations! You have now sucessfully integrate the 3 Live Services Windows Live ID, Windows Live Alerts and Windows Contacts Control into one project. Feel free to explore other Live Services here.