In 2006 here at GDC... ShuffleBrain gave a talk about how MySpace built on basic game mechanics... Thatbegan the whole social media craze... For example:On MySpace you collect friends and comments. In a game you collect items and points- On Myspace customize your profile. In a game you customize Avatars.- On MySpace you do stuff to stimulate yourself and get feedback. In a game, you play to get stimulated and get feedback. Anyone remember this presentation at all?Anyways in retrospect, that presentation in 2006 was very foretelling. Since social network platforms have opened up, it's no wonder games are the killer app.So I'm no expert on building great games... If I did I'd be out there making some real money with you guys. Instead I'm up to breakdown the mechanics of MySpace as a platform so you can maximize it.
First some stats
Now Is anyone here completely new to the MySpaceplatform?Great I'm starting with a summary of a MySpace onsite app.
First and foremost is the Canvas surface. It's your dedicated page and the core of your game where the majority of the action happens. Here you get access to all our APIs and have free reign
Next is the Home surface. IMportant because home is our most trafficked page. In fact Chad's going to bring up some specific tips about it later.
Finally profiles public and private are a corner stone of myspace. This is where you can build stuff for your users to flaunt your game… or help them flaunt themselves.None of the other platforms give you that same kind of surface area for reaching users. We believe opening all these surfaces maximizes the chance for cool innovative games that are a win-win for us and developers.
We announced the new app galery earlier in the morning but couple of key pointers:there are two ways the new app gallery empowers developers to attract more users1st friends notifications and activity right on the Apps Gallery so users see what they're friends are doing. those are channels you control and I'll talk more about specifics later- 2nd is ratings
Along with that we're focusing on games. We've launched new modules right on our most engaging page... the user home... specifically to bring more users to games.
Here's full size features games page
Now I'm going to demo the various viral channels.This pseudo-app is openly available and full of step-by-step sample code so you can all check it out... copy/paste from it.
In honor of our new mascot Queue, I've made this game QueueTopia just for GDC. I'll start by installing it.
So here's Queue, my new QueueTopia pet. I just joined the game and click to get started.
I've got my pet ready to go... Queue's ready to play with a toy in hand.
Queue looks like he's lonely. MySpace is more fun with friends and so are games. Time spent on an app increases by X if you have Y friends playing as well. So it looks like the game wants me to invite friends to play with Queue. .
I click the invite buttonEnter App invites for friends.I'm not going to talk about the code specifics now, but it's for your reference right here so you can check this out later yourself and reuse all the samples.
Now up to 20 friends can be invited at once. User's can also add friends with the To: bar - filter who to invite (e.g. top friends and online friends, exclude certain profiles like bands and advertisers for better conversion)
before i continue with QueueTopia Here's what your friends see with an app invite. They can install the apps right from there notifications.So I say I install the app,
here's important secret about app invites… you can parameterize the the App Invite. It's a simple and powerful way to pass incentives between users joining your game... and can personalize the process for a bette experience.[Poker example] A practical end-to-end example where that's interesting is if you had a poker game... and you wanted to invite a online friend to join your table. You would first filter invites to users who are online, invite those users... and pass along the table number so they could joing your table.So invites are important because the most direct way to get new users.
So back to the app. App invites are cool but, the richest stream feature at your disposal is app activities, these let you create custom templates that you put in the stream... I click next.
So apparently Queue has won his first trophy.The game's giving me a call to action to share it, and a feel inclined to click to share..
User's need to opt in for posting an activity the first time, but keep in mind that all your players friends will see it. So designing meaningful activities is a huge draw and free advertising.Here's what the preview looks like like. [read template]
Now let me show as a developer you how I make the templatetheres a 160 character template the editor offers help in previewing templates it pulls out variables and lets u test inputs, as well as MediaItemsThat’s the dev experience. I’m going to hop in to the user experience.
Once the user clicks “publish” it goes in to your stream and fans out to all your friends Here's what that looks like in your friends stream.template syntax is pretty straight forward, but some interesting tipsliteral get filtered out for most html but you can include anchor tags that go back to the canvas which can further be parameterized- also managing media items is an interesting topic mediaitem trick- possessiveform and objectiveform trick
Next enter another slight different channel, notifications. These are the brothers of App Invites because they go to the same place.The key thing about a notification is you can create one without the users consent
Here's what a notification looks like. Notice the main feature is a call to action button that brings users to the app. You can specify a number of buttons that go back to your canvas page.What's the big deal of no opt in?For example, if you have a dating game you can post any new date matches behind the scenes.
So those are the 3 key viral channels Invites, Activities and notifications. Hopefully you can now draw the subtle distinctions.Invites get you installsActivities let you spread cool templates in the user's streamNotifications let you stick actionable messages in a user's "inbox”And they all ultimately make your game more visible, fun and played.
That's onsite, but you can access all of MySpace's' users to your own site with MySpace ID.It let's you seamlessly use MySpace identity on your site.
If yes they get a popup on MySpace.com to login
They can accept a few permissions and you have a new user. At which point…
Our latest and greatest is the real time stream
Here's an example of what's possible.
One of our earliest demos was a live map updating map that tracked status and mood updates around the world.
To give you an idea of how much data check out this graph on
We’re really just at the tip of the iceberg on whats possible.A third party examples is We Are Hunted… they’ve created a radio based on what songs are being played. For eg. RTS let’s you subscribe to what Profile songs are being added
Thedata you can subscribe to includes
-Wanted to run through a list of tips and tricks that should be useful for most developers
The home surface is fairly unique to MySpace as most other social networks don’t provide this surface. One thing to watch out for is that this surface, if used, will get exponentially more traffic than the canvas surface. This is because people return to their home page 3 or 4 times per session, making it the most viewed page on all of MySpace.If you do make use of this surface, make sure to optimize it!Use browser cache when sending requests back to your serversUse as much static content as possibleStick that static content on CDNs, smaller shops may even be able to upload their photos to MySpace and link them that wayDon’t be chatty, try to do everything in as few requests as possible
I also want to briefly explain the app lifecycle. When you create an app, it is in dev mode. Once you’re happy with it you hit the “publish” button and it goes out for review. If the review is successful the app is live.At this point there are actually two versions of your app, the dev version and the live version. You can continue to make changes to your dev app, and that won’t affect your live app. When you click the “republish” button, the live version of the app is replaced by the latest dev version. The dev app is never visible to anyone but the developer.To see the dev version of your app append appvers=dev to the end of the URL. Some developers find it handy to create two apps, one just used for development, and the other used as the production app.The developer site also gives you the ability to add developers and testers to an app. Adding one of your friends as a developer gives that user the ability to modify the app’s source. Adding a tester allows that user to run the app in dev mode.
When it comes to debugging your apps there are a few tips I can pass on. The first is that the OpenSocial container swallows the alert function, so you can’t use that to debug. We did this for user experience reasons, apps on home and profile surfaces were popping alerts all the time with random messages, which is a pretty bad user experience.Some alternatives to alert are to write messages to a div, or to use Firefox with the Firebug plugin. I highly suggest Firebug and I personally don’t do any web development anymore without it. To make your life easier when using Firebug, open up the app’s iframe into a new window, that way you’re only dealing with one DOM instead of two. Subsequent page refreshes will also be faster.Another useful tool is Fiddler. Fiddler monitors all your outgoing traffic and lets you see exactly what requests you are sending out, what response you are getting, and even modify and re-execute requests.
One thing common to many apps is the install arrow. Apps detect when a user who is visiting a canvas page doesn’t have the app installed. If they don’t, they grey out the iframe and show a big animated arrow pointing up to the “Add App” link. This flow obviously isn’t ideal, so I wanted to show you a couple ways to avoid the install arrow and just pop the install dialog.The first step is to determine if the user has the app installed. This can be accomplished in the OpenSocial container via gadgets.views.getParams().installState, or by checking the installState query parameter in an external iframe app. The valid values are 0, 1 and 2. 0 means it’s not installed, 1 means it is installed, and 2 means it was just installed and this is the first time the user is running your app.
Once you’ve detected the user hasn’t installed the app you can run the code in the top example.Another way to show the popup is to add the query parameter autoInitiateInstall=true to the canvas surface URL. This is useful when you’re linking to your app externally, or from a link inside the stream.
The app’s profile page is one of the main entry points for installing apps but it often gets neglected. Compare the default app profile page here to one that’s been modified.
Adding a slick profile page gives the user a much better impression of your app.Essentially an app gets a profile page just like every MySpace user gets a profile page. And we all know you can trick out a profile page on MySpace. To do this just log in as the app itself, not the app developer and go to: Edit Profile, Customize Profile then fill out the CSS field.
Tricks of the Gaming Trade: Insider Tips and Secrets
Tricks of the Gaming Trade. Insider Tips and Secrets.<br />March 2010<br />
Who?<br />Chris To – Senior Software Engineer @MySpace<br />Chad Russell – Development Lead @MySpace<br />
Agenda<br />Anatomy of a MySpace game<br />Understand the stream and different viral channels<br />Learn about offsite and Real Time Stream<br />Specific tips and tricks<br />
On Load Handler<br />This may not work:<br />This will:<br />
Popping the Install Modal<br />Alternative to the “install arrow”<br />gadgets.views.getParams().installState<br />Can be “0”, “1” or “2”<br />
Popping the Install Modal<br />Programmatic way to do it<br />autoInitiateInstall=true<br />
The App’s Profile Page<br />Main entry point for installation, often neglected<br />
The App’s Profile Page<br />Main entry point for installation, often neglected<br />