Post-and-Play directly inside Facebook feeds

We’ve started taking advantage of Facebook’s special swf tag and now your Sharendipity creations will play directly inside your Facebook feeds when you post them!

Now you can easily share custom apps that are unique to your friends and they can interact with them just like it’s a video. No more new tabs or windows to launch the app elsewhere.

Application Sharing

These are the steps I followed to share an app with my wife to share my Christmas list.

1. Copy the URL of the  app

Copy the URL from your browser’s address bar for the application you’d like to share. Each application has its own asset page.

2. Use Facebook post to share the app

You can share your link directly on a friend’s page (if they are permitting it) or you can share it on your own wall. In this case, I posted it directly to my wife’s wall.

Alternatively, you can use the AddThis share options found on the asset page to post or email your application directly to Facebook.

Application Play

Once you’ve posted the application, anyone that finds it within the feed can play it directly. By default, the post will appear with the normal blue play button just like a video.

The feed will automatically grow to create room, and your friends can interact with the application, comment, and share it with their network.

What custom app would you like to share with your friends? Maybe a custom slide show?

Enabling our partners via web services

This post is a follow up to our earlier love letter to web services… some of our commercial partners are building exciting apps that leverage their own web services.

Through Sharendipity, they are able to very quickly create apps that present data in new and engaging ways in addition to providing opportunities for their customers to syndicate content anywhere on the web.

For instance, our friends at City Dictionary have built an awesome repository of lingo and slang unique to individual cities all across the country. By implementing an interface to their web service inside of Sharendipity, they can build interactive web applications that display their dictionary in fun new ways.

City Dictionary fans and  customers can customize the apps for their own region and help syndicate the City Dictionary brand anywhere on the web.

Similarly, StudyBlue – the world’s largest academic network – has implemented web services that enable the reuse of their flashcards inside of Sharendipity. Through private web service components, they’ve been able to leverage existing content being created by their users and present it in new gaming formats.

We’d like to help you extend your reach as well. Please email us to get started today!

Custom widget development with web services

Sharendipity is proving to be one of the most dynamic (fantastic!) ways of consuming web services of all kinds. With built in support for RESTful web services, it becomes trivial to implement an interface for lots and lots of third party data sources.

When creators chose to share their implementations with the community, everyone gets an opportunity to leverage the web service without ever having to look at an API document. You can simply drag the service into your application and access the data by calling the respective method.

Most implementations available in the community today are returning the data gift wrapped for your enjoyment. For example, you can take advantage of the Facebook Services to access the profile data for all of your friends and it is given to you in a list of “Facebook User” objects. Poof! Your social graph is there for you and you never once went to the Facebook developer wiki!

Likewise, you can use the YouTube services to ask Google for every YouTube video uploaded by a particular user and are presented with a list of assets that not only tells you the URL but also all of the comments, ratings, description, related videos, etc.

As you might tell, I’m smitten with the power of the web services. The following is a sample of the variety of applications that are using web services today…

• Google Docs – info graphics and spelling games
• Facebook – photo browser, photo scrambles,  puzzles, and profile games
• Twitter and Last.fm combined to make data aggregators
• Blogger – blog streams
• YouTube – personalized TV channels
• Posterous – games, blog streams, and media streams
• Flickr – photo streams and games

Most of these examples are application templates, which allow users to personalize the web service calls for their specific needs. For example, the Twitter/Last.fm application lets you configure a band or singer name for the chatter you’d like to display.

Every application comes with its own embed code so you can post it anywhere on the web.

Anyone can implement and share web services so if you haven’t found the service you’re looking for feel free to get started building your own components. You can read our how-to post if you need a primer to get started.

Create your own Mini YouTube TVs

By combining the new YouTube video integration plus a user-defined implementation of the YouTube Data API, we were able to create miniature television sets that have custom channels!

Sure, YouTube lets you embed a video anywhere, but now you get to embed your own personalized TV channel with a long list of your favorite videos.

This post will document the components and techniques used to build this particular app. However, if you’d like to re-use this one and customize it for your own YouTube content, here are some shortcuts:

• User Channel – This version will let you play all videos uploaded by a particular YouTube user.
• User Favorites – This version will let you play all videos that have been marked as a “favorite” by a particular YouTube user.
• YouTube Search – This version will let you play all videos that match a particular search term.
• A single video – This version will let you play a single video, as defined by the YouTube video ID.

Anatomy of the TV

