How to Publish a Flash Application to the Facebook Stream

If you’re in an agency and/or have been paying attention to Business Week and the Wall Street Journal recently, you’ll know that my former employer Resource Interactive recently released a service offering called “Off The Wall“, which in short is a way to extend your e-commerce workflow into the Facebook stream. “Share on Facebook” can now push a product to a user’s news feed, and if someone wants more information they never actually have to leave the Facebook environment to perform a “me too” purchase.

Cool, huhn? Security concerns aside (Believe me, I am never giving anything on facebook my credit card information), this isn’t exactly new- pushing product information into the Facebook stream was what the original Facebook Beacon was all about, and that was shut down via a class action lawsuit because it published user sales data without user approval. Additionally, pushing rich media applications into the Facebook stream is not new- anyone who’s viewed a youtube video in their Facebook stream knows how seamless that can be. What’s interesting though is that Resource has overcome the legal concerns with two changes: First, by giving users control of what to share when, and secondly by actually launching a full commerce application into something that people check every day.

If your initial reaction is disgust (“What? Another way for people to sell us their stuff? Blegh”) then you and I are pretty much on the same page, however don’t be blinded by other creative uses of this. For instance, if you want to buy someone a Christmas present, wouldn’t it be nice if you saw their wishlist items in the stream? What about gaming- if a friend of yours is playing some kind of a live flash mini game… wouldn’t you want to join them immediately? There are legitimate uses for this that don’t turn your stomach, so I figured I’d write a quick overview on how to put it together.

So how did they do that?

If you already have an application you want to run inside the Facebook news stream, then the process of getting it shareable is extremely simple, and is easily accessible to anyone who knows a little bit about flash, HTML metadata and the facebook platform. You have to perform the following tasks, most of which are trivial unless you are trying to do anything covered by a regulatory body (like accepting credit card information). For that you have to have a secure and federally accredited server, and that’s way outside of the scope of this article.

Step 1: Add the “Share on Facebook” link on the page in question.

The first thing you need to do is give your users the ability to actually share your page. This can be as easy as including a particularly formatted link in your product page or as complicated as including FBML in your site’s header and namespace. Note that the share URL can include URL parameters that will customize the content of the page, and should be pointed at the hosted URL of your flash application- this is crucial for step 2.

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php?u=[url to share]&t=[title of content]">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Step 2: Add the correct meta tags to the page you want to share.

When a user clicks on the above link, it actually triggers the Facebook Sharer script to scrape the provided URL for metadata that tells it how to share this page. All of this data is contained in the metadata tags of a page, and you can read the extensive documentation here, however the important piece you’re looking for is how to share multimedia content. If you’ll read the documentation carefully, you’ll notice that while all references talk about video, in reality this share functionality allows you to display any flash content in the Facebook stream simply by replacing video_url with the URL to your flash SWF. This is still restricted to user action of course- nobody will see a flash app launched immediately, they’ll still see the icon and title as with any Youtube Video, and the application won’t launch until the user actually clicks on the icon.

<meta name="title" content="video_title" />
<meta name="description" content="video_description" />
<link rel="image_src" href="video_screenshot_image_src url" />
<link rel="video_src" href="video_src url"/>
<meta name="video_height" content="video_height" />
<meta name="video_width" content="video_width" />
<meta name="video_type" content="application/x-shockwave-flash" />

EDITORIALIZING: What worries me on this is that Facebook’s documentation is very clearly targeted at video sharing, and that this may be a violation of their intent of the sharer script. In short, what Resource is publishing as an innovation to social commerce is little more than a hack bolted into a loophole. Even so, I don’t believe Facebook will try to blacklist retailer sites to put this genie back in its bottle, because it both encourages use of their platform while also opening the gates to more legitimate uses. The ability to see that someone is, say, playing a game right now and your ability to join them is only a single click away puts an entire new spin on live online gaming, especially with the recent release of Adobe Collaboration Services, but I digress…

Step 3: Get your domain whitelisted by Facebook

If you paid especially close attention to the documentation linked above, you’ll also note that multimedia sharing won’t work if your domain is not whitelisted by Facebook. This is to protect Facebook from people who might want to distribute illegal content that would get them in trouble (licensed movies for instance), but also gives Facebook ultimate white and blacklist control over any activity they don’t want subverting their functionality. The process is actually extremely simple: Click this link, fill out the form, and wait for them to get back to you. Last time I did it it took less than 24 hours, but that was for a major retail site; your experience might vary.

That’s it. Enjoy!

6 thoughts on “How to Publish a Flash Application to the Facebook Stream

  1. So you are always sharing an actual page…

    If it’s just using meta tags at the top of an html page, you could easily get the Flash Platform Distribution Service to handle your actual sharing. No need to cook up a specific facebook solution – if the meta tags work the way I understand them to, then you can share a link to your HTML container page and if someone shares to Twitter it’s just a URL whereas if someone shares to Facebook it’s an embedded .swf.

    Maybe.

    Going to have to play with this a bit.

  2. Not entirely- the page is scraped for the metadata, but the item that’s actually embedded in the facebook stream is the swf and all the url parameters included in the video source URL parameter.

  3. should be html? or the swf itself?

    I have tried, but no luck… tho I’m still waiting fb to whitelist my server.

  4. “link rel=”video_src” href=”video_src url”/”

    shou;d be the HTML embeding the flash? or the swf file?

    I tried, no luck tho my server is still waiting for whitelist.

  5. Hi,

    I got a message that my domain is whitelisted, but the SWF I’m sharing just turns up as a generic sharing message. I was expecting to see a play button over the image, and the SWF to play inside the wall stream upon click, but it doesn’t seem to work. would you be able to see what I’m doing wrong?

    http://labs.tribalddb.nl/test/fbswftest/

Leave a Reply