MySpace Developer Platform

A Place For Developers

Welcome Developers!

Welcome!

Data Availability

Example apps for your pasting pleasure!

One of our developers has created a lovely set of JQuery widgets that you can use and modify for your own apps. You can copy the code from the examples below and paste it into the tool at the bottom of this page to try them out.

JQuery OpenSocial Widgets 
<div id='message' style='margin: 4px'></div>

<script type="text/javascript" src="http://api.msappspace.com/AppRendering/js/jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="http://api.msappspace.com/AppRendering/js/jquery.ui-1.0/ui.tabs.js"></script>
<script type="text/javascript" src="http://api.msappspace.com/AppRendering/js/jquery.ui-1.0/ui.dialog.js"></script>
<script type="text/javascript" src="http://api.msappspace.com/AppRendering/js/jquery.ui-1.0/ui.resizable.js"></script>
<script type="text/javascript" src="http://api.msappspace.com/AppRendering/js/jquery.ui-1.0/ui.mouse.js"></script>
<script type="text/javascript" src="http://api.msappspace.com/AppRendering/js/jquery.ui-1.0/ui.draggable.js"></script>
<script type="text/javascript" src="http://www.viphaklay.com/jquery/plugins/dimensions_1.2/jquery.dimensions.min.js"></script>

<style type="text/css">
                @import url("http://api.msappspace.com/AppRendering/js/jquery.ui-1.0/themes/flora/flora.all.css");
</style>

<!--[if IE 6]>
<style type="text/css">
                #my-tabs {
                padding-bottom: 20px;
                }

</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
                #my-tabs {
                padding-bottom: 24px;
                }
</style>
<![endif]-->



                <div id="my-tabs" class="flora">
            <ul id="tabList">
                <li><a href="#my-tab1"><span>Tab1</span></a></li>
                <li><a href="#my-tab2"><span>Tab2</span></a></li>
                <li><a href="#my-tab3"><span>Tab3</span></a></li>
            </ul>

            <div id="my-tab1">
                                ahhhhhhhhhhh
            </div>
            <div id="my-tab2">
                                yay!
            </div>
            <div id="my-tab3">
                                wahoooo!
            </div>
                </div>
        

<input id="showLink" type="button" value="show me" />

<span id="divSurprise" style="display:none; border:1px solid black">
Surprise!
<img src="http://www.viphaklay.com/jquery/spinner.gif"/>
<img src="http://www.viphaklay.com/jquery/spinner.gif"/>
<img src="http://www.viphaklay.com/jquery/spinner.gif"/>
<img src="http://www.viphaklay.com/jquery/spinner.gif"/>
<img src="http://www.viphaklay.com/jquery/spinner.gif"/>
</span>

<div id="my-dialog" class="flora" title="vipy rules">Drag me somwhere!</div>


<script type='text/javascript'>

  $(document).ready(function(){

    $("#my-tabs > ul").tabs();

    $("#my-dialog").dialog({ height: 100, width: 100});

    $("#showLink").click(function () {
                if ($("#showLink").val() == "show me") {
                                $("#showLink").val("hide me");
                } else {
                                $("#showLink").val("show me");
                }

        $("#divSurprise").toggle("slow");
    });
    
  });

</script>

This is a simple app that iterates through your friends:

Hello friends! 
<div id='Div1' style='margin: 4px'></div>
<script type='text/javascript'>
function init() {
  MYOS_TRACE = true;  trace('Init...');
  var os = opensocial.Container.get();
  var dataReqObj = os.newDataRequest();
  
  var viewerReq = os.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER);
  dataReqObj.add(viewerReq);
  
  var viewerFriendsReq = os.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS);
  dataReqObj.add(viewerFriendsReq);
  
  trace('Sending...');
  dataReqObj.send(dataLoadCallback);
}   
  
function dataLoadCallback(dataResponse) {
  trace('Got data...');

  if (dataResponse.hadError()) {
    var data = dataResponse.get(opensocial.DataRequest.Group.VIEWER_FRIENDS);
    alert(data.getErrorCode() + '\n' + data.getErrorMessage());
  } else {
    var viewerData = dataResponse.get(opensocial.DataRequest.PersonId.VIEWER).getData();
    var viewerName = viewerData.getField(opensocial.Person.Field.NAME);

    trace('<p><h3>Friends Of "' + viewerName + '":</h3><hr/>');

    var friendsData = dataResponse.get(opensocial.DataRequest.Group.VIEWER_FRIENDS).getData();
    friendsData.each(
     function(friendData) {
        var friendName = friendData.getField(opensocial.Person.Field.NAME);
        var friendThumbnailUrl = friendData.getField(opensocial.Person.Field.THUMBNAIL_URL);
        trace(friendName + '<br>' + '<image src="' + friendThumbnailUrl + '"/><hr/>');
     }
    );
  }
}
 
