Welcome to MSDN Blogs Sign in | Join | Help

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

 

imageLike 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.

image 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).

imageimage

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

image image image  image imageimage image image image

Sharing a photo with my friends

image image image image

The friend I shared it with gets this experience

image image  image

---

Angus Logan cross-posted this from here.

Senior Technical Product Manager

 

image 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?

image

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.

image

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).

image 

image

image

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

---

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

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

 

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):

crazycss


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

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

Hi everyone!

Last month, while we were busy launching the Messenger Web Toolkit beta at Mix09, Hotmail quietly introduced its Web IM feature in a few markets.  Yesterday, Hotmail Web IM became available in a lot more markets, including Brazil, Canada, China, Germany, the Netherlands, Norway, and the USA.

Here, at the Messenger Web Toolkit team, we are very excited because Hotmail Web IM is built on the Messenger Library just like the rest of the Messenger Web Toolkit!

Hotmail relies on the Messenger Web Toolkit to deliver IM for hundreds of millions of users.  Why don't you!

You can learn more about Hotmail's Web IM at the Windows Live blog, and you can learn more about the Messenger Web Toolkit at http://dev.live.com/messenger/

Cheers,

Keiji

[This is a guest blog post by Ed Kaim. Ed runs SharpLogic, a technology consultancy in Redmond, WA, that specializes in using Microsoft platform technology to build RIAs. SharpLogic has worked with the Messenger API from its earliest days to build collaborative software.]

I was recently working at my desk when I had the revelation that Windows Live Messenger is my most-used application. It occurred to me that virtually every aspect of my computing life involved Alt+Tabbing between a piece of software and an IM conversation.

  • When in Office I was pinging people for data and to review documents together.
  • When in Visual Studio I would switch to chat about design issues, bugs, and source control.
  • When in a browser, I was constantly sending and receiving links to news, videos, etc.

As a collaborative tool, Messenger helps me solve a lot of the issues I’d have a difficult time dealing with over the phone (inconvenient) or in email (too slow). However, there is still one inconvenience with IM in that it breaks my workflow. Right now I have to leave whatever I’m doing to jump over to IM to collaborate, and then leave IM to get back into the original app. It’s not necessarily a big deal, but why isn’t the integration better? For example, wouldn’t it be great if I could just IM a video directly from YouTube to someone on my contacts list? What about notifying a colleague I’m waiting for an exclusively checked-out file directly from VS?

This is the dream of true real time social collaboration, and we’re a step closer today.

The recently released Windows Live Messenger Web Toolkit enables developers to expose IM capabilities from their Web applications. With these features integrated, users can log into Messenger while on a Web site, and then the site can help them collaborate with other users via IM without having to leave the original experience.

The Toolkit provides the Web Bar and a set of HTML UI controls to make development incredibly easy. You can literally integrate IM with your site in a matter of minutes.

However, some sites will want to go even further. If you think about a great collaborative experience, sending IMs seems kind of primitive. Sure, it’s great that I can IM you a URL, but wouldn’t it be better if I could send you a site-defined “recommendation” that would be treated differently?

We’ve actually done this with Boost Events, a SharpLogic venture. Boost Events is a set of software and services designed to deliver great experiences for conferences. Our Silverlight UI integrates Windows Live Messenger so users can collaborate via IM while watching sessions, as well as being able to recommend sessions to each other.

In the screenshots below, two users have logged into Messenger from http://events.boostweb20.com/Events/MIX09. To recommend a session to another user, the first user drags that session’s tile onto an IM conversation. The recommendation is serialized and sent over the Messenger channel as an “application message”, which is deserialized and treated specially by the application to expose its own functionality. Messenger provides the underlying channel for messages, so there is no impact on our servers. Application messages are treated like other messages in the system, except that they’re not surfaced as text IMs since they’re intended to be transparent to all clients except those that expect them.

clip_image002

To access this ApplicationMessage level of functionality in the Toolkit, you’ll want to dig down to the Messenger Library. This is a JavaScript API that provides full access to everything the Toolkit exposes. Not only can you remote data between two users via the ApplicationMessage, this API also enables you to define and manipulate custom presence values so that users can know what their friends are doing on your site, as well as other cool stuff.

