Open Social: screencast and screenshots

In yesterday’s post, I described the new Open Social API, sponsored by Google and supported by a wide range of Internet companies including my company Ning.

In this post, I present a screencast and a series of screenshots that show Open Social in action.

First, the screencast:

 

Next, the screenshots:

As you are probably aware, Ning is a system that lets you create your own social network for anything — your family, your school, your church, your sports team, your business, your nonprofit, whatever you want.

To illustrate Open Social in action, our screenshots are based on three networks out of the 113,000+ networks currently running on Ning: Dub Pages, a network of car customization enthusiasts; Tu Diabetes, a network of people touched by diabetes; and Ask A Ninja, a network of fans of the popular online video series Ask A Ninja.

Because Open Social is not quite ready for production launch, the screenshots below show modified versions of these networks that we have used internally to develop and demonstrate Ning’s support of Open Social. Thanks to these network creators for letting us play with their networks like this!

These examples feature the use of the Open Social API to embed applications from two other Internet companies: iLike, an online music sharing service; and Flixster, an online social movie ranking and rating service — both of whom have announced support for Open Social. These examples are all based on the idea of embedding either iLike or Flixster applications within the three Ning social networks via Open Social.

To start, here’s the home page of the Dub Pages network with the embedded iLike application:

You can see in that screenshot that the iLike application is completely integrated into this network’s home page. The musical selections within the iLike application are chosen by the network creator/owner; everyone who comes to the network gets to see them and listen to them.

If you’re a member of the Dub Pages social network, you have your own personal profile page; here’s what that page looks like, including the iLike application embedded via Open Social:

Since that’s your page, you get to control the music selections within the iLike app; you can choose whatever music you want, and next time you come back to your profile page, that’s the music you’ll see — the Open Social API includes a storage API that lets apps store arbitrary information across sessions.

Here’s another screenshot of your personal profile page, this time showing the iLike app in action — here the user is displaying more information about the song “The way I are” by Timbaland; the information has opened up right inside the iLike app right there in the profile page:

Embedded Open Social apps can resize themselves whenever they want to incorporate whatever functionality the user triggers — so as an app creator, you get a lot of power to let users do things right inside their personal pages.

Shifting from iLike to Flixster as the embedded application, here’s the home page of the Tu Diabetes social network with the embedded Flixster app:

Same concept — the owner of the network gets to determine what movies show up within the Flixster app on the network home page.

Here’s the profile page for an individual user:

Just like a Facebook app, an Open Social app can allow the user to click on a link within the embedded version of the app and expand into a “canvas page” that lets the embedded app show much more information in the page, but still inside the social network. Here the user on Tu Diabetes has clicked on a link in her profile page; this is the resulting canvas page that the Flixster app gets to control:

And here the user has clicked on a link on that first canvas page, which generates a second canvas page:

Finally, to prove the point, let’s see that same Flixster app embedded in a different network — the Ask A Ninja network:

And a profile page within Ask A Ninja:

And a canvas page within Ask A Ninja:

You’ll notice in those Ask A Ninja examples that the Flixster app is not as visually integrated as in the other examples. In a real production system, the Flixster app will pick up the styles of the parent page. We left it the way you see it in these examples so you can clearly see the difference between the embedded app and the rest of the page in each example.

One more note: these examples are a little light on social functionality — they don’t do a lot yet with the user’s friends information, or the user’s activities feed, etc. The Open Social API supports a lot of those capabilities, and the app developers are now busy at work developing the full version of their Open Social apps that will do a lot more social stuff. I will post more screenshots over the next few weeks/months as those apps get more and more socially sophisticated.

And then one final note: these screenshots were not Photoshopped; this is all live running code!