function trace(msg) {
    document.getElementById('message').innerHTML += msg + '<br>';
}
 
init();
</script>
Sample code for makeRequest
<div id='heading'></div>
<hr size="1px" />    
<script type="text/javascript">

var c = document.getElementById("heading");
function doMakeRequest()

{
    var param = {};
    param[opensocial.ContentRequestParameters.AUTHENTICATION] = opensocial.ContentRequestParameters.AuthenticationType.NONE;

    param[opensocial.ContentRequestParameters.METHOD] = opensocial.ContentRequestParameters.MethodType.GET;

    param[opensocial.ContentRequestParameters.CONTENT_TYPE] = opensocial.ContentRequestParameters.ContentType.HTML;

    opensocial.makeRequest("http://www.openspaceeditor.com/makeRequest.htm", gotMakeRequest, param);
}

function gotMakeRequest(response, url, errored)
{
    if(!errored)

    {
        c.appendChild(document.createTextNode(response + "\r\n"));

    }
    else
    {
        c.appendChild(document.createTextNode("makeRequest failed:(" + response + ")(" + url + ")(" + errored + ")" + "\r\n"));

   }
}
doMakeRequest();

</script>
Sample Code of newFetchPersonRequest
<div id='heading'></div>
<hr size="1px" />
    
<script type="text/javascript">

var os;
var dataRequest;
function dataRequest()

