<3 the New Windows Live Messenger Web Toolkit for Social WebsitesKeiji Kanazawa * Steve GordonProgram Manager * Development LeadMicrosoft Corporation

Big Competition for User Minutes

You Want to Grow Your Site Traffic

Make Your Site Social & Sticky

=+

Your Site

Go Social with Messenger

320 Million Users

Windows Live Messenger Web Toolkit

introducing

What's the Web Toolkit?

JavaScript & HTML tools which instantly add social to sites

Your Web Site

Messenger

Service

Messenger Web Toolkit

Identity

Content

Speed & Flexibility

Web Bar

Speed o

f dev.

Flexibility

UI Controls

JavaScript Library

Application

Messenger Web Bar

demo

Messenger UI Controls16 stylable HTML Controls for common

scenarios

Profile Presence Contacts Chat Web Bar

Display Picture and Display Name

Controls

<span style="font-family: Segoe UI; color:#262626">Hello <msgr:display-name cid="$user" /></span>

Messenger Library

Build completely custom UIAdd scripting behaviors to UI Controls

Make your site social

& sticky

Bring People To Your Site

Photo Application

Effective UI

demo

Behind The Scenes

Web BarContact Picker ControlUI Control CSS CustomizationMessenger LibrarySilverlight Scriptable Objects

Have People Spend More Time on Your Site

Application Contacts

Brian is my fav

No! Dan is better!

Come back, I didn’t

mean it

Users can Websites can

Chat with Site Friends

Grow Social Graph

Re-Engage Users

Connect with new

people

Reach People Everywhere

Site users can talk to each other as long as one of them is on the site

Thanks!

I love your work!

UGO GameConnection(Hearst)Clock Four

demo

Behind The Scenes

Web BarApplication ContactsMessenger desktop client

Build Instant Social Network

Make People Feel At Home

See friends the second I join a site!

Messenger Friends on Pulse

Everybody Knows Your Name

Show your Messenger personality everywhere

Using the Messenger Web Toolkit:Bring people to your site

Make people feel at home

Create new connections

Have people spend more

time

Steve GordonDevelopment LeadMicrosoft

Go Social in 20 minutes

Adventure Works Pulse

Photo-sharing websiteRelies on user-generated contentScenarios:

Upload your photosView and comment on others’ photos

Adventure Works Pulse

Standard n-tier applicationAsp.net frontendSQL Server backendNeither required – only for illustrative purposes

Key pagesDefault.aspx – home pageViewPhoto.aspx – renders a photoUserProfile.aspx – your profileViewProfile.aspx – renders a profile

Uses jQuery client-side

demo

Lap around Pulse

Aside: Delegated Auth Primer

Users are sharing real informationUsers must grant consent to your app once

Now…Messenger integration

Get an application IDTake our sample code…

Cross-domain channelWindows Live Login codeMessenger Token code

Add a few lines of markup…XHTML namespaceScript reference & initializationmsgr:app tagmsgr:bar tag

demo

Pulse Messenger-ified(Part 1)

Now…what about scenarios?

Let’s have users:Sign in with their Messenger IDShow their Messenger profile

Display picturesDisplay names (e.g.: “Steve”)Presence (e.g.: “Busy”)

Chat with Pulse contactsUsing application contacts

demo

Pulse Messenger-ified(Part 2)

Pulse Polished

Provide your:Application nameApplication logo

Customize our CSSStyle our documented classesReference your stylesheet

demo

Pulse Messenger-ified(Part 3)

Easy to Get started

Interactive SDK

Try out the Web Toolkithttp://messenger.mslivelabs.com

Interactive SDK

demo

Adventure Works Pulse Sample Site

Social site for photo sharingContains advanced scenarios

Scripted behaviors with Messenger Library

C#

Sample Code

Getting Started Web site for hosting UI Controls

Working with Windows Live ID Delegated Authentication

Working with Application Contacts

C#

VB

PHP

Ruby

Java

Python

Perl

Make YOUR Site Social in 30 minutes!

Challenge

Summary

Big competition

for user attention

Make your site social and

sticky

Adding Messenger is easy and fast

Shape the product with

your feedback!

Next Steps

Resources

dev.live.com/messengermessenger.mslivelabs.com

Interactive SDKDownloads

SamplesAPI reference

blogs.msdn.com/messengerMSDN forums

Sessions

A Shot of Windows Live Messenger and a Pint of Microsoft Silverlight

Jordan Snyder – Effective UIMarch 19 |10:55-11:15AM | San Polo 3401MIX09-T84M

Five Killer Scenarios for the Windows Live Messenger Web Toolkit

Chris Parker – MicrosoftMarch 19 |11:20-11:40AM | San Polo 3401MIX09-T75M

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after

the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.