Update Facebook Status from Android Air Applications with Extended Permissions

Before I go into details about this exciting experiment with AS3 Facebook API and Android Air, I want to give credit to a few websites.

(The code that I used was from the first source, but used second source as a reference)

http://blog.flash-core.com/?p=233

http://blog.yoz.sk/2010/10/authorizing-facebook-applications-in-android/#more-2481

One of the coolest things about making games, is being able to post to social networks on how well you did. I’m in the middle of developing a Android Air/iOS application and since I’ve developed most of the functionality for the game, I wanted to implement this feature. After numerous hours of searching online and trying different workarounds, I finally made it work! For the purposes of testing, I used the Flash Web Application that I made for this experiment. One of the coolest things about making it work on the Android, you don’t need to change anything or create a new application in Facebook.

Below is snippets of the code that makes this feature work.

_view = new StageWebView();
_view.addEventListener(LocationChangeEvent.LOCATION_CHANGING, viewChangingHandler);
_view.addEventListener(LocationChangeEvent.LOCATION_CHANGE, viewChange);
_view.stage = stage;

_view.viewPort = _space;

var _sAppId:String = "";

var _sRedirectUri:String = "https://graph.facebook.com/oauth/authorize?client_id=_sAppId";

var _sScope:String = "publish_stream, create_event, rsvp_event, sms, offline_access, manage_pages, email, read_insights, read_stream, read_mailbox, ads_management, xmpp_login, user_about_me, user_activities, user_birthday, user_education_history, user_events, user_groups, user_hometown, user_interests, user_likes, user_location, user_notes, user_online_presence, user_photo_video_tags, user_photos, user_relationships, user_religion_politics, user_status, user_videos, user_website, user_work_history, email,publish_stream,offline_access,read_stream";

_view.loadURL("https://graph.facebook.com/oauth/authorize?client_id=_sAppId&scope=publish_stream, create_event, rsvp_event, sms, offline_access, manage_pages, email, read_insights, read_stream, read_mailbox, ads_management, xmpp_login, user_about_me, user_activities, user_birthday, user_education_history, user_events, user_groups, user_hometown, user_interests, user_likes, user_location, user_notes, user_online_presence, user_photo_video_tags, user_photos, user_relationships, user_religion_politics, user_status, user_videos, user_website, user_work_history, email,publish_stream,offline_access,read_stream&redirect_uri=http://www.griffinsdesigns.com/Facebook");

private function viewChangingHandler(event:LocationChangeEvent):void{
event.preventDefault();
_view.loadURL(event.location);

}

private function viewChange(event:LocationChangeEvent):void{
var _sRedirectUri:String = "https://graph.facebook.com/oauth/authorize?client_id=_sAppId";

var _sAccessToken:String;
if (_view.location.indexOf(_sRedirectUri) == 0 && _view.location.indexOf("access_token")!=-1){
_sAccessToken = "?"+_view.location.substring(_view.location.indexOf("access_token"), _view.location.indexOf("&expires_in"));
_view.stage = null;
}

}

