Facebook Flash AS3 & JS Application

Tuesday, 4 March 2014

Facebook Flash AS3 & JS Application

Very first thing you gotta do is to go to https://developers.facebook.com and create your own app. Now go to basic settings and fill App on Facebook part like example below

Login, authorization and getting user data – Facebook Flash AS3 & JS Application, Part1

Since last year I’ve been strugling with As3 facebook lib and all I can advise you – leave it. Just don’t use AS3 Facebook API anymore. There are so many unpredicted problems that it’s really not worth it.
Good thing is that you can provide all Flash – FB communication with some help of Javascript. JS sdk i really well documented and you will find many, many examples over the internet.
My plan is to show you how to configure your application, handle different scenarios, how to login, authorize, invite, post, etc.
The first part is all about configuring and login process.
If you can not provide ssl certificate (https:// in canvas url) turn on sandbox mode, just for development time. Your app will be visible only for admins, testers, etc but it will work. Otherwise facebook will not let you run app without secure connection. Anyway you got to provide ssl for real world application.
The first your app need to do is to determine if a user is logged in to Facebook and has authenticated your app (permissions). We will Not use a single line of AS3 to do his. Actually you don’t want your swf do be downloaded as long as you’re not positive about user status.
In few lines of code we’re loading JS SDK:

In few lines of code we’re loading JS SDK:

window.fbAsyncInit = function() {

     FB.init({

     appId : 'YOUR APP FACEBOOK ID', // App ID

     channelUrl : 'http://fbgadgets.blogspot.co.uk/2014/03/projects-fbsampleapp-channel.html', // Path to your Channel File

     status : true, // check login status

     cookie : true, // enable cookies to allow the server to access the session

     xfbml : true, // parse XFBML

     oauth : true

});

Next, let’s set our Facebook canvas size

?

FB.Canvas.setSize({ width: 580, height: 800 });

Cool, now we are ready to check user status and we are doing it like this:

?

FB.getLoginStatus(function(response) {

     if (response.status === 'connected') {

         // if user i slogged in and has alerady authorized your load SWF

          var uid = response.authResponse.userID;

          var accessToken = response.authResponse.accessToken;

          loadSWF();

     } else if (response.status === 'not_authorized') {

     // if user is logged in but has not authorized your app let him do it now

          var oauth_url = 'https://www.facebook.com/dialog/oauth/';

          oauth_url += '?client_id=YOUR APP FACEBOOK ID';

          oauth_url += '&redirect_uri=' + encodeURIComponent('http://apps.facebook.com/flash_js_sampleapp');

          oauth_url += '&scope=email,user_about_me,publish_actions,publish_stream,user_photos,user_likes'

          window.top.location = oauth_url;

     } else {

     // user isn't logged in to Facebook

          loginUser();

     }

}, true);

Few important lines here.

client_id – your app id
redirect_uri – after all authorization process user will be redirected to this url , generally you want him to get back to the app.
scope – you store all your permissions

Ok, let’s say user is playing your Facebook APP first time, so he was walked through all authorization process, approved all permisissions and finally after that got redirected back to index.php. This time the same script (FB.getLoginStatus) will run loadSWF() function. And it looks like this.

?

function loadSWF(){

       swfobject.embedSWF("FacebookJSAS3App.swf?"+randomnumber, "flashHolder", "580", "330", "11.0.0", "expressInstall.swf", flashvars, params, attributes);

}

Simple swfobject uage, nothing complicated. Now we can move to AS3. Take a look at FacebookService.as

There are 2 important lines:

?

ExternalInterface.call('getJSUserData');

ExternalInterface.addCallback('setUserData', setUserData);

First line is calling getJSUserData method. The second one will listen to setUerData function from Javascript and run setUerData method in AS3. Simple two way communication.

Let’s take a look at JS getJSUserData function

?

function getJSUserData(){

     FB.api('/me', function(response)

          var fla = document.getElementById('Main'); // getting my swf to caommunicate with him

          fla.setUserData(response);  // running setUserdata method in swf and passing FB user data

     });

}

Post on the wall – Facebook Flash AS3 & JS Application, Part2

Today I wanna show you how to post on the wall from flash application and just like in the Part 1 of Facebook App series, I am using Javascript SDK. I have added two new UI components – Post button and input text field, so you can be sure that any post data can be passed to javascript from as3.

Not to many changes in actionscript, just added new method to the FacebookService called post and it looks like this:

?

public function post(_postVO:PostVO):void{

     if(ExternalInterface.available){

           trace('============= POST ON THE WALL ===============');

           ExternalInterface.call('facebookPost', _postVO);

           ExternalInterface.addCallback('postCallback', postCallback);

     }

 }

I have also created PostVO.as object to store all my post data and pass it to JS when needed.

In index.php file I wrote simple function using Facebook API

?

function facebookPost(arg){  // here we are passing our PostVO object

FB.ui({

method : 'feed',

name : arg.name,

            link : arg.link,

            picture : arg.picture,

            caption : arg.caption,

            description : arg.description

      },

function(response) {

            var fla = document.getElementById('Main');

            if (response && response.post_id) {

                 //alert('Post was published.');

            } else {

                 //alert('Post was not published.');

            }

            console.log(response);

            fla.postCallback(response);

       });

}

On response I am calling as3 postCallback method to let flash know if post was published or not.
That’s it! Have fun!

Friends Invitation – Facebook Flash AS3 & JS Application, Part3

In the last part I showed you how to send a post on the wall. Today I would like to introduce you another very important method in Facebook API – how to invite friends.

There are very few methods that without a good support of content are able to generate traffic and interest in your application. Invite friends is one of those for sure.

As soon as you click invite friends button one of Javascript functions is triggered. Let’s take a closer looke at that:

?

function inviteFriends(arg) {

     FB.ui({

          method : 'apprequests',

          title : arg.title,

          message : arg.message,

          filters : arg.filters,

          exclude_ids : arg.exclude_ids,

          max_recipients : arg.max_recipients

     },

     function(response) {

          var fla = document.getElementById('Main');

          if (response && response.to) {

               console.log('User invited at least 1 friend.');

               console.log(response);

          } else {

               console.log('User canceled invitation.');

               console.log(response);

          }

     fla.invitationCallback(response);

     });

 }

The first part is a request to Facebook and as soon as it run the pop up shows up. As you can see I am passing some important arguments in here:

title - the title for the Dialog (optional). Max length is 50 characters.
message - the Request string the receiving user will see. It appears as a request posed by the sending user. The max length is 60 characters. The message value is displayed in Notifications.
filters - (optional) default is ”, which shows a Multi Friend Selector that includes the ability for a user to browse all friends, but also filter to friends using the application and friends not using the application. Can also be all, app_users and app_non_users. This controls what set of friends the user sees if a Multi Friend Selector is shown.
exclude_ids - array of user IDs that will be excluded from the Dialog
max_recipients - an integer that specifies the maximum number of friends that can be chosen by the user in the friend selector.

The second part is responsible for the callback, as soon as you send an invitation to friends or give up activities, we get the information here and pass it back to AS3.

Cool, let’s move to Flash now. Compared to previous versions of files I introduced a few changes. First, in FacebookService class i have implemented new method inviteFriends. Nothing special, just running discussed earlier Javascript function and passing all needed arguments. I’ve also added few new items in UI. We have a invite buton, filters combo box and numeric stepper to setmax_recipients value. I’ve also created InviteFriendsVO which holds all arguments I want to pass to my invitation request.

In general, everything is quite clear. I would like to focus on one special thing. If I use a filter combo box, why use an additional exclude_ids? Imagine the situation that your application is a contest where you can win prizes. You can play only once a day and receive extra chance in the return of inviting at least 5 friends to the game. Good idea to increase the number of players and stimulate traffcu, right? But we have a problem here. Filters will not be helpful because it operate sonly when the user is already a member of the application, when accepted the invitation. Therefore, the potential player can invite the same people (as long as they do not accept the invitation) in exchange for another chance and spamming innocent beings. Here comes the power of exclude_ids. This requires from us a bit more work, but it’s definetely worth that. In the sample application I am using the SharedObject array to store the users ids to which the invitation was sent. I receive that list from javascript callback and immediately save them to a SharedObject. The next time you call the function I am taking those saved ids and pass them as exclude_ids parameter. Pretty clever. Of course in a real world app you probably will not use SharedObject but some server side technology to keep that data as safe as possible.