Windows Live Messenger Developer Blog

Messenger Web Toolkit Scales for Hotmail and MSN

terry.lentz — Sat, 07 Nov 2009 09:49:00 GMT

Have you ever wondered how well the Messenger Web Toolkit scales? What if we told you it scales enough for some of the largest web sites in the world? Well it does! Hotmail and MSN both depend on the Messenger Web Toolkit to offer instant messaging functionality to their users. Hotmail alone has more than 350 million active users worldwide.

Hotmail (http://mail.live.com)
Hotmail provides users an integrated Messenger experience by re-using their existing signed-in session and providing an extra UI element in the top right corner of their page for signing into Messenger. Users can also decide if they want Hotmail to automatically sign-in to Messenger every time they visit Hotmail.

Once sign-in has completed, users can change their presence and view their contacts via the Messenger drop down menu:

Here is a view of the online contact list:

Double clicking on an available contact opens a separate window in which a conversation can occur:

MSN Canada (http://www.msn.ca)

MSN Canada is taking a slightly different approach to their UI than Hotmail. Similar to Hotmail they re-use any existing Live ID sign-in for the current session. Once sign-in has completed, a Messenger pane with the contact list of the user will appear within the page:

Double clicking on a contact opens a tabbed conversation experience within the pane:

We challenge you to push our product even harder with larger and larger scalable sites!

For more information regarding the Messenger Web Toolkit, please visit:
http://dev.live.com/messenger.

As always, if you have questions regarding the Messenger Web Toolkit, please feel free to visit our forum:
http://social.msdn.microsoft.com/forums/en-US/wlmessengerapidev

Terry Lentz
Lead Software Dev in Test
Messenger Web Platform

Announcing windows live Messenger Web Toolkit v3.5: better UI, faster development, richer experience for non-Messenger users

KeijiK — Thu, 24 Sep 2009 21:37:00 GMT

We’ve been working hard on the Windows Live Messenger Web Toolkit (MWT) which allows you to connect your web site to 330M+ people who use Windows Live Messenger every month! Today we’d like to announce the availability of the Messenger Web Toolkit v3.5 which will enhance the user experience, make it easier to enable sharing via Messenger scenarios on your site (new sharing control), and enable new scenarios (e.g. people who don’t use Messenger will be able to see display pics / names). Specifically, the improvements we have made are:

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.

How did we figure out what are the most important things to get in this release? We listened to and incorporated the great feedback from our partners (some award winning), and were able to come up with new and exciting scenarios.

User Experience: Sexier, faster, supported in more browsers

To bring more people to your site and get them to spend more time there, the user experience needs to be superb. We have made the Messenger Web Toolkit user experience better in many ways:

Speed: In March 2009 we extended Windows Live Hotmail to use the Messenger Web Toolkit (see the post ). By having our bits running at Hotmail scale we were able to gather a ton of information around performance and we’ve acted on it: the MWT will now load faster (full/first time loads and cross page navigation).
Availability/Reach: added browser support for Firefox 3.5, Safari 4, and Google Chrome 2 - now more people can connect & share with their Windows Live friends on your site.
Education: One of the most tangible UX changes we’ve made is the first run experience for the Web Bar (a single control you can use if you don’t want to build your own experience). When you first use the Web Bar on a site, a small popup will inform the user they can sign in and tell them the key things they need to know to start connecting and sharing with their friends.

Looks: we have also updated the web controls and web bar user experience to cleaner

Developers: Easier to add sharing controls and aligned with more tech

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.

Sharing control: aside from in-page chat, the next most common scenario we see is sharing via instant messaging. Sharing content is important and it is often a major driver of user acquisition (or user retention). To understand the differences between sharing via a public feed, newsfeed and instant messaging read my post on user acquisition.

The gist is: a user’s friends are more likely to click through to see the content/service being shared with them if it is done via instant messaging and in a conversational way.

To make sharing via Windows Live Messenger much easier we have created a new control, msgr:share. The sharing control reduces the amount of code required to the following:

// include the JavaScript libraries
<msgr:app … insert the code for app tag here… />
<msgr:bar></msgr:bar>

<msgr:share
message="I am sharing the Messenger Web Toolkit http://dev.live.com/messenger with you"
picker-label="Select Contacts">
</msgr:share>

The control contains a user experience which will sign the user in (via the consent flow), show the contact selector control, and send an IM with the predefined content.

Aside from visible features such as the sharing control, we have also done some infrastructure work. The Windows Live Messenger Web Toolkit is now built with the Microsoft AJAX Library. With this integration, a Messenger Web Toolkit application works with the standard browser runtime library for Microsoft web development tools. Prior to version 3.5, the Web Toolkit worked with the Script# runtime library named 'sscorlib'. See Microsoft Ajax to determine whether you need to make any changes with your application.

Something for people who don’t use or aren’t signed into Messenger

People using Windows Live Messenger generally chat with people they have ‘friended’ in Messenger. However, sometimes people who use Messenger on a web site may want to chat with other people they know from that web site (who are not their friends on Messenger). We call this feature Application Contacts. The cool thing about this is when I sign into a web site (and grant permission to sign into Windows Live Messenger) which uses Application Contacts, other site visitors can chat with me while I’m on the site, or anytime when I have Windows Live Messenger client open (all the time, like hundreds of millions of other people).

We have made a lot of enhancements to Application Contacts (more information ), but the major change is that you don’t need to be signed into the Messenger Web Toolkit for all scenarios. People who are not Windows Live Messenger users (or are not signed into Messenger on the web site) can still see the profile picture and display name of user’s the web site chooses to display. This is particularly interesting for commenting and user profile scenarios. To use this functionality a new Messenger Application Key must be used. This is analogous to a service account. Our documentation on Application Contacts outlines how to get a key.

Previously, if you wanted to show the display pictures/names to a user who wasn’t signed in to Messenger the pics/display name weren’t available. Using the updated Application Contacts functionality you can now show display names and pictures to people who aren’t Windows Live Messenger users (or people who haven’t signed in yet). See the before & after:

Party on

Try out the new bits dev.live.com/messenger and if you have ideas or questions, hit us in our forum .

/Angus Logan, Technical Product Manager

Social website Dernek.ba adds Messenger Web Toolkit

SiebeTolsma — Wed, 09 Sep 2009 01:53:40 GMT

Dernek.ba is a popular social website based in Bosnia and Herzegovina with several hundred thousand users as of February 2009. By adding the toolkit to their website, Dernek.ba now has given its large user base the option to instant message their friends right from the website.

After signing in to the website using their Dernek.ba credentials, the user can then sign in using the Windows Live Messenger Web Bar at the bottom of the page using their normal Windows Live ID. To make using the bar even easier, the whole experience is localized using functionality we launched earlier this year in v3.1.

Using “application contacts”, friends on Dernek.ba can chat with each other without necessarily having to add each other as Messenger buddies, or without having to be online using the desktop client. Another added bonus is that the website uses application display names, so that users can recognize each other by their display name on the website, rather than the one they have set in Messenger.

The Dernek.ba website is a great showcase for what can be done using the Windows Live Messenger Web Toolkit on a social website, using surprisingly very little code. By adding the toolkit, users are able to message each other, see each other’s status and … well, the possibilities are endless :-)

(Read the original announcement on Dernek.ba – Croatian!)

Try out being a control freak without needing to code (Interactive SDK)

alogan — Fri, 14 Aug 2009 08:46:41 GMT

Ever wanted to see what’s possible (and even write code) with web controls just by clicking a few times in the browser? That is exactly what you can do with the Windows Live Messenger Web Toolkit Interactive SDK (WLT iSDK).

You can:

Sign into the Messenger Web Toolkit
Review the list of controls
Change the attributes and instantly see the affect
Interact with the controls
Copy the code into your application

http://messenger.mslivelabs.com

Sign in

Links to MSDN / Additional documentation

Display picture control with presence

Personal Message (status) display and editing inline

Contact list view

Technorati Tags: Windows Live,Windows Live Messenger,Messenger Web Toolkit,MWT,HTML Controls,JavaScript,Interactive SDK

Second Reminder: Important News for Windows Live Messenger Library version 1.0, 2.0, and 2.5 sites

cpark — Fri, 07 Aug 2009 20:58:00 GMT

On August 10th, we are migrating all Windows Live Messenger Library version 1.0, 2.0, and 2.5 sites to Windows Live Messenger Library version 3.1. No action is required on your part. For more information about this change, check out the first reminder.

Once the migration is complete, I will write a blog post to let everyone know.

Windows Live Messenger loves scripters too: how to get it in your PHP web app

alogan — Thu, 23 Jul 2009 00:03:00 GMT

Hey this is James Senior here, Microsoft's Social Web Evangelist. I work on all our Web Platform and Social related technologies and I'm excited to let you all know about some tutorials we have released.

A common misconception is that the cool functionality in the Windows Live Messenger Web Toolkit is only available to developers who are using the Microsoft web platform i.e. ASP.NET. This couldn’t be further from the truth.

The Windows Live Messenger Web Toolkit is entirely client-side based using JavaScript and HTTP endpoints, it will happily run on any platform, any web server and with any scripting language. The Web Toolkit JavaScript was created using Script# which allows you to code in C# and then compile down to JS – neat.

For PHP developers we’ve just released a couple of cool things to allow you to put Windows Live Messenger in your web apps:

PHP Windows Live Messenger Web Tutorial
PHP sample code
Check out the Interactive SDK – cool for checking out samples and code snippets

This means if you code your web apps in PHP, Ruby, Perl etc. you can go ahead and use the Windows Live Messenger Web Toolkit to light up your apps and create cool new social scenarios for people that visit your website.

Enjoy, and let me know how you get on!

Technorati Tags: PHP,Instant Messaging,IM,Windows Live,JavaScript,Chat,Development,Samples,Messenger Web Toolkit

Live Journal brings IM to its users with the Messenger Web Toolkit

offirb — Thu, 16 Jul 2009 21:50:40 GMT

LiveJournal.com is a large online community where users can keep a blog, journal or diary. It currently has millions of users, from USA, Russia, Canada and other countries. By integrating the Windows Live Messenger Library into their site, LiveJournal.com enables their users to communicate directly in real time.

“LiveJournal Messenger is a new service for LJ users that provides a quick and easy way to communicate with your friends. You don't need to install anything to use it — just log in to your LJ account from anywhere and LiveJournal Messenger will appear at the bottom of the page. Whenever you turn on LiveJournal Messenger, you can write directly to your friends and receive instant replies and LJ notifications.“ (LiveJournal.com)

Sites that are interested in using the Windows Live Messenger capabilities but want to develop their own UI will find the LiveJournal.com case interesting. The Messenger Web Toolkit already offers a rich set of UI Controls that allows web sites to easily add a customizable and polished Messenger UI experience. Most web sites developers are encouraged to use the UI Controls. However, application developers can create their own user experience on top of the Messenger Library – and LiveJournal did an awesome job with that.

Important News for Windows Live Messenger Library version 1.0, 2.0, and 2.5 sites

cpark — Mon, 13 Jul 2009 21:16:00 GMT

On August 10th, we are migrating all Windows Live Messenger Library version 1.0, 2.0, and 2.5 sites to Windows Live Messenger Library version 3.1.

For sites that are using one of these versions of the Windows Live Messenger Library, no work is required. We will automatically point these older versions to the 3.1 version of the Windows Live Messenger Library. We already tested that presence and IM work the same between these versions of the Windows Live Messenger Library. During every version update, we work to ensure that all Windows Live Messenger Library changes made since version 1.0 are backwards compatible.

We are providing one month to report any issues your site experiences on version 3.1 before the migration. Any issues identified where version 3.1 is not backwards compatible with version 1.0, 2.0 or 2.5 will be given high priority. Before the migration, we will fix compatibility issues, so you don’t need to change any code on your site.

To test your site using version 3.1, you need to change the script source of your site to point to the 3.1 version of the library.

For example, if you use the 2.0 version of the Windows Live Messenger Library, your script tag should look something like this:

To point to 3.1, this tag needs to be updated to this:

If you experience any issues with the migration from versions 1.0, 2.0, or 2.5 to version 3.1, please let us know in the Messenger Web Toolkit forum.

UI Controls now available in over 40 languages!

SiebeTolsma — Tue, 07 Jul 2009 21:26:00 GMT

Hello! Hallo! Guten Tag! Buenos días! Hola! Alo! Hallå!

It’s just a selection of some of the languages the UI controls are now available in. We are very excited to announce that in total over 40 new languages are available for the UI Controls, as well as greatly improving support for right-to-left languages! Because localization is such a hip new feature, we have also decided to update the version of the library to 3.1. To get the new localization functionalities, you will need to point your loader to the following:

http://www.wlmessenger.net/api/3.1/loader.js

For a complete overview of all the languages that are available, please view our Appendix A: Supported Languages on MSDN.

Getting the language you want

Once you’re pointing to the new version of the library, there are several supported ways of getting the language you want, depending on the way you interact with the library. The first and easiest is to either add the lang or the xml:lang attribute to the html tag. For most developers this is the preferred choice. Please note that for some languages, such as Hebrew, you will also have to include the dir attribute in the <html> tag to make your page use right-to-left.

   1: <html lang="nl">

   2: <html xml:lang="de">

   3: <html lang="he" dir="rtl">

The second way to get the language you want is to manually initialize the loader. It is a little more complicated. We recommend using one of the above methods instead.

   1: <script type="text/javascript">   2:     var loader = Microsoft.Live.Core.Loader;
   3:         loader.initialize({ 'market' : 'es' });
   4:         loader.load(['messenger.ui', 'messenger.ui.styles.core']);
   5: </script>

Beware of changes to the mark-up!

Although we always try to keep everything backwards compatible, we have made some small changes to the mark-up and style sheets of the UI Controls in order to support all the various new languages. If you are styling the UI controls yourself, then you may be affected by these breaking changes. If you are only using the default styles however, this does not apply to you.

Sign In Control

To localize the sign in control button, we had to swap the single sign in button image for regular HTML. If you are using the text-only version of the sign in control (by setting the size=”small” attribute) then this should not affect you. If you are using the medium or large sign in buttons however, please note that the single image with the CSS class “SignInControl_Image” has been replaced with:

   1: · SignInControl_Graphic

   2:     · SignInControl_Graphic_Left: The image to the left of the text

   3:     · SignInControl_Graphic_Text: The text within the sign-in tag

   4:     · SignInControl_Graphic_Right: The image to the right of the text

Credits Dialog

In case you went all out and also styled the credits dialog (available by clicking on the Windows Live Messenger logo in the bar and selecting “About Messenger” in the menu), then you should be aware that the Windows Live Logo in the credits dialog has been moved outside the enclosing DIV.

Display Name Control

A new CSS class has been added to the display name control to make styling easier. The new class is applied to the A element which contains the link to the user or contacts profile in case linked is set to true in the msgr:display-name tag. The new CSS class is DisplayNameControl_ProfileLink.

Get started now!

We hope you enjoy using and developing with the new localized controls :-)

