ActionScript
Using Facebook Graph API In Flash AS3 To Upload Image And Post To Photo Album
May 3, 2011
9
Share this:Share on FacebookTweet about this on TwitterShare on TumblrPin on PinterestShare on Google+

UPDATE:

This guide is not functional at this time due to changes to OAUTH 2.0 on the Facebook.com. See: http://developers.facebook.com/docs/reference/javascript/FB.getAuthResponse/. I might revise it in the future, but right now I’m disgusted by of all these Facebook API changes.

###########################################

Here’s an example of a Flash SWF that allows you to browse images (and swfs) from your computer, then post the uploaded images into your Facebook Photo Album using facebook-actionscript-api to http://code.google.com/p/facebook-actionscript-api/.

First, click the Login To Facebook button if you are not already logged in.

Then, an Upload Image button will appear. Click it and upload something.

Once the image is uploaded, another button labelled Save To Photo Album will appear. Click it to upload to your Facebook Photo Album.

Here’s a brief overview of how the code works, along with links to more detailed documentations and the link to the source FLA.
To post to your photo album, you can just use:

Facebook.api('me/photos', callback, params);

where the parameters contain an image field of a Bitmap object, a message string (which will appear as the caption of the photo in Facebook), and a fileName (this will not be displayed in Facebook and you can use generic name). Example:

	var params:Object = {image:myBitmap, message:'My Example Photo', fileName:'FILE_NAME'};
	Facebook.api('me/photos', callback, params);

This process of posting to the photo album is explained further in
http://www.permadi.com/blog/2011/02/using-facebook-graph-api-in-flash-as3-to-post-to-photo-album/
The process of browsing and uploading files is explained in:
http://www.permadi.com/blog/2010/06/flash-using-filereference-and-php-to-upload-files-to-server/ (note: you do not need the server component since you will only be uploading to Facebook). FileReference is used to allow user to browse and upload images. Note that FileReference requires Flash player 10.
Here’s the link to the example as stand alone page:
http://www.permadi.com/tutorial/as3-save-photo-to-facebook-album-upload/
The full source code of the FLA is here (requires Flash CS4 or newer): link.

Share this:Share on FacebookTweet about this on TwitterShare on TumblrPin on PinterestShare on Google+
Write your comment here ...

Leave a Reply

9 comments

  1. […] Using Facebook Graph API In Flash AS3 To Upload Image And Post To Photo Album (英語) (投稿者:Kano) Comments: […]

  2. very help full code ….. want to take a snapshot of the image uploaded and another one placed in front of it …
    and post the combined image

    1. Hi alex,
      Yup, you can combine the images in Flash before posting to Facebook.

  3. Hey there,

    I have a fan page with a custom tab that houses some flash in the canvas. I was wondering if you had any insight on how to post to the fan page feed. I feel like I have tried everything using your code as a basis and it always defaults to posting the image back to my wall.

    Thanks

    1. Check out: http://www.permadi.com/blog/2011/08/facebook-graph-api-posting-feed-to-app-page-as-page-revisited/. Haven’t tried that technique with Photo Album, but perhaps you can use the access_token to do it.

  4. Hi Permadi! Nice job!

    Why you use 1.5 and not the latest library 1.8.1?

    “Facebook.getSession()” doesn’t exists in 1.8.1. Whats the procedure here?

    1. 1.8.1 wasn’t out when that tutorial was written.

  5. i want to get 2 permission from users (publish_stream, user_photos) when i am trying this then its work but it ask twice facebook login popup :(
    please help me what i do

    Facebook.login(handleLogin, {scope:’publish_stream’});
    Facebook.login(handleLogin, {scope:’user_photos’});

    1. faixi,
      You should request the permissions in one call:
      Facebook.login(handleLogin, {scope:’publish_stream,user_photos’});