There are 2 classes you’ll need to create to use ApplicationMessage functionality:

  1. Create a custom ApplicationMessage class. This class contains the data you want to send from one user to another. It also contains your app-defined ID. This ID must be lowercase and up to 64 characters. You should try to make this ID as unique as possible, although it must always be the same for this message class.
  2. Create a custom ApplicationMessageFactory class. This class will define how to serialize and deserialize your custom ApplicationMessage to text so it can be sent over the Messenger channel.

There are 3 aspects to using the ApplicationMessage functionality at runtime:

  1. Registering your ApplicationMessageFactory.
    1. After the user logs in, create a new instance of your ApplicationMessageFactory.
    2. Set the user’s User.MessageFactory to your new instance.
    3. Check to see if your ApplicationMessageFactory is registered by calling your ApplicationMessageFactory.IsRegistered with your custom ID.
    4. If not, use ApplicationMessageFactory.Register to register it.
  2. Sending ApplicationMessages.
    1. When sending an ApplicationMessage, perform the following checks to be sure the other party can accept the messages:
      1. Make sure Conversation.SupportsMessageType supports MessageType.ApplicationMessage
      2. Make sure Conversation.SupportsApplicationMessageType supports your custom ApplicationMessage ID
      3. If the user doesn’t support either of these, then they won’t receive the custom message, so you should fall back to a text IM or send nothing.
    2. Send the message by passing an instance of your custom ApplicationMessage to Conversation.SendMessage.
  3. Receiving ApplicationMessages.
    1. When handling the Conversation.MessageReceived event, check the value of incoming MessageReceivedArgs.Message.Type to determine if it’s an ApplicationMessage.
    2. If so, cast it to ApplicationMessage and check its ID to see if it’s yours.
    3. If so, cast it to your custom ApplicationMessage.

Work is required to take advantage of the real time collaborative features in the Messenger Library, but it’s a fraction of what you’d need to invest if you were to build it on your own. Given the maturity of Messenger as an IM tool, as well as its ubiquity among users, it should be an easy choice to use this platform to extend your site with collaborative features.

The Windows Live Messenger Library 3.0, that is included in the latest release of the Messenger Web Toolkit, introduces a few user experience improvements. The previous versions of the Messenger Library used session based messaging for IM conversations. As with any session based protocol there was a noticeable delay between the session initiation and the time the users could actually send messages. The newer version uses a new messaging feature that makes it possible to send messages without the need for creating a session.

                                                                                                                                                                                                                                                        

Additionally, the Messenger Library’s polling mechanism to fetch messages from Messenger has also been improved.  The previous version used a single channel to make HTTP requests but in the new version the polls happen on two different channels. This means that in any given time there is at least one ready connection to Messenger.

 

In short this means a great integrated IM experience for the users of your web application with the performance on par with desktop applications. By simply migrating your application from 2.5 to 3.0, you will see these improvements instantly. As always, your continued feedback is highly appreciated.

 

Jeenandra Kumar

Software Design Engineer

Messenger Platform Team

Getting Users Engaged

One of the biggest challenges that User Generated Content sites face is getting users to participate.  Users need to feel engaged and comfortable on a site before they choose to spend their time writing comments, uploading photos or sharing links.

Users feel more engaged and comfortable on your site when they see their own name and face.  The Messenger Web Toolkit provides access to the Windows Live Profile of your users.  The Windows Live Profile contains the display name, display picture, and personal message that your users are already sharing with their friends in Windows Live Messenger.

Windows Live Messenger users invest a lot of time changing their status messages, display pictures and display name to reflect their mood. Now, this personal expression can be shared with others on your Web site.

Using the Messenger Web Toolkit with User Generated Content

To use the Messenger Web Toolkit with User Generated Content, you need to store the identifier for the Windows Live User when they upload content and you need to retrieve and use the identifier for the Windows Live User when someone views their content.

