Reading this should give you a brief introduction to OpenSocial and how it fits into MySpace.

• About OpenSocial
  
• A Demonstration of an OpenSocial MySpace Application
• How do OpenSocial and the MySpace Developer Platform fit together?
  
• Communication between your code, the browser, OpenSocial and the server

About OpenSocial

OpenSocial is a JavaScript API (Application Programming Interface) built in collaboration with Google and several other social networking sites. OpenSocial sits between a developer's code and the MySpace Developer Platform. Developers call into OpenSocial, and OpenSocial in turn calls into the MySpace Developer Platform.

OpenSocial also provides guidelines for extensibility. For example, a MySpace member has a section called "Heroes", which is not in the OpenSocial specification. As will be revealed further down, there is a way to get special MySpace properties through the OpenSocial interface.

Historically speaking, member coded, installable JavaScript applications have been on MySpace since its initial launch. For members who have been around since the beginning, it can be recalled that member profiles were blank canvases on which one could paint with an unfettered pallette of HTML, JavaScript, and CSS. There were no constraints on what could be done, so long as a browser was capable of rendering it.

MySpace was certainly not the first site to allow such things--there were many sites and services that allowed members to build their own "personal website" using any technology they desired. What set MySpace apart was that it was both a personal site and a social networking application: it allowed members to customize their site to their heart's content and was an environment where members could interact with their friends in a variety of ways.

While unrestrained CSS and HTML provided members with limitless ways to make their profiles look a certain way, it was JavaScript that allowed them to really plug into the MySpace experience. After MySpace launched, members began building JavaScript widgets that did anything from customizing friends lists to sending MySpace Mail. And applications they coded were not limited to their own profiles. Through a little known technology known as "cut and paste", members could "install" applications they liked on their own profiles.

Where did all this functionality come from? While no specific XML/JSON API was provided, members quickly wrote and disseminated scripts that used JavaScript to screen scrape the existing MySpace markup (in order to gather data), and to emit the proper HTTP values to manipulate the data they gathered.

Of course, a completely open MySpace was a utopic ideal and exploitation began. As nefarious people began to perceive value in adding numerous illegitimate friends, causing mischief, and/or making a profit through spam, they began writing applications that broke the rules. While a well thought out, law abiding "send me a message" application would send messages only at the request of the member, an application built by a spammer would send as many messages as the member's bandwidth would allow.

As spammers propagated throughout the site, MySpace began blacklisting certain types of JavaScript, HTML, and CSS. Many attempts were made to keep as much JavaScript as possible. Slowly but surely however, illegitimate members hacked away at MySpace's filters until finally JavaScript was banned entirely. This left third-party application developers with only one dynamic alternative: Adobe Flash. Sites like YouTube saw their birth as widely disseminated Flash decorations for MySpace profiles. Unfortunately, by this time such applications were completely locked out of the MySpace data stream.

So, why is MySpace doing OpenSocial? Because every time a new JavaScript exploit was locked down there was sadness in knowing that legitimate application developers were being hobbled as a result. For every ten spammers blocked, at least a few people trying to make a living by entertaining MySpace members in a positive way were also blocked. The OpenSocial platform allows MySpace to let its members play again; this time in a safer, more structured, but at the same time more flexible way.

Enough history. Time for some code. By reading this entire document, developers should be able to create a few sample OpenSocial applications on MySpace.

A Demonstration of an OpenSocial MySpace Application

In the video below, Chris Bissell, Chief Software Architect at MySpace, provides a brief demonstration of an OpenSocial MySpace Application at the Six Apart headquarters in San Francisco.

How do OpenSocial and the MySpace Developer Platform fit together?

OpenSocial and the MySpace Developer Platform are a series of JavaScript and server-side components that work together to provide you with a standard interface to write your apps against.

Below is a rough picture of the communication between your app, MySpace, and OpenSocial. As you can see, OpenSocial lives completely on the client. There is no OpenSocial server and no communication between your app and some "OpenSocial" entity out there on the Internet.

figure 1 : Diagram of OpenSocial and MySpace Developer Platform Components

When you run your own app, you'll see that it's hosted in an IFrame. If you view the source around your code, you'll see a reference first to "opensocialreference.js", then to "MyOpenSpace.js". You should study these files carefully, for they contain the meat of the OpenSocial implementation, as well as MySpace's extensions on it.

