Windows Live Photo Control - Getting Started

Getting Started


Incorporating a Windows Live Photo Control into your Web page is quite simple.

First, you need to include the JavaScript source files for the control into your HTML page. Place the following statements between the <head> and </head> tags at the top of your HTML page:

<script type="text/javascript" 
    src="http://controls.services.live.com/scripts/base/v0.3/live.js"> 
</script>
<script type="text/javascript" 
    src="http://controls.services.live.com/scripts/base/v0.3/controls.js"> 

</script>

Next, you need to display the Photo control. To do this, you must first declare an XML namespace for http://dev.live.com. You can do this by modifying the html tag as follows:

<html xmlns:devlive="http://dev.live.com">

Now you insert a spacescontrol element in your HTML page. This element hosts the Photo control, and allows you to manipulate the positioning (Note: limit the width to 500 or fewer pixels). You are required to supply the following information as attributes on the spacescontrol element.

 

Attribute

Description

privacyStatementURL

A URL to your Web site’s privacy statement.

channelEndpointURL

The Windows Live Photo Control uses a communication channel technique to send data between pages from different domains within the browser. To enable your Web site to receive data from the control, you need to create a channel file with the following content on your Web server.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Channel</title>
<meta name="ROBOTS" content="NONE"/>
 
<script type="text/javascript">
function doc_loaded()
{
    try
    {
        var hash = window.location.hash.substr(1);
        if (window.location.replace == null)
            window.location.replace = window.location.assign;
        window.location.replace("about:blank");
        var name = hash.split("/")[0];
        var win = null;
        if (name)
            win = window.parent.frames[name];
        else
            win = window.parent.parent;
        win.Microsoft.Live.Channels.Mux._recv_chunk(hash);
    }
    catch (ex)
    {
        /* ignore */
    }
}
</script>
</head>
<body onload="doc_loaded()">
</body>
</html>

Let’s say your Web site is www.mydomain.com; you could create channel.htm to the root directory of your Web server so that the file would appear as http://www.mydomain.com/channel.htm to the outside world.

dataDesired

A comma delimited list of fields you’d like returned.

market

The market or language requested. Supported today:

Chinese (simplified): zh-cn
Dutch: nl
English: en
French: fr
German: de
Italian: it
Japanese: ja (jp is deprecated)
Korean: ko
Spanish: sp

If no market is specified, the English control is displayed.

innerBackgroundColor

Sets the background color scheme of the internal area.
Color values:

Hex: #ffffff style
Rgb: rgb(255,255,255) style
W3C standard colors: aqua| black| blue| fuchsia| gray| green| lime| maroon| navy| olive| purple| red| silver| teal| white| yellow

If no color is specified, the default colors apply.

innerTextColor

Sets the color scheme of the internal text. See above for supported color values.

outerBackgroundColor

Sets the color scheme of the outer background. See above for supported color values.

outerTextColor

Sets the color scheme of the outer text. See above for supported color values.

linkColor

Sets the color scheme of the URL hyperlinks. See above for supported color values.

onSignin

An event handler that gets called on sign in.

onSignout

An event handler that gets called on sign out.

onError

An event handler that gets called when an error is detected.

onData

An event handler that gets called when data is received.

onLoad

An event handler that gets called when all Photo controls are loaded.



Here's an example of a spacescontrol tag:

<devlive:spacescontrol 
	style="width:250px;height:500px;float:right;border:solid 1px black;"
	devlive:privacyStatementURL="http://mydomain.org/privacyPolicy.html"
	devlive:channelEndpointURL="channel.htm"
	devlive:dataDesired="fileAccessControlledURL"
	devlive:market="en"
	devlive:onSignin="onSignin"
	devlive:onSignout="onSignout"
	devlive:onError="onError"
	devlive:onData="onData"
	devlive:onLoad="onLoad">
</devlive:spacescontrol>

Some users may have JavaScript disabled in their browser, or may be using a browser that does not support JavaScript (such as the mini-browsers on cellular phones). To handle this case, you should provide a friendly message by nesting a <noscript> tag in your spacescontrol tag:

<noscript>This control requires a web browser that supports JavaScript</noscript>

Next, you need to write a little bit of JavaScript for the event handlers:

<script type="text/javascript">

function onSignin() {
	// user is signed in
}

function onSignout() {
	// user is not signed in 
}

function onError() {
	// there was a data transfer error
}

function onData(p_items) {
	// here comes the data!

	var s = "Done! " + p_items.length + " records received. <br>";

	for (var i = 0; i < p_items.length; i++) {
		s += "<p>";
		s += "fileAccessControlledURL: " + p_items[i].fileAccessControlledURL +"<br>";
	
		s += "</p>";
	}

	alert(s);
}

function onLoad() {
	// all of the Photo controls are loaded
}
</script>

Your customers can now send their Windows Live Spaces photos to your Web site.