Siebe Tolsma
Software Development Engineer
Messenger Web Platform

Photobucket adds Sizzle and Sharing via IM to Spice Up Photo Search

alogan — Fri, 19 Jun 2009 02:33:59 GMT

Like Bing’s great multimedia search? Did you know other companies are innovating in the multimedia search space?

Today Photobucket announced their own way to push the boundaries of visual search. They combined a killer user experience (based on Silverlight) with one of the most popular sharing behaviors on the web – instant messaging.

Try it now at http://photobucket.com/visualsearch

Consumers are able to easily share pictures they find via Photobucket with their friends on Windows Live Messenger no matter where they are signed in (Messenger on Windows, Mac, or Mobile devices).

The Windows Live Messenger Web Toolkit UI Controls provides a skinable and flexible way to interact with the 320+ million people who use Windows Live Messenger monthly. The UI controls can be easily integrated (see Interactive SDK) in web sites and makes a lot of the heavy lifting (coding JavaScript) only required if you want a fully custom experience.

<msgr:contact-list word-wheel-enabled="true" sort-mode="status" hide-offline-contacts="true"></msgr:contact-list>

Sharing via Instant Messaging

Lots of web sites today allow sharing via activity streams/feeds, recently I did some analysis into the differences between sharing via Streams and sharing via instant messaging. Check it out.

