Last March, at Mix09, Microsoft released the Windows Live Messenger Web Toolkit, a way to incorporate Messenger directly into your website, and today, they’ve released a new version 3.5. Designed to enhance the user experience, and make it easier to enable sharing via Messenger, a post on the WL Messenger Developer Blog details the improvements:
- User experience: smoothed out the user experience, added a first run experience, expanded the browser support, increased the performance
- Developer experience: reduced the amount of code for you to implement “Share via Windows Live” and the Messenger Web Toolkit is now built on the Microsoft Ajax library.
- New scenarios: Allow people who don’t use Messenger to see display pictures and names of Messenger users.
The new version has built in speed improvements, has added browser support for FireFox 3.5, Safari 4, and Google Chrome 2, and added some nice first run features:
There are improvements for developers, too:
We’ve done two things for developers 1) created a new control for sharing which reduces the amount of code required and 2) changed the underlying JavaScript libraries to the Microsoft Ajax libraries.
While not everything appears to be up quite yet, you can find out more about Windows Live Messenger Web Toolkit at dev.live.com/messenger, and learn more and ask questions in the forums.
(And yes, we know we promised to enable the Web Toolkit here at LiveSide. No excuses, but our platform (Community Server), while it’s built to handle lots more than we can throw at it, is also much more complicated than just a simple web page or site. We haven’t forgotten, but we’ve moved to the latest SP2 of Community Server, rearranged the site ui, added a better mobile presence (and fixed our images problem there, thanks again to Chris Weeink), enabled polls, fought off some spam attacks, all while hopefully keeping you up on all the latest Windows Live news. But like we said, no excuses. We haven’t forgotten, and we’re working on it ;) )
A lot of people nowadays have Twitter accounts, a Facebook account etc. and if you’re reading this then I’m also assuming you have a Windows Live account and some interest in Windows Live Services. Each of these have their own “Personal Message” where you can tell people what you are currently doing and there-in lies the problem. You have to visit each of these places to update them individually. Why not have a central place where you can update them all?
The good news is that you can. There are various ways of doing this, whether through a website or a Silverlight application. Basically anything that can use web services. With Microsoft’s recent introduction of the Windows Live Web Toolbar, I thought I’d do just that and show you how easy it is. I will be building upon my previous articles regarding the new Windows Live controls so please go check them out if you haven’t already as I’ve discussed a lot of the code present in this mashup in previous articles.
So first up, lets take a look at our actual web page :-
Here you can see that I’ve sectioned off the page. At the top of the page we will display the users Windows Live login picture along with their personal message that is tied to that account. Just below that will be the list of their contacts. This is an easy way to display the personal messages of their Windows Live contacts. The next section will be their Twitter account showing their own personal messages that they have sent to Twitter and at the bottom you will see the Windows Live Web Toolbar that we will use to sign people into their Windows Live accounts and hook in with the other Windows Live Web Controls that we display on the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:msgr="http://messenger.live.com/2009/ui-tags">
<head runat="server">
<title>MessyTwit</title>
<link type="text/css" rel="Stylesheet" href="MessyTwit.css" />
<script type="text/javascript" src="http://www.wlmessenger.net/api/3.0/loader.js"></script>
<script type="text/javascript" src="JScript/JQuery.js"></script>
<script type="text/javascript" src="JScript/Messenger.js"></script>
<script type="text/javascript" src="JScript/Twit.js"></script>
<script type="text/javascript">
Microsoft.Live.Core.Loader.load(['Messenger.UI', 'Messenger.UI.Styles.Core'], null);
</script>
</head>
<body>
<msgr:app
privacy-url="Privacy.html"
channel-url="Channel.htm"
application-verifier-token="<%= appVerifier %>"
token-url="RefreshMessengerToken.aspx"
onauthenticated="onAuthenticated"></msgr:app>
<form id="form1" runat="server">
<div id="msgrDisplayPic">
</div>
<hr />
<div>
<msgr:contact-list word-wheel-enabled="false"></msgr:contact-list>
</div>
<hr />
<%-- <div id="ctrls">
<msgr:personal-message cid='$user' id='persmsg' editable='true'></msgr:personal-message>
</div>
--%>
<div id="msgs">
<div id="TwitCreds" class="msgHidden">
<span>Twitter Username </span>
<input type="text" id="acct" /><br />
<span>Twitter Password </span>
<input type="password" id="pwd" /><br />
<span id="TwitLogin">Login to Twitter</span>
</div>
</div>
<hr />
<div id="persMsg" class="msgHidden">
<input type="text" id="msg" value="Enter a personal message" size="80" />
<span id="msgsend">Send</span>
</div>
<div>
<msgr:bar sign-in-enabled="true"></msgr:bar>
</div>
</form>
</body>
</html>
Above is the default.aspx page. As you can see, it’s not very complicated at all. Most of this was covered in my previous articles so I’ll just give a quick rundown here.
At the top we include various Javascript files which we’ll cover later and we tell the page to load the messenger controls when the xhtml page has loaded.
Next we have the messenger application section in which we supply various required variables such as where our privacy and channel pages are and we also set an event for when the user has authenticated (logged in to) their Windows Live Account.
After that there is a placeholder for where we will put the users display picture and Windows Live personal message. Following the horizontal rule (I’ve only put that in the display physically break the page into sections) we have the Windows Live Contact List control. It’s as simple as that one line of markup to display a very nice list of the users contacts.
The next section on the page is where we will gather the users’ Twitter credentials so that we can interact with their Twitter account. Towards the bottom we have a simple input box that the user will type their personal message in to and finally we display the Windows Live Web Toolbar at the bottom of the page.
For completeness here is the code behind for the default.aspx page :-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WindowsLive;
using System.Diagnostics;
public partial class _Default : System.Web.UI.Page
{
WindowsLiveLogin wll = new WindowsLiveLogin(true);
public string appVerifier
{
get
{
return wll.GetAppVerifier();
}
}
}
I’ve covered this before so won’t go into it here.
The corresponding style sheet associated with this page is very basic. Here is MessyTwit.css :-
input#msg
{
border-width: 0px;
}
.msgHidden
{
display: none;
}
.msgShow
{
display: block;
}
We hide the border around the personal message input box and we define two classes to hide or show various elements of our page.
There are two main Javascript files that cover all of the functionality on the page. The Messenger.js file I’ve basically covered before :-
var userToken = null;
var msgrUser = null;
function onAuthenticated(e)
{
msgrUser = e.get_user();
msgrUser.add_signInCompleted(SignInCompleted);
}
function onUserConsentCompleted(e)
{
userToken = e.get_consentToken();
}
function SignInCompleted(sender, e)
{
if (e.get_resultCode() === Microsoft.Live.Messenger.SignInResultCode.success)
{
if (typeof (InvokeOnUserSignIn) === 'function')
{
InvokeOnUserSignIn();
}
}
else
{
OnUserSignedOut();
}
var userAddress = msgrUser.get_address().get_address();
var usercid = msgrUser.get_identity().get_cid();
var signinframe = document.getElementById("msgrDisplayPic");
var tag = Microsoft.Live.Messenger.UI.Tags.TagsFactory.createTag('display-picture',
{ 'cid': usercid, 'presence-enabled': 'true', 'size': 'Large', 'logo-enabled': 'true' });
$("#msgrDisplayPic").append(tag);
var tag2 = Microsoft.Live.Messenger.UI.Tags.TagsFactory.createTag('personal-message', { 'cid': '$user', 'editable': 'false', 'id':'Persmsg2'});
$("#msgrDisplayPic").append(tag2);
$("div#TwitCreds").removeClass("msgHidden");
$("div#TwitCreds").addClass("msgShow");
}
function OnUserSignedOut()
{
//add code for sign-out.
}
As a quick overview we have the onAuthenticated event handler that we tied up in the messenger application block on the default.aspx page. As mentioned this gets fired when the user logs in to their Windows Live account. Once they login we capture that event and extract the user object then setup another event to capture when sign-in has been completed. The API fires off multiple events at differing stages of login. Another one of those events is when the user gives consent to send information back to our web site. In this event handler we simply capture the consent token that is sent.
Once the user has completed sign-in we make sure that sign-in was successful (i.e. the correct username and password were supplied). Next we create the users display picture and also their personal message. These are two different Windows Live controls.
The documentation for the Personal Message control says that it must have the CID of the user in order to display their personal message. This makes sense. However if you pass in the CID as we do for the display picture, the Personal Message control does not work. You HAVE to pass the $user string that is a reserved variable created by the Windows Live API.
Next we simply use some jQuery to insert these controls onto our page. We also now use some jQuery to show the Twitter credentials portion of our web page which is hidden until after the user signs in to their Windows Live account.
After the user has signed into their Windows Live account, this is what you will see. On this screenshot, my personal message is not displayed as I don’t have a personal message currently tied to this account however the control is present as you’ll see later.
The second of the two main Javascript files, twit.js, contains the jQuery functions for manipulating the page. This is all new so I’ll break it down a bit :-
$(document).ready
(
function()
{
$('span#msgsend').click
(
function()
{
var acct = $("input#acct").val();
var pwd = $("input#pwd").val();
var msg = $("input#msg").val();
Everything in this Javascript file is done using event handlers. We attach the event handlers to the default.aspx document on ready. This is slightly different than onLoad. With onLoad you need to wait until the page has fully loaded, including the images that are displayed on the page. With jQuery’s ready handler the page has basically loaded, we have access to the page DOM, script etc. but we don’t have to wait until all the images are loaded.
So in the ready section we attach an event handler to the “send” text next to the personal message input. I just used text here but it could just have easily been a button.
When the text gets clicked we first get the username and password for the users Twitter account and we also get the personal message they want to send.
$.post("/MessyTwit/TwitterService.asmx/SendTweet",
{ 'account': acct, 'pass': pwd, 'msg': msg },
Next we have an AJAX call to a web service that we have created to send the personal to the users Twitter account.
function(_xml)
{
$('div#msgs').text('');
$xml = $(_xml);
$xml.find("status").each
(
function()
{
$('div#msgs').append("<div><img src='" + $(this).find("profile_image_url").text() + "'/>" +
"<span> " + $(this).find('text').text() + "</span></div>");
}
);
}
, 'xml');
To finish off this AJAX call we define an anonymous function that gets called once the call returns to our script. Here we first blank out any Twitter messages that may already be displayed on the screen. Then we take the XML that is returned by the AJAX call and parse it. We loop through the XML parsing each individual message. For each message we take the display picture of the user and also the text of the message and display it in the placeholder we marked out in our default.aspx page. The final part to this is just saying that the AJAX call will use XML rather than JSON or some other format.
if (msgrUser)
{
msgrUser.get_presence().set_personalMessage(msg);
}
So we have posted the users personal message to their Twitter account, next we need to do the same for their Windows Live account. In the code above, this is exactly what we do. We first check to see that the user object isn’t null and if it’s not then we simply call the set_personalMessage method to update their Windows Live personal message.
$('input#msg').val('');
}
);
Finally for this event handler we do some cleanup. Here I’m blanking out the personal message input box ready for their next message.
$('input#msg').focus
(
function()
{
$(this).val('');
}
);
$('input#msg').blur
(
function()
{
if (this.value == '')
{
this.value = 'Enter your personal Message';
}
}
);
Here is the personal message input box before the user has clicked on it :-
and after they have clicked on it :-
The next two event handlers we define are tied to the personal message input box. All that this does is blank the input box when the user focuses on it (clicks or tabs into it). If the user clicks or tabs away from it and the input box is blank then we insert the message “Enter your personal Message” into it so the user knows where to type.
$('span#TwitLogin').click
(
function()
{
$('div#persMsg').removeClass('msgHidden');
$('div#persMsg').addClass('msgShow');
$('div#TwitCreds').removeClass('msgShow');
$('div#TwitCreds').addClass('msgHidden');
var acct = $("input#acct").val();
$.post("/MessyTwit/TwitterService.asmx/GetTweet",
{ 'account': acct },
function(_xml)
{
$xml = $(_xml);
$xml.find("status").each
(
function()
{
$('div#msgs').append("<div><img src='" + $(this).find("profile_image_url").text() + "'/>" +
"<span> " + $(this).find('text').text() + "</span></div>");
}
);
}
, 'xml');
}
);
}
);
The final event handler is tied to the text I’ve displayed on the page for logging in to their Twitter account. Again, I’ve just used some text but it could just as well be a button control.
When the user clicks on the login text we hide the twitter login credentials area and display the personal message input box. Next we get the users username and again make an AJAX call. This time only to retrieve the users’ own Twitter messages. Finally we use the same anonymous function as we had above to parse through the returned XML and extract the display picture and message from each message returned and display them onscreen. As soon as the user enters their Twitter credentials you should see the following :-
Now you can take this code and expand on it so that when the user clicks on the login text you actually do a check against their Twitter credentials and display an error message if they are not correct. Twitter has lots of web service calls that you can use to make this code more robust. See the Twitter API for more details.
This really only leaves one piece left, our web service :-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Xml;
using System.Xml.Linq;
using System.IO;
using System.Net;
/// <summary>
/// Summary description for TwitterService
/// </summary>
[WebService(Namespace = "blah")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class TwitterService : System.Web.Services.WebService {
public TwitterService () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public XmlDocument GetTweet(string account)
{
string url = "http://www.twitter.com/statuses/user_timeline/" + account + ".xml?count=5";
HttpWebRequest Request = (HttpWebRequest)WebRequest.Create(url);
Request.Method = "GET";
WebResponse Response = Request.GetResponse();
StreamReader Reader = new StreamReader(Response.GetResponseStream());
string Result = Reader.ReadToEnd();
Reader.Close();
XmlDocument doc = new XmlDocument();
doc.LoadXml(Result);
return doc;
}
[WebMethod]
public XmlDocument SendTweet(string account, string pass, string msg)
{
string url = "http://www.twitter.com/statuses/update.json";
NetworkCredential creds = new NetworkCredential(account, pass);
string EncodedText = "status=" + HttpUtility.UrlEncode(msg);
HttpWebRequest Request = (HttpWebRequest)WebRequest.Create(url);
Request.Method = "POST";
Request.Credentials = creds;
Request.ContentType = "application/x-www-form-urlencoded";
Request.ContentLength = EncodedText.Length;
Request.UserAgent = "MessyTwit";
Request.Timeout = 10000;
System.Net.ServicePointManager.Expect100Continue = false;
Stream reqStream = Request.GetRequestStream();
StreamWriter Writer = new StreamWriter(reqStream);
Writer.Write(EncodedText);
Writer.Close();
WebResponse Response = Request.GetResponse();
StreamReader Reader = new StreamReader(Response.GetResponseStream());
string Results = Reader.ReadToEnd();
Reader.Close();
Response.Close();
reqStream.Close();
XmlDocument doc = GetTweet(account);
return doc;
}
}
This is a standard .Net web service except that we need to un-comment the line that reads :-
[System.Web.Script.Services.ScriptService]
This is so that our Javascript can actually make calls to it. The first method that we have simply calls the Twitter web service and gets the top 5 messages the user has posted and returns that as XML back to our AJAX call.
The second method is the one that actually posts the message to Twitter. After we have posted our message to using the Twitter API we make the call to the first method to retrieve the new updated top 5 messages. The main line to take note of in this method is :-
System.Net.ServicePointManager.Expect100Continue = false;
Without this line any posts to Twitter will fail with a 417 return code. This only applies to posts, not to gets.
And there you have it. One web page that updates both a users’ Windows Live personal message and also their Twitter account as can be seen in the screenshot below. The Windows Live Personal-Message control now contains my latest message at the top of the page and also my latest Twitter entry has the same message :-
This should give you an idea of the kind of mashups that you can do using the new Windows Live Messenger UI controls. I’ve expanded this example to include Facebook although I didn’t put the code here but it’s fairly easy to do and the above code will give you all the basics you need. You can expand it to include any other site that does some kind of personal message you wish.
One final point should be noted. The Windows Live Web Toolbar includes it’s own area in which a user can type their personal message. When the personal message gets posted you can capture the event using the following :-
// attach event for future changes
user.get_presence().add_propertyChanged(function (sender, e) {
if (e.get_propertyName() == "PersonalMessage") {
var msg = user.get_presence().get_personalMessage();
}
});
This also applies to the Personal Message UI control if you allow it to be edited. This way you can handle whether the user types their personal message into the Web Toolbar or using a control that you’ve specifically placed on the page.
Following on from my previous tutorial on how to integrate the Windows Live Web Bar into your site, we’ll build upon this and show you some of the other UI controls that you can use in your site.
One thing that a lot of people might want to do is display the signed-on users’ display picture somewhere on the site other than in the web-bar.
As with most everything Microsoft does in the web space there are a couple of ways of doing this. Lets start by doing it the easy way. Take the default.aspx page from the last tutorial and add a new <div> element under the <form> tag :-
<form id="form1" runat="server">
<div id="msgrDisplayPic"></div>
Into the div tag we will add the display picture UI control. This control has a few different options you can specify but only one is actually required, the cid of the user who’s image you wish to display. How do you get the cid of the signed-in user? Again there are a couple of ways of doing this but we’ll take the easy route again. For use with their tags on the aspx page, Microsoft has thoughtfully provided a variable that automatically gets populated with the users’ cid, $user. So the base tag that we need to enter into our div looks like this :-
<msgr:display-picture cid='$user'></msgr:display-picture>
When you run the page you’ll notice the default “blank” user image as nobody has signed in yet :-
When a user signs in then this image will change to the users’ display picture as seen above.
There are a couple of options that you can add to the control. You can adjust it’s size by supplying it with a size attribute. Size can take three pre-defined values, Small, Medium and Large. By default the control is set to Medium size. You can also tell it whether to enable or disable presence information (the “glow” around the border of the image). By default this is set to true so presence information is displayed. Finally you can also state whether a logo is displayed in the bottom right of the image or not by setting the logo-enabled attribute. The default is set to false. When set to true, a small logo is displayed :-
So here is our final display-picture tag :-
<msgr:display-picture cid='$user' presence-enabled='true' size='Large' logo-enabled='true'></msgr:display-picture>
Microsoft also allow you to override their default style sheets for this control giving you a range of options :-
- DisplayPictureControl: The outermost container of the display-picture tag.
- DisplayPictureControl Border: Specified when presence is enabled.
- DisplayPictureControl Large: Specified when the size is "large".
- DisplayPictureControl Medium: Specified when the size is "medium".
- DisplayPictureControl Small: Specified when the size is "small".
- DisplayPictureControl_Icon: The logo if the logo is enabled.
- DisplayPictureControl_Image: The display picture.
- DisplayPictureControl_Image Online: Specified when the status is Online.
- DisplayPictureControl_Image BeRightBack: Specified when the status is Be Right Back.
- DisplayPictureControl_Image Busy: Specified when the status is Busy.
- DisplayPictureControl_Image Away: Specified when the status is Away.
- DisplayPictureControl_Image InACall: Specified when the status is In A Call.
- DisplayPictureControl_Image OutToLunch: Specified when the status is Out To Lunch.
- DisplayPictureControl_Image AppearOffline: Specified when the status is Appear Offline.
- DisplayPictureControl_Image Offline: Specified when the status is Offline.
And that’s it, you can now add the users’ display picture to anywhere on your site with one tag.
If you want more fine grained control over the process or you wish to do all this programmatically Microsoft also allows you to do this.
First remove the <msgr:display-picture> tag from the default.aspx, but keep the <div> tag in place. Next create a Javascript file and add a reference to it at the top of the default.aspx :-
<script type="text/javascript" src="JScript/Messenger.js"></script>
In this Javascript file we will programmatically insert the users’ display picture control onto the site. I’ve added a couple of extra event handlers to this file that you don’t necessarily need but are very handy to have as well. First off we want to declare a couple of global variables, one to hold the users’ token that gets generated when they give their consent to sign-in to your site, and the second is to hold the actual user object :-
var userToken = null;
var msgrUser = null;
Our first event handler gets fired once the user gives his permission to sign into your site :-
function onUserConsentCompleted(e)
{
userToken = e.get_consentToken();
}
All that we’re doing here is getting the consent token that gets generated and storing it in our global variable for use later.
The next event handler gets fired once the user has authenticated (i.e. the windows live credentials are correct) :-
function onAuthenticated(e)
{
msgrUser = e.get_user();
msgrUser.add_signInCompleted(SignInCompleted);
}
Here we capture the actual user object (the most important object you use when dealing programmatically with Windows Live Web Messenger) and store it in our global variable. Then we add an event handler for when the sign-in process has completed.
function SignInCompleted(sender, e)
{
if (e.get_resultCode() === Microsoft.Live.Messenger.SignInResultCode.success)
{
if (typeof (InvokeOnUserSignIn) === 'function')
{
InvokeOnUserSignIn();
}
}
else
{
OnUserSignedOut();
}
var usercid = msgrUser.get_identity().get_cid();
var signinframe = document.getElementById("msgrDisplayPic");
var tag = Microsoft.Live.Messenger.UI.Tags.TagsFactory.createTag('display-picture',
{ 'cid': usercid, 'presence-enabled': 'true', 'size': 'Large', 'logo-enabled': 'true' });
signinframe.appendChild(tag);
}
The SignInCompleted handler first of all checks to see if authorization was correct (did the user really sign in or did they perhaps have a typo and sign-in wasn’t completed successfully). If sign-in was not correct then we make sure our page reflects that by calling our sign-out routine which should house any clean-up code.
If the user has successfully signed in then we grab their cid. Remember, this is the one required field for the display-picture control (and most other controls as well). Next we get a reference to our <div> element where we want to place the display-picture control. All Windows Live Messenger UI Controls are instantiated through the TagFactory object. Here we simply call the method createTag and pass into it two values. The first is the type of control that we wish to create, in this case the display-picture control. The second value is a set of key:value pairs containing any attributes that we wish to supply. In the example code above we are simply re-creating the <msgr:display-picture> tag we created earlier on the page itself. The only difference here is that we are passing in the cid manually. Finally we simply add this control into the <div> tag we got a reference for earlier.
The final entry in our Javascript file is the event handler for when the user signs out :-
function OnUserSignedOut()
{
//add code for sign-out.
}
And that’s it, you will end up with exactly the same screen as we did earlier, only this time you have gained knowledge in how to do it programmatically.
The basics on what we have covered here applies to all the other Web Messnger UI controls. For example, if we wanted to add the contact-list control to our page we simply add the appropriate tag within our page or do it programmatically :-
<msgr:contact-list word-wheel-enabled="false"></msgr:contact-list>
And this results in the following :-
There are a lot of UI controls to explore. You can find more information about what’s available, their methods and parameters etc. over on msdn :- http://msdn.microsoft.com/en-us/library/microsoft.live.messenger.ui.tags.aspx