We’re going to break down this application to give you a better sense of how it was created and perhaps inspire you to create your great video app. This application has three basic elements:

1. Pretty artwork!
2. A video player object that plays video and responds to controller input
3. User interface controls to start, stop, and change the channel for the TV
4. A web service that locates the desired video and all of the related content

Pretty artwork

There is one large rectangle that has the television artwork applied to it. The artwork was created in such a way that the center (display) space was made transparent. This provides the ability to see other objects that have been placed in the background.

The artwork on the rectangle has been marked as “configurable” so other users can re-skin their televisions during the customization process. If you’d like to create your own skin for this particular television, create a jpeg or png that is 300 x 225. The transparent cutout should be 266 x 150 and offset from the top edge by 8 pixels. You can upload the skin during the customization.

Kudos to Man Vs. George Design studio for some handsome artwork!

YouTube video player

In the background, there is an object that displays the video. It’s nothing more than a rectangle that has some additional logic to control the playback features. As we discussed earlier, the key element to playing YouTube videos is through the manipulation of an object’s image property.

To simplify access to the video player’s properties, methods were defined on the object. This allows the application to manipulate the channel using higher level functions.

These four methods provide access to other objects in the application to control playback. But it lets the video player actor itself decide how to implement them. You can find this actor – “video player” – available in the asset manager to be used in your own application.

User interface controls

You’ll notice that there are several controls sitting on the lower portion of the television. These are just rectangles with artwork applied. They each have behaviors defined on them that declare what should happen when a mouse click occurs. Under the hood, they utilize the methods defined on the video player to manipulate the video.

The “?” button is slightly different. It creates a hover screen and displays some of the details for video that is currently being played (like name, play count, and average rating).

YouTube web services

Rather than simply specifying a single video for playback, this app leverages the YouTube web services objects to locate video streams for playback. This not only creates an opportunity to access limitless amounts of video content, but it also provides access to all of the video details including title, description, ratings, view counts, comments, etc. Anything you find on the video’s YouTube page, you can find in the web services. What awesome power!

Google provides access to this data via their YouTube Data API. Several of these API feeds have been implemented within Sharendipity. You can access them simply by dragging the definition types into your application. Just search the asset manager for “YouTube Service” and you’ll find several feeds under the “Types” category:

• Access to a user’s uploads
• Search by query terms
• Access a user’s “favorites” list
• Access to individual videos based on video ID
• Search by YouTube channel

All of these services return an array of YouTube data structures that describe all of the details of individual videos.

Is there a missing feed you need? Anyone can create these so feel free to jump in. Of course, if we can help, we’d love to hear from you.

New opportunities

We’re really excited about the potential with video. By providing access to Google’s Player API as well as the Data API – while abstracting away all of the programming – we think great things can be accomplished in gaming, marketing, as well as education.

Everyone has the opportunity to build engaging video content now. Go get started!

Native video support now available!

We’ve released support for video playback within Sharendipity and we’re eager to see what you can do with it!

Included in this feature are three core integration points for video:

1. Native support of the YouTube video player inside your apps
2. Support for sharing of Flash Video (FLV) files within the community
3. Support for Flash Video (FLV) specified by URL

YouTube support

Google recently announced the addition of native, ActionScript3 support for the YouTube Player API. This enabled Flash developers to add support for embedding the YouTube player inside their Flash applications.

And now we’ve provided an abstracted interface to the YouTube player for you, our Sharendipity creators.  You can now add a YouTube video to any primitive actor in the system by simply providing the URL. There are base actions that let you play, pause and rewind the video within the logic builder.

With these four basic primitives, you can quickly build complete YouTube playback applications with UI controls to pause, play, and surf video content.

Check out these fun little mini TVs for an example of how you can create new ways of surfing YouTube videos.

Sharing FLVs just like images

Just like images, FLV files can be shared and re-used by everyone in the Sharendipity community. The work flow for adding FLV files is identical to the one used for images and sounds except there is now a new category in the asset manager called “Video”. Please read the post on sharing images to learn more.

To reuse the FLVs found in the asset manager, simply drag a thumbnail from the manager and drop it on the desired actor in your application.

Flash video support by URL

If you would prefer to access existing Flash video on the web, you can simply drop the URL into the image property for any primitive actor in your application. We’ve implemented the ActionScript 3 video player and it will play any video simply by pointing to its URL.

If the URL points to a YouTube video, we will automatically insert the YouTube player.

We’re hosting a Madison IGDA chapter meeting