Below are screens of the experience from consent to sharing

Sharing a photo with my friends

The friend I shared it with gets this experience

---

Angus Logan cross-posted this from here.

Senior Technical Product Manager

Technorati Tags: instant messaging,photos,search,visual search,social media,sharing,IM,windows live messenger,messenger,photo sharing,Photobucket,windows live

User acquisition: writing on a notice board vs. sending a postcard

alogan — Mon, 15 Jun 2009 03:55:30 GMT

Getting people to your website is critical (D’uh!). New people. Old people. A constant flow of sharing and content discovery is required to succeed. Recently I’ve been thinking a lot about two complementary user acquisition/engagement techniques: sharing via the stream (passive) and instant messaging (active) (I don’t cover email which is another huge topic).

Which one has the biggest impact on your web site? In this post I review the typical relationships between people and drill into each of these flavors as ways to generate qualified referrals.

An example of where these could be used together is MapMyRun: when I complete a run I like to get my time etc. posted into my twitter so all my followers can see. I usually also send an instant message to my friends who run and talk about the course, time and perhaps organize a run. This drives awareness for MapMyRun and allows people to click through to see the details.

Caring about sharing is good business

User generated actions which are syndicated to other sites/services can have a big impact on user acquisition and engagement. By allowing users on one site to share their actions with another service, the reach of people who see (awareness) and take interest (acquisition) is increased.