{
  os = opensocial.Container.get();
  dataRequest = os.newDataRequest();

  var param = {};
  param[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [opensocial.Person.Field.ID,MyOpenSpace.Person.Field.ABOUT,MyOpenSpace.Person.Field.BOOKS];

  var OWNERReq = os.newFetchPersonRequest(opensocial.DataRequest.PersonId.OWNER, param);

  dataRequest.add(OWNERReq);
  dataRequest.send(getResponse);

}

function getResponse(response)
{
  if( response.hadError() )

  {
     document.write("There is an error in the response. <br>");
     return;

  }
  var OWNER = response.get(opensocial.DataRequest.PersonId.OWNER).getData();

  var OWNER_ID = OWNER.getField(opensocial.Person.Field.ID);

  var OWNER_NAME = OWNER.getField(opensocial.Person.Field.NAME);

  var OWNER_CITY = OWNER.getField(MyOpenSpace.Person.Field.CITY);

  var OWNER_REGION = OWNER.getField(MyOpenSpace.Person.Field.REGION);

  var OWNER_POSTALCODE = OWNER.getField(MyOpenSpace.Person.Field.POSTALCODE);

  var OWNER_COUNTRY = OWNER.getField(MyOpenSpace.Person.Field.COUNTRY);

  var OWNER_HOMETOWN = OWNER.getField(MyOpenSpace.Person.Field.HOMETOWN);

  var OWNER_AGE = OWNER.getField(MyOpenSpace.Person.Field.AGE);

  var OWNER_GENDER = OWNER.getField(MyOpenSpace.Person.Field.GENDER);

  var OWNER_CULTURE = OWNER.getField(MyOpenSpace.Person.Field.CULTURE);

  var OWNER_ABOUT = OWNER.getField(MyOpenSpace.Person.Field.ABOUT);

  var OWNER_MARITAL_STATUS = OWNER.getField(MyOpenSpace.Person.Field.MARITAL_STATUS);

  var OWNER_HEADLINE = OWNER.getField(MyOpenSpace.Person.Field.HEADLINE);

  var OWNER_OCCUPATION = OWNER.getField(MyOpenSpace.Person.Field.OCCUPATION);

  var OWNER_DESIRE_TO_MEET = OWNER.getField(MyOpenSpace.Person.Field.DESIRE_TO_MEET);

  var OWNER_INTERESTS = OWNER.getField(MyOpenSpace.Person.Field.INTERESTS);

  var OWNER_MUSIC = OWNER.getField(MyOpenSpace.Person.Field.MUSIC);

  var OWNER_MOVIES = OWNER.getField(MyOpenSpace.Person.Field.MOVIES);

  var OWNER_TELEVISION = OWNER.getField(MyOpenSpace.Person.Field.TELEVISION);

  var OWNER_BOOKS = OWNER.getField(MyOpenSpace.Person.Field.BOOKS);

  var OWNER_HEROES = OWNER.getField(MyOpenSpace.Person.Field.HEROES);

  var OWNER_ZODIAC_SIGN = OWNER.getField(MyOpenSpace.Person.Field.ZODIAC_SIGN);

  var OWNER_MOOD = OWNER.getField(MyOpenSpace.Person.Field.MOOD);

  var OWNER_STATUS = OWNER.getField(MyOpenSpace.Person.Field.STATUS);

  var OWNER_THUMBNAIL_URL = OWNER.getField(opensocial.Person.Field.THUMBNAIL_URL);

  document.write("OWNER=" + OWNER.getDisplayName() + "<br>"); 
  document.write("OWNER_ID=" + OWNER_ID + "<br>"); 
  document.write("OWNER_NAME=" + OWNER_NAME + "<br>"); 
  document.write("OWNER_CITY=" + OWNER_CITY + "<br>"); 
  document.write("OWNER_REGION=" + OWNER_REGION + "<br>"); 
  document.write("OWNER_POSTALCODE=" + OWNER_POSTALCODE + "<br>"); 
  document.write("OWNER_COUNTRY=" + OWNER_COUNTRY + "<br>"); 
  document.write("OWNER_HOMETOWN=" + OWNER_HOMETOWN + "<br>"); 
  document.write("OWNER_AGE=" + OWNER_AGE + "<br>"); 
  document.write("OWNER_GENDER=" + OWNER_GENDER + "<br>"); 
  document.write("OWNER_CULTURE=" + OWNER_CULTURE + "<br>"); 
  document.write("OWNER_ABOUT=" + OWNER_ABOUT + "<br>"); 
  document.write("OWNER_MARITAL_STATUS=" + OWNER_MARITAL_STATUS + "<br>"); 
  document.write("OWNER_HEADLINE=" + OWNER_HEADLINE + "<br>"); 
  document.write("OWNER_OCCUPATION=" + OWNER_OCCUPATION + "<br>"); 
  document.write("OWNER_DESIRE_TO_MEET=" + OWNER_DESIRE_TO_MEET + "<br>"); 
  document.write("OWNER_INTERESTS=" + OWNER_INTERESTS + "<br>"); 
  document.write("OWNER_MUSIC=" + OWNER_MUSIC + "<br>"); 
  document.write("OWNER_MOVIES=" + OWNER_MOVIES + "<br>"); 
  document.write("OWNER_TELEVISION=" + OWNER_TELEVISION + "<br>"); 
  document.write("OWNER_BOOKS=" + OWNER_BOOKS + "<br>"); 
  document.write("OWNER_HEROES=" + OWNER_HEROES + "<br>"); 
  document.write("OWNER_ZODIAC_SIGN=" + OWNER_ZODIAC_SIGN + "<br>"); 
  document.write("OWNER_MOOD=" + OWNER_MOOD + "<br>"); 
  document.write("OWNER_STATUS=" + OWNER_STATUS + "<br>"); 
  document.write("OWNER_THUMBNAIL_URL=" + OWNER_THUMBNAIL_URL + "<br>"); 
  document.write("<br>"); 
  document.write("<br>"); 

}
dataRequest();

</script>
Sample Code of newFetchPeopleRequest
<div id='heading'></div>
<hr size="1px" />
    
<script type="text/javascript">

var os;
var dataRequest;
function dataRequest()

{
  os = opensocial.Container.get();
  dataRequest = os.newDataRequest();

  var friendsParams = {};
  friendsParams[ opensocial.DataRequest.PeopleRequestFields.FILTER ] = opensocial.DataRequest.FilterType.ALL;

  friendsParams[ opensocial.DataRequest.PeopleRequestFields.FIRST] = 0;

  friendsParams[ opensocial.DataRequest.PeopleRequestFields.MAX ] = 10;

  friendsParams[ MyOpenSpace.DetailType.GET_ONLINE ] = true;
  friendsParams[ MyOpenSpace.DetailType.GET_STATUS ] = true;                
  friendsParams[ MyOpenSpace.DetailType.GET_MOOD ] = true;                  
  var FRIENDSReq = os.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS, friendsParams);

  dataRequest.add(FRIENDSReq);
  dataRequest.send(getResponse);

}
function getResponse(response)
{
  if( response.hadError() )

  {
     document.write("There is an error in the response. <br>");
     return;

  }
  var VIEWER_FRIENDS = response.get(opensocial.DataRequest.Group.VIEWER_FRIENDS).getData().asArray();

  for(var i=0; i < VIEWER_FRIENDS.length; i++)

  {
    document.write("FRIEND_PROFILE_URL=" + VIEWER_FRIENDS[i].getField(opensocial.Person.Field.PROFILE_URL) + "<br>");

    document.write("FRIEND_PROFILE_NAME=" + VIEWER_FRIENDS[i].getField(opensocial.Person.Field.NAME) + "<br>");

    document.write("FRIEND_PROFILE_ID=" + VIEWER_FRIENDS[i].getField(opensocial.Person.Field.ID) + "<br>");

    document.write("FRIEND_THUMBNAIL_URL=" + VIEWER_FRIENDS[i].getField(opensocial.Person.Field.THUMBNAIL_URL) + "<br>");

    document.write("FRIEND_PROFILE_STATUS=" + VIEWER_FRIENDS[i].getField(opensocial.Person.Field.STATUS) + "<br><br>");         
  }

}
dataRequest();