Make sure you use loadURL, otherwise it will give you an error. The sources listed above, post, “load(new URLRequest( “. That does not work with the newest Air. If you look at my previous article about posting to Facebook, I mention a long URl that you want to redirect to, you want to use that URL as your URL that you will load.

What does this code do?

This code makes a web frame inside your Android Application and will show the Facebook Applicaton. If a new user goes to your application, the frame would show a login screen, like if they want to Facebook from a browser. After the user logs in, they would be sent to a page that lists the extended permissions (assuming you set the application to have extended permissons). Once the user clicks the allow button, they would be sent to the application.

I haven’t tested this on a Android Device. I only tested it by publishing it in Flash. The next thing I need to test is seeing if it would work when publishing it to a iOS application and test it on my iPad 2.

How to get extended permissions for Flash Facebook API!

This tutorial is going to teach you how to get the logged in user’s profile picture and post to their wall.

Thanks to Adobe’s Flex Examples, much of the code is used from their samples. I would also like to thank permadi.com for their tutorial on using the Facebook Graph API. I used their tutorial as a starting point, and used Adobe’s examples as references to take it to the next level.

For this tutorial, I only used the least amount of coded needed to do the 3 objections.

Here is the Facebook API that I’ve used:

http://code.google.com/p/facebook-actionscript-api/downloads/detail?name=GraphAPI%20Source_1_0.zip&can=2&q=label%3AFeatured

Facebook Samples from Adobe:

http://www.adobe.com/devnet/facebook/samples.html#6

Graphi API Reference:

http://developers.facebook.com/docs/reference/api/user

You will need to make these files to make it work. www.griffinsdesigns.com/FacebookSample.zip

Click image to view the app!

Here is a snippet of the code:

import com.facebook.graph.Facebook;
import com.facebook.graph.data.FacebookSession;
import com.facebook.graph.net.FacebookRequest;

Extended Permissions
In the index.php file, in the Javscript redirect() function, go the the top.location line of code. After &scope=, insert the extended permission that you want.

For example:
publish_stream, create_event, rsvp_event, sms, offline_access, manage_pages, email, read_insights, read_stream, read_mailbox, ads_management, xmpp_login, user_about_me, user_activities, user_birthday, user_education_history, user_events, user_groups, user_hometown, user_interests, user_likes, user_location, user_notes, user_online_presence, user_photo_video_tags, user_photos, user_relationships, user_religion_politics, user_status, user_videos, user_website, user_work_history, email,publish_stream,offline_access,read_stream

In your Flash app, instead of using Facebook.login(callbackhandler);
use:
ExternalInterface.call(“redirect”,”THE APPLICATION ID”, “user_birthday,read_stream,publish_stream”,”http://apps.facebook.com/THE CANVAS PAGE/”);

Here is the site that I found out about the ExternalInterface call.

http://www.adobe.com/newsletters/edge/november2010/articles/article6/index.html?trackingid=IBEPU

To get the user’s info
Facebook.api(‘/me/’, userInfo);

function userInfo(response:Object, fail:Object){
nameTextField.text = response.id;
}

To get the user’s profile picture, you need to do a load from a url similar to this:
https://graph.facebook.com/”+id+”/picture”.

Once the image is loaded, add it to the stage.

To post to the user’s wall, you need to use this function:
Facebook.api(‘/me/feed’, onMyInfoLoaded, values, ‘POST’);

Values is the message that you want to post.

I’m not affiliated with Facebook or Adobe.

How to get your Flash Applications on Facebook!

This posting will teach you how to get your Flash applications on Facebook.

1. The first thing you want to do is log in to facebook. Then you want to click the developers link on the bottom of the page. After that, click the ‘Apps on Facebook.com’ link on the left.

2. Go down to the ‘Getting Started’ headline and click, ‘register your Facebook application’.

3. Fill out the Application Name and click the ‘Agree’ radio button.

4. Fill out the Security Check.

5. At this point, you should be at the Application Settings page. Fill out the description of your application.

6. If you have a logo and a icon, click the links ‘Change your icon’/'Change your logo’.

7. Next, click the ‘Web Site’ link on the left of the page. Copy your Application ID and Application Secret to a text document for later use. Make sure to click the save changes button.

8. After you have copied the Application ID and Application Secret, fill out the site URL. This URL is the URL of were you have your website page stored on your hosting.

For example, when you are in Flash, and published out the application to a SWF and HTML. You take those files and put it on your server. The URL to those files is the URL you will put into the Site URL blank.
ex: www.mydomain.com/apps/

I used index.php as my page, so I don’t need to reference the page.

9. After that, fill out the Site Domain.  Then click the save changes button.
ex: mydomain.com

10. Then, click the Facebook Integration button the left. Go to the Canvas section. For the Canvas Page, fill out the blank. As you can see, you are making the URL for your application.

Ex: myGame

11. The next step is to fill out the Canvas URL. This is the same as the URL you filled out in the last section.
ex: www.mydomain.com/apps/

12. Select the ‘IFrame’ radio button.

13. Click the ‘Auto-resize’ radio button.

14. Under the Discovery section, make sure ‘Enabled’ radio button is selected. Then click the save changes button.

15. Then you should be at the My Applications page. Go to the bottom and click the ‘example code’ link. At the top, you’ll see

$ curl -L http://github.com/facebook/php-sdk/tarball/master | tar xvz
$ mv facebook-php-sdk-* facebook-php-sdk
$ cp facebook-php-sdk/examples/example.php index.php

Download: http://github.com/facebook/php-sdk/tarball/master
Extract the folder to your desktop. Rename the folder to: facebook-php-sdk.
Upload that folder to your server. Make sure to put it in the same folder that you uploaded the SWF and HTML files that you published from Flash.
The directory of the files that you just downloaded is similar to: www.mydomain.com/apps/facebook-php-sdk/.

16. Now you want to go into that html file that you published from Flash. Copy and paste this code right under the <body> tag. The text after the // can be changed to anything you want. Go the the 'appId' part in the code and put your application's appID that you copied to a text document. Do the same for the 'secret'. 

<?php
// Awesome My Application
//
// Name: Application
// 

require_once 'facebook-php-sdk/src/facebook.php';

// Create our Application instance.
$facebook = new Facebook(array(
 'appId'  => 'YOUR CODE',
 'secret' => 'YOUR CODE',
 'cookie' => true,
));

?>

If your Flash application is on a php page, do this next step, otherwise, skip this step. Go to the html page that you published from Flash and copy the code that starts with ‘<object classid’ all the way to to, ‘</object>’.

Above the ‘?>’ line of code, put this line of code.

echo ‘<CENTER>

Paste that code that you copied from the HTML page that Flash copied and paste it right after the <CENTER> tag. Right after the </object> tag, type:

</CENTER>’;

It would look similar to:

echo ‘<CENTER><object classid=”

</object></CENTER>’;

Save the page and upload it to your server and replace the previous file.

17. To view your application. You should still be at the My Applications page. Click the, ‘Application Profile Page’ link on the right. Then, click the ‘Go to Application’ button on the top left. You should see your Flash application.

My Flash Application on Facebook

Click the picture to test it for yourself!

I am not affiliated with Facebook.

Tweetr Air Application

One of the Air Applications that I’ve been working on is making a Twitter application using Tweetr. Later, I’ll post a working sample. Below is snippet of my source code to get you going.


import com.swfjunkie.tweetr.Tweetr;
import com.swfjunkie.tweetr.events.TweetEvent;
import flash.xml.XMLDocument;

var _twit:Tweetr;
var _xml:XML;

_twit = new Tweetr;
_twit.useAuthHeaders = true;
_twit.username = _userName;
_twit.password = _userPass;

_twit.getFriends();
_twit.addEventListener(TweetEvent.COMPLETE, friendHandler);

function friendHandler(event:TweetEvent):void {
_xml = new XML(event.data);
}


For more information and to download the library:

http://wiki.swfjunkie.com/tweetr