Ego powered friending frenzies don’t encourage influence

The better you know someone, the more likely you are to do what they suggest. When it comes to sharing content/actions online with other people, the sharer is asking the recipient(s) to do something (usually click through to see the detail).

As a result, some services encourage ego powered friending frenzies. The result is very loose relationships between people you barely know, don’t really care about, and who haven’t earned your trust. If these one of these pseudo friends asks you to do something you take it with a grain of salt.

My experience is: the friends I form relationships with in many different contexts make me behave differently. For example a friend I instant message with is different to someone I’ve friended in a social network, which is different to someone who’s commented on my blog etc.

If you are a celebrity and you have a TON of followers, writing something to your stream is very powerful. If you aren’t Ashton but have a ridiculous number of friends, do they care about your entries or are they noise?

Call me anytime, I actually know you

The people who connect with my over instant messaging are generally less in number and long time friends, not just acquaintances (in most cases, not all). Allowing a person to see when I’m online/offline and giving them the ability to get my attention anytime is convenient, but more importantly it means I trust them.

As a result, the behaviors that happen over instant messaging are generally self-regulating. If I always send a message to someone and they never respond, I’m likely to stop. If I send a message to someone and they’re always engaged (click through etc.) I’m likely to do it more often. Where there is a will there is a way, abuse is something you need to deal with: don’t be afraid to ignore (like screening a call) or block if required.