We’re hosting the December meeting for the Madison IGDA student group at our Sharendipity offices on December 3rd at 6:00pm. If you will be in or around Madison next week, please stop by and check out what this new student chapter is all about!

The following is the agenda they’ve listed on their flyer…

Come meet other local developers and DEMO YOUR WORK. We’ll be getting to know everyone and their areas of interest, discussing platforms, software and tools and generally having a good time. Food will be provided!

Check in with the Facebook Event to let the IGDA chapter know if you can make it. And feel free to share it with your friends!

Facebook ActionScript API Gotchas

Sharendipity has had an implementation of the Facebook API for quite a while now.  However, you had to be logged in through our Facebook application or have your Sharendipity account synced up with your Facebook account to access your social graph data.

We’re thrilled to announce that we’ve implemented Facebook Connect. Now if you sign in to Sharendipity using your Facebook account, you and the applications you use on sharendipity.com will have full access to your social graph!

In this post, we’ll outline our experience implementing Facebook Connect using the Facebook ActionScript API.

In addition to the login workflow, we also needed to switch our feed stories over from the old templated style to the new stream publish method.  Unfortunately this isn’t that straightforward because of the stream publish method requires you to either prompt the user to be able to publish on their behalf, or prompt them to publish the story.  Previously, our server could take care of the publishing, but you can’t prompt the user that way.  So a lot of the Facebook feed functionality needed to move to the client.

Fortunately, Facebook and Adobe just announced a new Facebook ActionScript API.  Cool, right?  Well… sort of.  I’ll admit that we really only needed it for publishing feeds, so our use case might be a little different than some.  However, the documentation is pretty sparse, as are the examples, and the error reporting is nearly non-existent.  But you can figure it out if you want.  I did, but not before I realized we couldn’t use it to publish feeds the way we wanted to.  I thought I’d list what I learned here to help you out, it might prevent you from having to read all the code in the API yourself.

Before You Start

If you want to be able to prompt users for feed stories as you would with FB.Connect.streamPublish through the ActionScript API, you’re out of luck.  The ActionScript API uses the REST-based calls for stream.publish, which requires that you prompt the user for rights to publish to their wall on their behalf.  We don’t like that and would rather prompt the user, providing an opportunity to add their input every time.

Also, if you are publishing on behalf of the user, you need to build the API yourself, because there’s currently a bug in JSONEncoder (version 3.3) which might prevent anything from happening.

Always use FacebookSessionUtil

It’s possible to create a WebSession directly, just don’t.  It should really be package private so you can’t even do it.  The problem is that if you create a WebSession and try to post something using it (e.g. using a PublishPost object), the session will never have been set in the IFacebookCall, and you’ll get a null pointer error.

In fact, you don’t even need the WebSession.  Once you’ve initialized FacebookSessionUtil using your API Key and the loaderInfo, all you need is the Facebook object to post something.  This is important because Facebook.post() will operate on the post passed in, which internally sets the session to avoid that null pointer.

Never Pass Your Application Secret to FacebookSessionUtil

Almost all of the examples I could find used the application’s secret.  This is great for debugging, but you don’t want to do it in production because someone can hijack your Facebook application if they can get the secret (e.g. through decompilation of your swf).  Instead, create the FacebookSessionUtil and get the Facebook object like this:

var util:FacebookSessionUtil = new FacebookSessionUtil(YOUR_API_KEY, null, loaderInfo);
facebookRef = util.facebook;

Note that we’re passsing in null in place of the application secret. Internally, FacebookSessionUtil will look for the correct parameters from the passed in FlashVars to create the session, so:

Make Sure Your FlashVars are Initialized

FacbeookSessionUtil explicitly looks in the loaderInfo that is passed in for the correct signature parameters, which it uses to create a WebSession for you.  If those don’t exist then you’ll get a DesktopSession.  The WebSession is the only one that uses the Session Secret. This means that if you aren’t setting those parameters before embedding your SWF file, you must set them in the loaderInfo before creating the FacebookSessionUtil object.

In our case, the user may not be logged in to Facebook when they first launch our Application.  If they log in using Facebook Connect, then we must get the session information in JavaScript and pass it into our app using the ExternalInterface.  So in ActionScript we have something like this:

ExternalInterface.addCallback("fbUserLoggedIn", handleFBUser);

Then in JavaScript, our function for handling the user login looks like this:

FB.Connect.requireSession(
    function() {
        mtSWFObject.fbUserLoggedIn(
            FB.Facebook.apiClient.get_session().session_key,
            FB.Facebook.apiClient.get_session().secret,
            FB.Facebook.apiClient.get_session().uid,
            FB.Facebook.apiClient.get_session().expires,
            FB.Facebook.apiClient.get_session().sig);
    });

And the last piece is that we need to implement handleFBUser so that it can write the correct parameters into the loaderInfo object so that the FacebookSessionUtil object can be created correctly:

private function handleFBUser(sSessionKey:String,
                              sSessionSecret:String,
                              sUserID:String,
                              iExpires:int,
                              sSignature:String):void {
    loaderInfo.parameters["fb_sig_session_key"] = sSessionKey;
    loaderInfo.parameters["fb_sig_ss"] = sSessionSecret;
    loaderInfo.parameters["fb_sig_api_key"] = YOUR_API_KEY;
    loaderInfo.parameters["fb_sig_user"] = sUserID;

    // now create the FacebookSessionUtil.
}

Using the  FacebookSessionUtil object, you can then create a PublishPost object, and publish away, provided you have requested the stream.publish right for the user.

Conclusion

We currently provide most of the Facebook information via Web Services in Sharendipity, so we don’t need the ActionScript API right now.  It would be more useful to us if we could prompt the user for feeds, but that doesn’t seem to be possible.  In addition, it would be fantastic if you could log in via FacebookConnect when Sharendipity is embedded anywhere.  You can’t do this via JavaScript for security reasons (you need to be on the domain for your Facebook application to log in correctly).   I think that you might be able to login if you create the FacebookSessionUtil using your application secret, but I’m wary of sending that across the wire, and in any case, the dialogs used in the API are implemented using AIR-based NativeWindows, so I don’t think it would work on the web.

We won the Ning Appathon!

We’re really excited to be the winners of the first Ning Appathon today. We won for the best “ported application” category and received a cool $4,000!

Ning had a pretty prestigious group judging the contest…

Submissions for our weeklong competition were judged by Wired Editor-in-chief and DIY Drones Network Creator Chris Anderson, Ning Chairman and Co-founder Marc Andreessen, and blogger and Managing Director of building43 Robert Scoble. The competition began on Nov. 5 with all submissions due on Nov. 12. The entrants were judged on creativity, usability, how well they integrate with Ning Networks, viral features, and usefulness.

It’s more than just an app

One of things we’re most excited about is the transformation we went through as part of this project. This is much more than just a Ning app for us. After all, Ning users have long been able to post their Sharendipity creations inside Ning using the standard embed code.

When we decided to go after this prize, we set the bar very high. We wanted to syndicate the entire software development process. To provide a set of tools that let anyone run their own development site.

This will mean that a teacher can create a template that allows her students to develop their own interactive study guides. And a niche gaming network can run their own game creation contest. All from within their own website, blog, or Ning network.

We aimed to build one application that delivered the creation tools, community aggregation tools, and a means for individual users to interact with their own creations – all in a nice bundle and tightly integrated with the OpenSocial standard. We’re thrilled that Ning recognized us for this achievement!

There’s more to come!

The Ning community provides us with an awesome opportunity to explore niche, custom software development. We’re excited to see what kinds of applications they can create now that the barrier for software creation has been significantly lowered.

Over the next several weeks we’ll talk more about how our tools can be syndicated outside of sharendipity.com. And we’ll help the Ning users leverage our platform to do even more. We’d like to give them the tools to submit their own software to the Ning application directory.

Here’s the official Ning press release.

Sharing images inside the Sharendipity community

We interact with lots of creative artists that have done some great work, and are looking for new opportunities to distribute their artwork. In many cases, they like the idea of participating in the Sharendipity ecosystem – particularly with the gamers – but lack the interest in creating authentic games themselves.

Since images can’t be shared directly from the website, it isn’t obvious how to get started. This post is intended to show you how you can share your images from within the Sharendipity editor.

Once they’ve been added, they will be accessible to everyone else within the Sharendipity community.

1. Login

Before you can share anything out to the community, you first need to login with your Sharendipity account. If you don’t yet have an account, you can create an account in a flash by clicking “Create an account” at the top of the page.

2. Launch the editor

The editor can be launched in one of two ways. You can either click the “Create Yor Own” button at the top of the games page or you can launch into it directly using the following URL:

http://games.sharendipity.com/create/

3. Open the asset manager

