OpenSocial on the MySpace Open Platform

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

Note: When building an OpenSocial application on MySpace, use the MySpace workflow page titled Create App, and follow the path associated with the Application Platform flow (on the left hand side) by clicking "Create On-site App".

What is OpenSocial?

OpenSocial defines a common 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 Open Platform. Using JavaScript and HTML, a developer can call into OpenSocial. OpenSocial in turn calls into the MySpace Open Platform.

OpenSocial also provides guidelines for extensibility. For example, a MySpace User could have 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.

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.

OpenSocial MySpace Application Demo - Chris Bissell

Add to My Profile | More Videos

How Do OpenSocial and the MySpace Open Platform Fit Together?

Note: To start building an OpenSocial application on MySpace, use the MySpace workflow page titled Create App. Follow the path associated with the Application Platform flow (on the left hand side) by clicking the button at the bottom labeled "CreateOn-site App".

OpenSocial and the MySpace Application Platform include a series of JavaScript and server-side components that work together to provide a standard interface for creating Applications.

Below is a rough picture of the communication between an Application, MySpace and OpenSocial. OpenSocial lives completely on the Client.

Diagram of OpenSocial and MySpace Open Platform Components

Applications are hosted in an IFrame. View the source around your code to see a reference to opensocialreference.js and MyOpenSpace.js. Study these files carefully, for they contain the OpenSocial implementation, as well as MySpace's extensions.

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

MyOpenSpace.js depends on opensocialreference.js. OpenSocial defines several basic social networking objects, as well as implementations for how to get and update those objects. MyOpenSpace maps those objects to MySpace server-side API calls. At times, MyOpenSpace also extends the objects. An application’s code will hit the OpenSocial namespace almost exclusively.

Note: the MyOpenSpace code handles the dispatching and data mapping.

The following code is the official OpenSocial request for the friends of the Owner:

Example: Basic DataRequest for Owner's Friends

The 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)

Note: the following response is in the JSON format. The response is evaluated into JavaScript objects and therefore does not need to be human-readable:

Example: Internal API Response: Friends (JSON format)

{"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"}}

To get a better idea on what is going on in the previous JSON example:

{
    "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, MyOpenSpace.js will parse the response and map it to a set of OpenSocial Person objects.

Example: Simple Response Handler for OWNER_FRIENDS

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:

• DataRequest
• DataResponse

Batch the required data into DataRequest. The result comes from DataResponse.

Batching as much as possible into single calls:

• Increases application performance.
• Improves user experience.

Next Steps

Learn how to build a sample application: Hello World.