Floating down the stream (passive)

Most web sites which have a desire for viral user acquisition have the ability to publish to a stream. This piece of content is then made visible to the large number of people that I’m friends with (or are following me) in other experiences on the site, or in experiences managed by other services. Writing to the stream is an untargeted shotgun style broadcast.

When something is written to a stream it allows many people to see the content in an ambient manner. For people to connect with the content, they need to be in the right place at the right time and have strong filtering skills to separate the wheat from the chaff.

It’s temporal. Streams constantly move, when I wake up in the morning I scroll back a few hours in my stream to see what’s happening, I don’t rewind the actions back to the last thing I viewed.

A benefit of writing something to the stream is that the content is archived. If the stream is searchable it’s easy to see trends and find historical information. If I respect someone a lot and think they share great content I can easily view the things they’ve been doing in one place.

Sharing via instant messaging (active)

When I find something interesting I think one of my friends would care about, I usually have a friend (or a small) group of people in mind. Instant gratification comes with my Generation Y’ness – I share something with the people I know is available and cared about it to discuss with me.

This type of interaction can be delivered via instant messaging.

Who is online right now? (presence)
Are they likely to respond? (my knowledge)
Sending them the link
Sending some commentary and discussing

When you receive an instant message because of the deeper relationship between the participants the natural behavior is to respond. If for some reason you don’t want to respond you can always “screen” the conversation (similar to a phone call from someone you are avoiding).

