Sunday, March 9, 2008

HowTo: Create Live Messenger Activity for your site


This article shows you how to create Microsoft Live Messenger activity that enables web page visitors to send page URL through Messenger by just clicking a link/button on a web page.

First let's take a look under the hood of messenger activity.

Messenger activity runs on converstaion window. That means inside conversation windows runs Internet Explorer which opens certain url (specified in activity parameters). This page that is opened in conv.window has serveral javascript objects through which you can manipulate sending/receiving IMs/data and do many more magic things.

So to make it possible for 2 parties to launch your activity we should
1) Create webpage (e.g http://plugor.com/someurl.html ). This page is opened in conversation window on every participiant, and it also contains javascript code that sends/receives data/IMs between participiants.
2) Create MSGRP2P.xml file and put it into every computer you want to be able to run your activity.
To make your activity accessible to whole world you must register it here: http://gallery.live.com/submit.aspx?bt=11 .

MSGRP2P.xml file:



<?xml version="1.0"?>
<Entry>
<EntryID>7</EntryID>
<Error />
<Locale>en-US</Locale>
<Kids>0</Kids>
<Page>1</Page>
<Category>50</Category>
<Sequence>10</Sequence>
<Name>example.com IMThis</Name>
<Description>My 1st Activity</Description>
<URL>http://plugor.com/activity.html</URL>
<IconURL />
<PassportSiteID>0</PassportSiteID>
<Type>App</Type>
<Height>500</Height>
<Width>500</Width>
<Location>side</Location>
<MinUsers>2</MinUsers>
<MaxUsers>2</MaxUsers>
<PassportSiteID>0</PassportSiteID>
<EnableIP>False</EnableIP>
<ActiveX>True</ActiveX>
<SendFile>False</SendFile>
<SendIM>True</SendIM>
<ReceiveIM>True</ReceiveIM>
<ReplaceIM>False</ReplaceIM>
<Windows>True</Windows>
<MaxPacketRate>120</MaxPacketRate>
<UserProperties>True</UserProperties>
<ClientVersion></ClientVersion>
<AppType>0</AppType>
<Hidden>false</Hidden>
</Entry>

EntryID must be 7 for testing
ActiveX must be enbled for IE6.
More information about MSGRP2P.xml parameters:
http://msdn2.microsoft.com/en-us/library/aa751045.aspx

MSGRP2P.xml must be in same directory where live messenger .exe is , that is usually c:\program files\windows live\messenger\

Now we should have 2 computers where MSGRP2P.xml files are in place, i.e. we have proper environment where to run/test our activity.

Now we must think how to send IM with current page URL (and how to open that URL in activity window's browser). Only way to this is with javascript code. But how can javascript code retreive your current page url? Only way to do it is with cookies.

Lets take a look on whole process from the state where user is browsing your webpage.

1) user is browsing your site and clicks on IM This button/link.
2) IM This link executes piece of javascript code
3) this code sets cookie imthis_url= http://plugor.com/article/123

document.cookie = "imthis_url="+ document.href + ";expires="+(new Date()+14);

4) this code also executes:

var obj = new ActiveXObject("MSNMessenger.P4QuickLaunch");
obj.LaunchApp('7', '');
// 7 is your activity ID (acctually its generaly testing ID).

5) Now Messenger opens windows which lets you choose from buddy list with who you wanna start this activity.
6) Your buddy receives request to start activity.
7) When buddy approves request, both yours and you'r buddys coversation windows open URL's (which is specified in MSGRP2P.xml file).
8) Now in both parties conv.windows activity URL is opened. This page contains javascript code that can send/receive IMs/data between 2 conv.windows and do some more magic.
9) Javascript code determines wheather you're inviter or not, by executing

function meInviter(){
if (window.external.users.inviter === window.external.users.me)
{
return true;
}

return false;
}

10) If you are inviter, you
a) read cookie imthis_url (remember you save this cookie in p 3).
b) send this value to other side with Channel.SendData(data_str) function.
c) send IM with Channel.SendIM(im_str) .

if(meInviter())
{
var imthis_url = myReadCookie("imthis_url")
Channel.SendData( imthis_url );
Channel.SendIM("Hi. I thought you might be interested of this page: " + imthis_url);
window.href = imthis_url; // not checked agains XSS.
} else
{
// do nothing. When inviter sends data it's automagically received
// by Channel.OnDataReceived() event
}

11) Other side has declared event Channel_OnDataReceived().
When data is received, this event is raised, and code that sets page URL is called.

function Channel_OnDataReceived()
{
var imthis_url = Channel.Data;

window.href = imthis_url; // not checked agains XSS.
}


Some notes:
1) If code in p4 does'nt work for you, you can also test it so:
a) open messenger conv.window with some buddy (who must have MSGRP2P.xml in place).
b) go to Actions menu (Alt+A) -> Start [your activity name from .xml file].

only thing is that you should then save cookie every time your site's page loads.
For example put this code after tag:

<script language="javascript">
var expdate = (new Date()) + 14;
document.cookie = "imthis_url=" + document.href + ";expires="+expdate;
</script>



1 comment:

Ramon said...

Hi mate, I like you post, it's pretty cool.
is it work with Messeger Beta 9?

Thanks!