</script>
Sample Code of newFetchIndicatorsRequest
<div id='message' style='margin: 4px'></div>

<script type="text/javascript" >


function init()
{	
	var os = opensocial.Container.get();

    
var request = os.newDataRequest();
var param = {};

	var indicatorsResponse = MyOpenSpace.MySpaceContainer.prototype.newFetchIndicatorsRequest(opensocial.DataRequest.PersonId.OWNER,param);

	request.add(indicatorsResponse);
	request.send(callback);

}

function callback(response)
{
	var returnedData = "";

	if(!response.get(MyOpenSpace.Group.OWNER_INDICATORS)){

		trace("No data back");
		return;
	}
	returnedData = response.get(MyOpenSpace.Group.OWNER_INDICATORS).getData();

	trace("MAIL" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.MAIL));

	trace("MAIL_URL" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.MAIL_URL));

	trace("BIRTHDAY" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.BIRTHDAY));

	trace("BIRTHDAY_URL" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.BIRTHDAY_URL));

	trace("BLOG_COMMENT" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.BLOG_COMMENT));

	trace("BLOG_COMMENT_URL" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.BLOG_COMMENT_URL));

	trace("BLOG_SUBSCRIPTION_POST" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.BLOG_SUBSCRIPTION_POST));

	trace("BLOG_SUBSCRIPTION_POST_URL" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.BLOG_SUBSCRIPTION_POST_URL));

	trace("COMMENT" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.COMMENT));

	trace("COMMENT_URL" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.COMMENT_URL));

	trace("EVENT_INVITATION" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.EVENT_INVITATION));

	trace("EVENT_INVITATION_URL" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.EVENT_INVITATION_URL));

	trace("FRIEND_REQUEST" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.FRIEND_REQUEST));

	trace("FRIEND_REQUEST_URL" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.FRIEND_REQUEST_URL));

	trace("GROUP_NOTIFICATION" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.GROUP_NOTIFICATION));

	trace("GROUP_NOTIFICATION_URL" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.GROUP_NOTIFICATION_URL));

	trace("PHOTO_TAG_APPROVAL" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.PHOTO_TAG_APPROVAL));

	trace("PHOTO_TAG_APPROVAL_URL" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.PHOTO_TAG_APPROVAL_URL));

	trace("PICTURE_COMMENT" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.PICTURE_COMMENT));

	trace("PICTURE_COMMENT_URL" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.PICTURE_COMMENT_URL));

	trace("RECENTLY_ADDED_FRIEND" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.RECENTLY_ADDED_FRIEND));

	trace("RECENTLY_ADDED_FRIEND_URL" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.RECENTLY_ADDED_FRIEND_URL));

	trace("VIDEO_COMMENT" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.VIDEO_COMMENT));

	trace("VIDEO_COMMENT_URL" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.VIDEO_COMMENT_URL));

	trace("VIDEO_PROCESS" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.VIDEO_PROCESS));

	trace("VIDEO_PROCESS_URL" + "->" + returnedData.getField(MyOpenSpace.Indicators.Field.VIDEO_PROCESS_URL));

}

function trace(msg)
{
	document.getElementById('message').innerHTML += msg + '<br>';

}

init();
</script>
Sample Code of newFetchVideosRequest
<div id='message' style='margin: 4px'></div>

<script type="text/javascript" >

var os;
var dataRequest;
function dataRequest()

{
  os = opensocial.Container.get();
  dataRequest = os.newDataRequest();

  var param = {};
  param[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [opensocial.Person.Field.ID,MyOpenSpace.Person.Field.ABOUT,MyOpenSpace.Person.Field.BOOKS];

  var videosParams = {};
  var VIDEOSReq = os.newFetchVideosRequest(opensocial.DataRequest.PersonId.VIEWER, videosParams);

  dataRequest.add(VIDEOSReq, "optkeygetVideosVIEWER");
  dataRequest.send(getResponse);

}
function getResponse(response)
{
  if( response.hadError() )

  {
     document.write("There is an error in the response. <br>");
     return;

  }

  var VIEWER_VIDEOS = response.get("optkeygetVideosVIEWER").getData().asArray();

  for(var i=0; i < VIEWER_VIDEOS.length; i++)

    document.write("VIEWER_VIDEO_TITLE=" + VIEWER_VIDEOS[i].getField(MyOpenSpace.Video.Field.TITLE) + "<br>"); 

}
dataRequest();

</script>

About | FAQ | Terms | Privacy | Safety Tips | Contact MySpace | Advertise | MySpace International | MySpace Latino
©2003-2008 MySpace.com. All Rights Reserved.