August 10th, 2011

Sharing Flash content on Facebook

One of the most powerful aspects of Facebook is the ability for content to be quickly propagated through people sharing with their friends. In this case we want to allow someone to share some Flash based content on his/her wall, and have the application know when the sharing has been successfully completed. Read on to learn how to use some simple JavaScript to pass the post id back to your Flash application.

JAVASCRIPT TO THE RESCUE

One way to allow someone to share something on their own wall is to use the Feed Dialog.
The documentation states that we can “Prompt the user to publish an individual story to a profile’s feed. This does not require any extended permissions.” The most important feature for our purposes is the data that is returned when this is invoked.

CODE
In the Actionscript for your Flash application, you will construct a simple URL string based on the available variables from the Feed Dialog:

var appID:String = '012345678901234';
var title:String = 'Flash-JavaScript-Share';
var title_link:String = 'http://example.com/post/123';
var caption:String = 'Share from a Flash app on Facebook';
var desc:String = 'It\'s not so difficult sharing from a Flash app on Facebook with a callback!';
var pic:String = 'http://example.com/images/example.jpg';
var redirect_url:String = 'http://example.com/thank_you.php';
 
var url:String = 'http://www.facebook.com/dialog/feed?app_id=' + appID
    +'&picture=' + pic
    +'&name=' + escape( title )
    +'&link=' + escape( title_link )
    +'&caption=' + escape( caption )
    +'&description=' + escape( desc )
    +'&display='+ 'popup'
    +'&redirect_uri=' + redirect_url;

The important variables to note above are the appID and the redirect_url. The appID will be your application’s specific ID as provided by Facebook in the application portal. The redirect_url will be where Facebook redirects the user once they’ve completed the sharing process. We’ll take a look at the code involved in that page after we’ve set the callback functionality in Flash, which is done with the following code:

if( ExternalInterface.available )
{
    try
    {
        ExternalInterface.addCallback( "confirmPost", _confirmPost_handler );
    }catch( $e:Error ) { trace( this, 'error adding callback handler: ' + $e ); }
}
 
function _confirmPost_handler( $post_id:String ):void
{
    // your app should handle this appropriately
    trace( "_confirmPost_handler: " + $post_id );
}

The only thing left to do is to open the URL from your application:

btn.addEventListener( MouseEvent.CLICK, _share );
function _share( $evt:MouseEvent ):void
{
    if( ExternalInterface.available )
    {
        ExternalInterface.call( "window.open", theURLtoCall, "win", "height=400,width=580,toolbar=no,scrollbars=no" );
    }
}

If you haven’t already created an HTML page for your swf, you can take a look at the sample below for inspiration. Take note that the swf is contained in a DIV that has a specific id – swfContainer – so we can target the Flash object from JavaScript:

&lt; !DOCTYPE html&gt;<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script><script type="text/javascript">// <![CDATA[
			var swfDiv = "swfContainer";
 
			var attributes = {
				id:swfDiv,
				name:swfDiv
			};
			var flashvars = {};
			var params = {
				menu:false,
				scale : "noscale",
				quality:"high",
				allowScriptAccess : "always",
				wmode:"opaque"
			};
			swfobject.embedSWF( "main.swf", swfDiv, "520", "520", "10", "", flashvars, params, attributes );
// ]]></script>
This is some flash content

Next we can look at the important code in the ‘thank_you.php’ page that the user will be redirected to once they’ve successfully shared the content. This page uses $_GET to retrieve the post id that is passed to it from Facebook, and then, using some simple JavaScript, we can pass that back into your application by calling the callback function and passing in the PHP variable:

$post_id = '';
if( isset( $_GET['post_id'] ) )
{
    $post_id = $_GET['post_id'];
}

The JavaScript:

<script type="text/javascript">// <![CDATA[
    var flash = document.getElementById( "swfContainer" );
    flash.confirmPost( < ?= $post_id; ?> );
// ]]></script>

CONCLUSION

The result: the user clicks share; the Feed Dialog opens; user fills out the input text if they decide to; the message is posted to their wall. Once that is done, Facebook will redirect the user to whatever URL is provided, and will call the JavaScript function to pass that information back to the Flash application, so an appropriate message can be presented to the user to thank or reward them for sharing.