Facebook – Load profile image from Facebook with Actionscript 3

actionscript-3facebook

I'm trying to load profile images (friend images) from Facebook with AS3 but I seem to be running into a security issue.

I'm currently using the "official" Adobe Facebook API for Actionscript 3 which works fine. However, I seem to be having trouble loading profile images when running my application in a browser. The images load fine when running in the Flash IDE.

The images are being loaded from https://graph.facebook.com and there seems to be a crossdomain.xml policy on that domain:

<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"> 
<cross-domain-policy> 
  <allow-access-from domain="*" secure="false" /> 
 <site-control permitted-cross-domain-policies="master-only" /> 
</cross-domain-policy>

In other sources I found that adding a ContextLoader to my Loader object when loading the image should solve the problem but this doesn't seem to be the case either:

loader = new Loader();
// add some listeners here...
loader.load( new URLRequest( "imageurl" ), new LoaderContext(true) );

I'm not quite sure how to proceed at the moment. I was hoping that the Adobe Facebook API would provide assistance in this but I can't seem to find anything that solves this issue.

Any help greatly appreciated.

UPDATE:

I just noticed that when I visit one of the images in a browser that I'm actually redirected to Facebook's CDN where the actual image is stored. When I hard-code the image url with the redirected URL I can load the image in the browser. It seems that this is not a security issue after all but a redirection issue.

If this is a redirection issue then the question would become; How can I have Flash Player load an image from a redirected URL?

UPDATE 2:

It seems that the URLRequest class has a followRedirects property which is only available in AIR.

UPDATE 3:

I'm currently using a PHP script to get me the redirected URL as a work around but this of course is far from ideal and potentially a big strain on my server.

Best Answer

I had the same problem and it looks like you have to manually load the crossdomain file of the domain you are redirected to in actionscript. For now, it looks like all facebook profile images are finally loaded from the domain http://profile.ak.fbcdn.net/.

I just added this line before loading the images:

Security.loadPolicyFile("http://profile.ak.fbcdn.net/crossdomain.xml");

This should allow for loading the redirected images, as long as the redirect domain does not change. ;)

Related Solutions

Facebook Post Link Image

The easiest way is just a link tag:

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

But there are some other things you can add to your site to make it more Social media friendly:

Open Graph Tags

Open Graph tags are tags that you add to the <head> of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.

An Open Graph tag looks like this:

<meta property="og:tag name" content="tag value"/>

If you use Open Graph tags, the following six are required:

og:title - The title of the entity.
og:type - The type of entity. You must select a type from the list of Open Graph types.
og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
og:site_name - A human-readable name for your site, e.g., "IMDb".
fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.

More information on Open Graph tags and details on Administering your page can be found on the Open Graph protocol documentation.

http://developers.facebook.com/docs/reference/plugins/like

ActionScript 3.0: load an image programmatically

This example loads one image and uses buttons to change it:

// create a Loader object to hold things that you will load
var myLoader:Loader = new Loader();

// position the Loader
myLoader.x = 250;
myLoader.y = 0;

// put something into the Loader 
myLoader.load(new URLRequest("tree.jpg"));

// make the Loader visible
addChild(myLoader);

// button listeners
top_btn.addEventListener(MouseEvent.CLICK, loadPhoto);
last_btn.addEventListener(MouseEvent.CLICK, unloadAny);

// button functions
function loadPhoto(e:MouseEvent):void {
    myLoader.load(new URLRequest("sailboat.jpg"));
    addChild(myLoader);
}
// this function empties the Loader object 
function unloadAny(e:MouseEvent):void {
    removeChild(myLoader);
}

Best Answer

Related Solutions

Facebook Post Link Image

ActionScript 3.0: load an image programmatically

Related Topic