Communication between your code, the browser, OpenSocial, and the Server

How do opensocialreference.js and MyOpenSpace.js communicate? MyOpenSpace.js is dependent on opensocialreference.js. OpenSocial defines several basic social networking objects, as well as implementations for how to get and update those objects. MyOpenSpace, meanwhile, maps those objects to MySpace server-side API calls. At times, it also extends the objects (more on that later). Your code will hit the opensocial namespace almost exclusively, but be aware that it is the MyOpenSpace code that is doing the dispatching and data mapping. For example, the following code is the official OpenSocial request for the friends of the "Owner" (the person who has installed the application):

function init()
{
    var dataRequest = opensocial.newDataRequest();
    
    //Create a request for the owner's friends
    var friendRequest = dataRequest.newFetchPeopleRequest(opensocial.DataRequest.Group.OWNER_FRIENDS);
    //Add the request for processing.
    dataRequest.add(friendRequest);
    //Send the request, passing in a callback.            
    dataRequest.send(response);
    
}

Underneath the covers, that request issues an Ajax call to the MySpace RESTful APIs, which return the results in JSON format. Below is an example of what the request looks like:

   http://api.msappspace.com/opensocial/OWNER/profile.JSON...(params and security token)

...and below is what the response looks like. Note that the response is in the JSON format--it gets evaluated into JavaScript objects and therefore doesn't need to be human readable:

{"count":3,
"friends":
[{"__type":"User:#MySpace.Services.DataContracts",
"image":"http:\/\/b2.ac-images.myspacecdn.com\/00000\/20\/52\/2502_s.jpg",
"name":"Tom",
"onlineNow":false,
"uri":"http:\/\/api.msappspace.com\/opensocial\/users\/6221",
"userId":6221,
"userType":"RegularUser",
"webUri":"http:\/\/www.myspace.com\/tom"},
{"__type":"User:#MySpace.Services.DataContracts",
"image":"http:\/\/x.myspace.com\/images\/no_pic.gif",
"name":"VipyApp 6",
"onlineNow":false,
"uri":"http:\/\/api.msappspace.com\/opensocial\/users\/313945780",
"userId":313945780,
"userType":"Application",
"webUri":"http:\/\/www.myspace.com\/313945780"},
{"__type":"User:#MySpace.Services.DataContracts",
"image":"http:\/\/x.myspace.com\/images\/no_pic.gif",
"name":"V2",
"onlineNow":false,
"uri":"http:\/\/api.msappspace.com\/opensocial\/users\/313921193",
"userId":313921193,
"userType":"RegularUser",
"webUri":"http:\/\/www.myspace.com\/313921193"}],
"next":null,
"prev":null,
"topFriends":null,
"user":{"__type":"User:#MySpace.Services.DataContracts",
"image":"http:\/\/x.myspace.com\/images\/no_pic.gif",
"name":"V1",
"onlineNow":false,
"uri":"http:\/\/api.msappspace.com\/opensocial\/OWNER",
"userId":313915716,
"userType":"RegularUser",
"webUri":"http:\/\/www.myspace.com\/vipymyspace1"}}

With OpenSocial, you don't need to parse the above code yourself. MyOpenSpace.js, MySpace's OpenSocial glue, will parse the response for you and map it to a set of OpenSocial Person objects.

Below is how you might work with the above code:

function responseCallback(dataResponse)
{
    var friendsData = dataResponse.get(opensocial.DataRequest.Group.OWNER_FRIENDS).getData();
    
    friendsData.each(
     function(friendData) {
        var friendName = friendData.getField(opensocial.Person.Field.NAME);
        var friendThumbnailUrl = friendData.getField(opensocial.Person.Field.THUMBNAIL_URL);
        //Do work here with the friend's name and the friend's profile image...
     }
    );
}

These are the essentials of OpenSocial: the DataRequest and the DataResponse. You batch the data you want into DataRequest--and you get back your results from DataResponse. Batching as much as you can into single calls will make your app perform better and give your members a better experience.

Now that you know about OpensSocial on the MySpace Developer Platform check out our sample application Hello World.