Make the discussion real-time, natural and persisted

The conversations I have in instant messenger related to content are verbose and often lead down many different paths. With the caveat of being clearly made aware of what is happening: imagine being able to capture these rich real-time discussions and store them with the original content. The content of the discussions could be searched and read by others. Friend-feed is part of the way there in terms of real-time conversations, but the interaction is somewhat unnatural for the hundreds of millions of people who have instant messaging applications on their computers.

Summary

Sharing content is a weapon in the battle for user attention. There are many different ways of sharing content, all are complementary.

Publishing to a stream/feed allows me to share this with many of my friends/acquaintances on another service but is untargeted and facilitates ambient discovery of content.
Sending content via instant messenger is very focused to people who I believe will care about the content and facilitates active discovery of content.

If you want to plug into the largest IM network in the world, check out the Windows Live Messenger Web Toolkit (interactive SDK) and watch this space for real world implementations.

Thanks,

Angus Logan

Senior Technical Product Manager

---

This was a cross post from my blog

---

Technorati Tags: user acquisition,social media,instant messaging,streams,feeds,friending,friends,online marketing,TAC,viral marketing

Announcing the Messenger Web Toolkit Interactive SDK!

terry.lentz — Wed, 27 May 2009 21:47:00 GMT

With the release of the Messenger Web Toolkit we are providing a new Interactive SDK at http://messenger.mslivelabs.com. This should be one of the first places developers go when starting out with the Messenger Web Toolkit.

Using the Interactive SDK, developers can:

· Walk through the steps required for adding the Messenger Web Toolkit to their site(s)

· Preview controls and experiment by customizing attributes in real-time

· Generate per-control markup that can easily be copied/pasted

· Find links to MSDN documentation for each control and get a sense of how controls are used

We are continually evaluating ways to improve the experiences we offer to developers and would love to hear from you. If you have feedback on the Interactive SDK or anything we could improve, please visit our forum.

Thanks,

Terry Lentz
Lead Software Test Engineer
Messenger Web Platform

Messenger Hackathon: Come hang with us in SF!!!

KeijiK — Sat, 09 May 2009 00:10:00 GMT

Where can you go on a Wednesday night, have beer and pizza, and talk to the people that built the Messenger Web Toolkit?

Why, that would be the Live Services Hackathon for Messenger on May 27th in San Francisco!

Come join us, meet business shakers and coding movers from companies all around, and learn how to add Messenger to your web site directly from Microsoft engineers and product managers!

Learn more details at http://hackathon.eventbrite.com/ and register today!

We look forward to seeing you there!

The Messenger Web Toolkit team

Don’t use crazy CSS

SiebeTolsma — Sat, 02 May 2009 00:36:52 GMT

With the updates released this week, I would like to take some time to talk about styling the UI Controls, and perhaps more importantly, about how not to style the UI controls.

What is important to understand about the UI controls is that they are powered by your every day garden variety (X)HTML and CSS. They are not encapsulated by IFRAME elements, and live right on your own web page. This not only makes it very easy to add them to your site, but also to style them. You can refer to our online documentation to quickly get a list available CSS class names you can use to adjust the look & feel of the UI controls.

