We just launched an OpenSocial application on MySpace yesterday and boy, OpenSocial on MySpace (even in 2009) is hard to do (right)! For the few and brave interested in MySpace Apps, here are a couple of pointers:

1. Pick the Right Surface Model
OpenSocial panels (Canvas Surface, Profile Surface, Home Surface) can support content from a number of sources including inline HTML/Javascript, inline Flash or external iframes. Not all surfaces support all sources and not all resources are available to all sources. OpenSocial’s core Javascript API is only readily available if you use inline HTML and Javascript, but very few web developers want to write an application entirely in Javascript! Using external iframes (available on the canvas surface) works great – but you then you are forced to use the MySpace REST API (good luck getting it to work). You are almost forced to use session cookies to keep track of the user, unfortunately there is a good chance Internet Explorer 7 will block your cookies because you are using iframes in mixed environment! Important OpenSocial/MySpace Javascript functions such as invite friends do not work in iFrames without some serious workarounds!

2. Remember – Some of This Stuff is in Beta
The MySpace app development environment is a bit tricky to use. Uploading for App XML for example, will wipe out your App source settings (which you will have to re-enter each time you upload your XML). It also wipes out the large icon and sometimes resets the OpenSocial version API – so be careful! We could not get the official MySpace REST API and I personally don’t know anyone who has.  We figured we could probably eventually get it to work, but found it faster to modify an existing unofficial MySpace REST API.

3. The Good News is that it Works
Yes, you an actually build and deploy a great OpenSocial application on MySpace. True, the platform is constantly changing and the applications we wrote six months ago are very different from the ones we are writing today, but its getting better and easier. The MySpace support team were very helpful and having gone through the process ourselves (and with clients) before, the approval process has very fast and folks were very responsive (Thanks Rondata and Nosheen).

Here are some of the strategies we were able to employ to successfully deploy the MySpace application:

• We used an external iframe for our canvas surface. This is a LOT better way to do than using OpenSocial’s equivalent of AJAX when developing a complex application (we had previously used this technique successfully but it does not lend it self to rich or heavy media usage).
• We create a page at the entry point of the external iframe that acts as a “Controller” that marshals out calls to other pages along with all the important data they need (which is only available at the “Entry Point”).
• To overcome the problems IE 7 supporting session cookies in mixed iframe/security environments, we limited the amount of information the application needed (ownerId and viewerId pretty much) and passed that around using query strings or accessed pages via the controller
• We got the friend invite to work using the suggested “iframe PostTo Workaround” in the External iframe IFPC call Demo after a good amount of trial and error. Apparently if you forget to register parameters to MySpaceContainer (or do it wrong) Javascript calls still “work” but your callbacks simply don’t fire.
• We were not able to get the official MySpace REST API to work so we would a decent unofficial API, updated it and got it to work.
• We used inline HTML/Javascript for the home and profile surfaces along with AJAX. This is a good and light way to go since all OpenSocial “AJAX” calls automatically pass along the application’s ownerId and viewerId, so do don’t have to look them up on the front or backend!

Next week I will talk about some other OpenSocial development best practices so stay tuned.