15 Jan 2010

Code tips for your Facebook application

Coding 3 Comments

Today we would like to spend some time talking about our experience developing a simple Flash game for Facebook and share some useful tips with you.
Obviously, the first thing you need is an idea…if you want your application to became famous going social you got to stop thinking like a developer and start thinking like a facebook user.

Individual preferences on what kind of game a person would like to play are not as relevant as the fact your game has to have a large social component.
The player is primarily a social network user and secondarily a game player; he’s using your application because he decided to join Facebook to keep in contact with friends, coworkers, relatives and share contents with them.

Take your time and find a funny way to entertain users giving them the chance to interact with the others, telling they’re having fun playing your game and inviting friends to do the same. This way your game will spread.

If you have decided to use Flex as development platform, keep reading, otherwise go here and choose yours.
You can download here the official API Libraries which are fully supported by Facebook and Adobe.
If you use SVN you can check them out from this repository.
It comes with some useful example projects.
Also the Adobe website has some useful resoursces.

Now you have to set up your brand new application, going here: http://www.facebook.com/developers/

Once you joined the developers group and registered your application, to start testing from Flex you’d like set the “Application Type” as Desktop, so the debugging process will be easier.

When your application is finished, you’ll decide to use IFrame or Fbml, for now let’s see how Fbml works.
Leave the Canvar Callback Url’s field empty, it will be read as “localhost”.

First step: Log In from your application

Create a New Flex Project and import the Facebook SWC Library ( http://facebook-actionscript-api.googlecode.com/files/Facebook_library_v3.4_flash.swc ).

Then try this snippet, provided by Adobe, replacing “xxxx” with your Application Secret and API Key (they’re stored in Your Application’s Home Page):


import com.facebook.Facebook;
import com.facebook.events.FacebookEvent;

private var _book:Facebook;
private var _session:FacebookSessionUtil;

private var API_KEY:String = "xxxx";
private var SECRET_KEY:String = "xxxx";

private function init():void {
    //create a new Facebook Session
    _session=new FacebookSessionUtil(API_KEY, SECRET_KEY, loaderInfo);
    //add listener for the connection complete
    _session.addEventListener(FacebookEvent.CONNECT, onConnect);
    //connect
    _fbook=_session.facebook;
    }

private function onConnect(e:FacebookEvent):void {
    //you're logged in!
    trace("Facebook API Ready");
    }

private function doneLoggingIn():void {
    //validate session
    _session.validateLogin();
    }

You can find your app information in its facebook profile:

A pop-up should open and ask you to log in, if you haven’t already logged in.

Now that you’re logged in, you might be interested in knowing how to retrieve users’ data.
There are several ways to access users information: the most common are API methods and FQL queries.
I personally prefer the latter, since I reckon it is considerably faster.
It’s because you can use specific requests to get just the data you need. In fact most of the methods implemented by the API Libraries are generally wrappers for FQL Queries.
FQL allows you to use a SQL-style interface to construct queries that returns data stored in these tables.
If you’re not familiar with SQL language here you can find detailed information about creating Fql queries.

Here’s an example that shows how to retrieve friends’ Uids, first name and last name from logged user’s Uid:


import com.facebook.Facebook;
import com.facebook.commands.fql.FqlQuery;
import com.facebook.data.FacebookData;
import com.facebook.events.FacebookEvent;
import com.facebook.net.FacebookCall;
import com.facebook.utils.FacebookSessionUtil;

private var _fbook:Facebook;
private var _session:FacebookSessionUtil;

private var API_KEY:String = "xxxx";
private var SECRET_KEY:String = "xxxx";

private function init():void {
    _session=new FacebookSessionUtil(API_KEY, SECRET_KEY, loaderInfo);
    _session.addEventListener(FacebookEvent.CONNECT, onConnect);
    _fbook=session.facebook;
}

private function doneLoggingIn():void {
    session.validateLogin();
}

private function onConnected(e:FacebookEvent):void{
    _session.removeEventListener(FacebookEvent.CONNECT, onConnected);
    trace("Facebook API Ready");
    if(e.error){
        // catch errors
        trace("ERROR:"  +  e.error.errorMsg + e.error.errorCode);
    }else{
        var _loggedUserUid: Int = _fbook.uid ); // save logged user's IUD necessary to do the query
        //create an Fql Multiquery using user (http://wiki.developers.facebook.com/index.php/User_%28FQL%29)
        //and friend (http://wiki.developers.facebook.com/index.php/Friend_%28FQL%29) tables
        var query: String =  "SELECT uid, first_name, last_name FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = " + _loggedUserUid + ")";
        //create a FacebookCall and use post method to do a query to Facebook server
        var fbquery:FacebookCall =  _fbook.post(new FqlQuery(query));
        //add a listener for the event complete
        fbquery.addEventListener(FacebookEvent.COMPLETE, onGetData);
    }

}

private function onGetData(e:FacebookEvent):void{
    if(e.success){
        //save your data as FacebookData
        var data:FacebookData = e.data;
        //and store your query result as XML
        var result:XML = new XML(data.rawResult);
        //now you can parse your XML how you're used to do
    }else{
        // catch errors
        trace("ERROR:"  +  e.error.errorCode + e.error.errorMsg);
    }
}

Yeah, you know who you (and your friends) are!
Another useful tip to create a viral application is to let users post messages to walls ( their own or their friends’), but we’ll discuss this topic in a future post.
For my application I decided not to use a html button to open “Invite Friends page”, I prefer having a flash button embedded in the swf. In order to make it work I had to link it to a simple PHP script via ActionScript.


require_frame();
$user = $facebook->require_login();

    // Prepare the invitation text that all invited users will receive.
    $content =
            "  write something <a href="\">".$app_name."</a>.\n".
            "get_add_url()."\" label=\"Get Stats Now\"/>";

?>

This is the AS3 code for the button:


inviteBtn.addEventListener(MouseEvent.Click, invite);

private function invite(e:MouseEvent):void{
    //the url where php script is stored
    var url:String = "www.yoursite.com/invite.php";
    //create a URLRequest and use navigateToURL to link the page
    var request:URLRequest = new URLRequest(url);
    navigateToURL(request);
}

3 Responses to “Code tips for your Facebook application”

  1. WP Themes says:

    Good fill someone in on and this post helped me alot in my college assignement. Gratefulness you as your information.

  2. Nik says:

    Some of the example code throughs errors.

    You have a listener set for the function onConnect but the function is called onConnected.
    Some instances of the private var _session are typed as session.

  3. Nik says:

    int is typed : Int

    Good post though :)

Leave a Reply


× five = 30