How to Add a Windows Live Messenger IM Control to a PHP Page

Last Revised On: 12/06/2009

Would you like to be able to interact with your site users more dynamically than through email?  You can add a Windows Live Messenger IM control to your page which will allow your site users to see when you are online and initiate a conversation with you. For example:

 

This control does not require visitors to have a Windows Live ID, they will be required to enter a CAPTCHA.  When you sign in to the Windows Live Messenger client application, the above web control displayed on your site will dynamically recognize that you are online and display your presence information.  Messages sent from the user will be directed to your client application as would a conversation initiated by one of your contacts. This functionality can be added to your web page with a few straightforward steps.

 

Step 1: Enable your online presence.

To do this, click the following link and sign in using your Windows Live ID.

http://settings.messenger.live.com/applications/WebSettings.aspx

Under 'Manage your Messenger web settings, check the checkbox to allow anyone on the web to see your online presence.

Screen shot of the Windows Live Messenger Web Settings page.

 

Then click on the Save button near the top of the page to save this setting.

 

Step 2: Generate the HTML required to display the IM control.

On the left side of the page, under the 'Web Settings' heading, click on the 'Create HTML' link.

 

From this page, you can decide how your presence should 'look'.  You can choose to display a full IM control, a button or just an icon to alert users of your presence.  Any of these options will allow a user to initiate a conversation with you when you are online.  Choose a color for the theme of your control or button.  Additionally, if you choose to display the IM control, you can set the width and height. Once you have made your selections for style and appearance, notice that HTML has been generated at the bottom of the page.  This is the HTML you will need in order to display the control on your web page.  If you choose an icon to display your presence, then the HTML will contain a link, but if you choose the full control, then the HTML specifies an iFrame. 

 

Note that the [unique id] in red, in the above screenshot will be a hash unique to your account.

 

Step 3: Copy and paste the HTML into a page where you would like to display your presence.

 

 

That's all!  Browse to your site and the page to which you added the control.  You are now ready to host conversations with your web site users.  The screenshot below shows the 'orange' theme applied to the full IM control.

 

 

How does it work?  When you gave consent for the Windows Live Messenger Service to display your presence information online, a unique id was made.  The generated HTML uses this id as a parameter which is then passed to the service and used to route messages from the IM control to your IM account.  Other parameters are specified in the query string for the theme and, if applicable, height and width, customizations.  The parameters are used to render the IM control, button or icon.

Download Solution Package From CodePlex Now