Once you are in the editor, you manage all Sharendipity assets through the asset manager. This interface provides access to the components local to your application as well as those shared out in the community. This is true for everything from game characters and web services, to artwork and sounds.

Each asset type filter provides a “New” button at the bottom of the asset manager dialog.

4. Select the “Images” filter

From inside the asset manager, select the “Community Assets” tab at the top and then hover over the type filter to select “Images”. In addition to filtering the search results to images, it always presents a new option at the bottom of the window to upload new images – “Upload Image…”

5. Upload your new image

When you click the “Upload Image…” button, an upload dialog will appear that prompts you for the location of the file. Click “Browse” and locate the image on your desktop, and click “Upload” to start the upload process.

6. Describe your image asset

Once the file has been streamed to the server, you will be prompted to describe the asset. The thumbnail should be pre-populated, but you should fill in a name, description, and tags that describe your asset and make it easy for others to find.

If your image is a tile used for animation, use the fields underneath the thumbnail to describe its layout.

Finally, you’ll need to decide whether to make your image public or not. If you do not check the “Visibility” box, the image will not appear in the search results for other Sharendipity users. And don’t worry, you can change this setting at any time after it has been saved.

Happy sharing!

More developer features: IDE-like editing and debugging

Over the past few months we’ve been rapidly evolving the Sharendipity application editor toward a full-featured Integrated Development Environment, or IDE, similar to the environments used by professional programmers. These changes reflect the fact that many of our users today are highly technical, and computer users in general are becoming more and more comfortable with sophisticated environments, such as Microsoft Office or Photoshop.

For instance, we changed our menuing system, replacing the “cute” characters at the bottom of the screen with a more standard set of pulldown menus. While some users may have found the characters less intimidating, the majority of users preferred a standard set of pulldown menus.

We’ve also recently released developer tools including a profiler for optimizing application performance.

Today we’re releasing an additional set of powerful features that simplify application development and debugging.

Tabbed window management

Once an application had a few custom actors or types, the class, method, and behavior editors would become unwieldy, forcing the author to waste time arranging windows.

Editors are now launched in tabbed windows that keep things organized:

New editors are launched on tabs on a single tabbed window. Or tabs can be “torn off” to create new tabbed windows, which can be useful when copying logic statements between methods or behaviors.

In addition, an integrated window manager now places windows in more logical positions, avoiding the player window, remembering previous window positions, and tiling windows that would otherwise launch on top of each other.

Debugging Tools

Previously we released a simple breakpoint capability. Our new release includes full debugging tools, allowing breakpoints to be set and allowing line-by-line stepping through the code as it executes.

To add a breakpoint, simply double-click on the left side of a statement. A stop sign appears to indicate the breakpoint.

When this line of code is executed, execution of the thread will be paused. The “Problems” indicator will turn on when a breakpoint is encountered; if the editor is not already open you can access the breakpoint through the Problem Viewer.

A green arrow indicates where execution is stopped. You can move the mouse over any variable to check its value.

(An exception will produce the same view, except the arrow will be red. And a yellow arrow indicates that execution is stopped within a method called from that line of code.)

The Breakpoints view, accessible from the Advanced… menu, displays all breakpoints and can be used to temporarily disable breakpoints. Double-click on an entry to launch the corresponding editor.

To step through the code line-by-line, use the Thread viewer, which is described below.

Threads

Sharendipity is a multi-threaded environment. When a behavior is triggered, it is executed on its own execution thread. The application executes at a given frame rate, and on each frame the active threads are each executed for a limited amount of time. This keeps the system interactive and allows background processing, for instance a fade effect that occurs as the game continues to play.

The Thread viewer displays all active threads. It also displays threads that are suspended due to a breakpoint or an exception.

In this example a single thread is executing and is suspended due to a breakpoint. The “stack trace” shows exactly where the code is currently executing: the “fetch words” behavior has called the “setup puzzle words” method which has then called “place word randomly”, which is where our breakpoint is positioned.

The Play button will resume execution of the thread, until it hits another breakpoint or finishes execution.

The Step and Step into buttons can be used to step line-by-line through the code, which can be very useful for debugging. The Step function steps to the next line within the method or behavior. the Step Into button will step down into the method that is called from the current line. If the current line does not call a user-defined method, Step Into will simply step to the next line within the method/behavior.

These powerful tools are only possible because Sharendipity is built on a very sophisticated object-oriented architecture and runtime environment. This core architecture and toolset makes Sharendipity a powerful tool for you to build interesting interactive web applications.