Crazy CSS

However, this also means that they are affected by what we call “crazy CSS”. In this case, you are defining CSS that simply affects too many elements. For example, you may define the following CSS:

   1: img

   2: {

   3:     padding: 5px;

   4:     margin: 0px;

   5: }

You might say, “well, that’s exactly what I want – padding around every image, but no margin!”. It will probably look good on your website, after all, you designed it that way. But if you are using the UI controls and included our pre-made styles (a wise decision), something is bound to go wrong. Let’s look at the Messenger Bar when the above style is applied (click for a larger image):

Oops! We just forced every image, including those in the bar, to have more padding than the styles were designed for. Remember, the UI Controls live on your page, so by applying the style for “img” to your page, you not only affect your own images, but also those used in the UI Controls, such as the various icons!

Similar issues occur when you apply styles directly to for example DIV or SPAN elements, or perhaps even the BODY element for font weight, text align and so on. While we try our best to work around these problems, sometimes we need a little help from you, the developer. The best way to solve these problems is to add a separate CSS class to your own images. For example, “MyImage”. Once you add this class to your image using the class attribute in HTML you can then apply a style directly to that class, instead of every image on the page. For example:

   1: img.MyClass

   2: {

   3:     padding: 5px;

   4:     margin: 0px;

   5: }

Now the padding and margins are only applied to your own images, but not to those in the Messenger Bar and other UI Controls.

The Matryoshka controls

Like the famous Matryoshka doll, some of the UI controls are made out of other UI controls, and so on. It is important to remember that while those controls are inside other controls, they still have exactly the same CSS classes set. So, if you apply a style to for example “.ContactListControl”, you are in fact applying it to three controls: The Contact List control, the contact list in the Messenger Bar, as well as the Contact Picker control! Other examples of such controls are the Profile control, the Conversation control and the Conversation List control. All of these use (for example) the Display Name control, Presence controls, and so on.

While most of the time you will want to create a consistent look for the UI controls (and so, style them globally), other times you need to be a bit more specific in order not to affect the controls inside the bar or other controls. You can do this by wrapping a control in a DIV element and applying an additional class to it, like in the example below. This way, you can apply styles to “.MyContactList .ContactListControl” without affecting other controls!

   1: <div class="MyContactList">

   2:     <msgr:contact-list></msgr:contact-list>

   3: </div>

To stay on the subject of objects within objects, let’s also take a look at the way we deal with the various images in the controls. If you’ve looked at the images we use in the controls, you’ll notice that almost every single one of them points to a single one by one pixel transparent GIF image. We then apply a background image using CSS to that image to make it show up. This way, you can easily substitute our images for your own, by simply overriding the “background-image” CSS property.

But wait, there’s more! In order to save time and bandwidth, we have created a so called “tiled” image. In other words, we have put all our images into two or three bigger images, and then using background positioning (using the “background-position” CSS property) to show the correct one. So, in order to change the images used by the controls, you will also have to set the background position to either your own values (in case you want to use image tiling as well), or the default. For example:

   1: .Dialog_Header

   2: {

   3:     background-image: url(http://www.example.com/image.png);

   4:     background-position: 0px 0px;

   5: }

To learn more about styling the UI controls, check out this blog post by Steve Gordon, or go to MSDN for our online documentation. Happy styling!

Cheers,

Siebe Tolsma
Software Development Engineer
Messenger Web Platform

Messenger Web Toolkit Updated!

KeijiK — Thu, 30 Apr 2009 04:16:00 GMT

Hi,

We want to let you know that we have rolled out an update to the Messenger Web Toolkit.

With this update,

The Messenger Web Toolkit UI Controls should work better in IE6
We have changed the sign in text from “IM Here” to “Sign In” to make it more clear what it does
Performance should be better when going from page to page

We are also working on more exciting updates for the future.

Let us know if you have any feedback!

Thanks,

Keiji Kanazawa