Before you do any of the stuff below, your site needs to be set up for the Messenger Web Toolkit and the UI Controls.  See Getting Started with the UI Controls and the Getting Started sample application.

When a user posts content to your site, you need to get the Windows Live identifier called a CID.  The CID can be retrieved from the consent token.  If you are using the Web Toolkit without storing the consent token, check to see if there is a cookie called msgr-consent-token.  If this cookie is available, you can get the CID from the cookie like below in Ruby:

   1: @@login = WindowsLiveLogin.initFromXml("config/settings.xml")
   2: consent_str = cookies["msgr-consent-token"]
   3: consent_token = @@login.processConsentToken(CGI.escape(consent_str))
   4: cid = consent_token.cid

In your database, you would want to store the CID with the content that the user uploaded.

Once you are properly storing the CID in your database, you need to update your pages, so that you can show the Windows Live profile of the user who uploaded content.  For example, let’s say you want to display comments and your code looks like this before using the Messenger Web Toolkit:

   1: <div class="Comments">
   2:     <% @comment_a.each do |comment| %>
   3:         <div class="Comment">
   4:             <div class="CommentDetails">
   5:                     <span>
   6:                         <%= comment.name %>
   7:                     </span>
   8:                 <%= comment.comment %>
   9:             </div>
  10:         </div>
  11:     <% end %>
  12: </div>

If all of your comments have a CID associated with them, you can update your comment code to look like this:

   1: <div class="Comments">
   2:  <% @comment_a.each do |comment| %>
   3:   <div class="Comment">
   4:    <div class="CommentPhoto">
   5:     <msgr:display-picture cid="<%= comment.cid %>">
   6:     </msgr:display-picture>
   7:    </div>
   8:    <div class="CommentDetails">

9: <msgr:display-name cid="<%= comment.cid %>"

default="<%= comment.name %>">

  10:     </msgr:display-name>
  11:     <%= comment.comment %>
  12:    </div>
  13:   </div>
  14:  <% end %>
  15: </div>

Now, your site is using the UI Controls and the Messenger Web Toolkit to show the display picture and display name next to each comment.

To take this scenario to the next level, you could enable a conversation to be started whenever someone clicked on the display picture of a commenter.  To do this, you need to use the Windows Live Messenger Library.  First, you would need the JavaScript function to start a conversation:

   1: <script type="text/javascript">
   2: function startConversation(cid) {
   3:   var user = Microsoft.Live.Messenger.UI.Tags.TagsFactory.get_user();
   4:         
   5:   var contact = user.get_applicationContacts().findByCid(cid);
   6:     if(contact != null) {
   7:       if(contact.get_currentAddress() != user.get_address()) {
   8:         user.get_conversations().create(contact);
   9:       } else {
  10:         alert('You can\'t create a conversation with yourself :-)');
  11:       }
  12:     } else {
  13:       alert('Sorry, a conversation could not be created.');
  14:     }
  15: }
  16: </script> 

Then, you need to add an onclick event to the display picture to trigger the start conversation function:

1: <div class="CommentPhoto"

onclick="startConversation('<%= comment.cid %>');">

2: <msgr:display-picture cid="<%= comment.cid %>" size="medium">

</msgr:display-picture>

   3: </div>

Now, you have full featured comments.  Users can show their Windows Live profile next to their comments.  If a user really likes a comment, she can click on the display picture of the commenter and start a conversation right on your site.

clip_image001

You can download the complete sample application.

With the Messenger Web Toolkit, you can make user generated content on your site more compelling.  To learn more, check out the MSDN documentation of the Messenger Web Toolkit. 

To find out about other ways you can use the Messenger Web Toolkit to enhance your site, check out Five KILLER Scenarios using the Messenger Web Toolkit.

Thanks,
Chris Parker
Program Manager
Messenger Web Platform

The Messenger Web Bar shipped with the recent release of the Windows Live Messenger Web Toolkit. The Web Bar provides a very usable default instant messaging experience for web sites – it includes a contact list, a profile area, and support for displaying ongoing conversations. It is meant to augment and not distract the user from your web site.

Since the Web Bar and all of the UI Controls are constructed using HTML and CSS, web sites have complete control over how the controls appear to the user. With this flexibility, there is a wide range of customizations that a web site can do, ranging from simply changing the font color, to providing a completely custom experience akin to some of the creations you might find on the CSS Zen Garden.

For the purposes of this tutorial, let’s stick with something in between. I won’t change the size and structure of the Web Bar; instead, I’ll focus on colorizing it to match three different themes: Dark, Blue and Pink.

Note: You can skip to the bottom of this tutorial to directly download these three themes.

The first step is to do an inventory of the different images used to compose the Web Bar. By inspecting the DOM of the bar in Firebug or IE8’s new developer tools, you will find that there are 7 images that need to be changed. These include the background image for the bar itself as well as an image used to construct the header of various dialogs.

Once you’ve customized these images to your liking, the next step is to create CSS that references these new images. For example, the CSS below updates the images used for the bar itself and the headers of the contact list and profile area.

.MessengerBarControl.Bottom .MessengerBarControl_Container
{
    background-image: url(BgBottom.png);
}

.MessengerBarControl.Bottom .ProfileControl_Header,
.MessengerBarControl.Bottom .ContactListControl_Header
{
    background-image: url(Header.png);   
}

Now that you’re using the new images that you created, you may need to make further modifications to refine the experience. In all three of the included themes, the border color has been lightened, which required the border-color property to be updated throughout the bar. In the case of the Dark theme, text colors needed to be inverted. In the Pink theme, the Selected and Hover classes were updated to be a matching pink color. Here’s an example of the Pink theme in action:




We will be looking at incorporating these and other themes directly into the Web Toolkit in future releases. As always, please continue to provide us your feedback. Also: if you create a cool theme, let us know!

Thanks,
Steve Gordon
Development Lead
Messenger Web Platform

The latest release of the Windows Live Messenger Web Toolkit not only makes it easier than ever to add great social capabilities to any web site, it also introduces few capabilities that make the Windows Live Messenger Library more powerful and extends it to more web scenarios.  


One of these features is cross-page support. With cross-page support the web user can remain signed-in as the user navigates or when the user submits a page. The Messenger Library will use the browser’s local storage capabilities to persist the user’s state as navigation occurs. The user will be able to resume ongoing conversations while navigating in the web site.


If you are a web application developer who has already integrated with Windows Live Messenger Library, the good news is that is no code change is required in order to ‘turn-on’ cross-page support. Applications that directly use the Messenger JavaScript Library should simply continue to create a user object and sign-in the user in each page. The Library will automatically use locally stored information to resume the user session as the page loads. Application developers that prefer the ease and flexibility of the UI Controls or the Bar will also benefit from cross-page without any special coding required.


To implement client-side persistence, the Web Toolkit uses the latest HTML 5 DOM-Storage standards which have proven to be fast and secure. If the user happens to be using a non-HTML 5 browser like Chrome 1, Safari 3, Internet Explorer 7 or FireFox 1.5, The Library will choose the best local storage technology available for that browser.


In an advanced scenario, an application may be interested in differentiating messages and conversation that were created on the current page versus ones that are carried over from previous pages that the user has visited in this session. For that use-case, the Reloaded Property was added to the Conversation class and to the Message class. For example, the Web Bar uses these properties to make sure that ongoing conversations do not blink when the page is loaded.


The locally stored cross-page information will expire as soon as the user is signed-out. The information is also domain-isolated – The user will need to sign back-in when navigating between two web sites that use the Web Toolkit, if those sites are on different domains.


As always, we welcome any feedback you may have about the Messenger Web Toolkit.

 

Offir Bakshitz
Software Design Engineer, Messenger Platform Team

In case you weren't able to accompany us at Mix, you can check out the presentations that discussed the Messenger Web Toolkit:

Take a look at your leisure and let us know what you think!

Thanks,
Steve

If you're at Mix09, come meet us and learn more about the Messenger Web Toolkit!

We'll be at 3rd Place from 1-2PM.

See you there!

Windows Live Messenger Web Toolkit team

 

More Posts Next page »
 
Page view tracker