Loading a persons profile image from a open graph call is one of the first examples a developer tends to play with while learning Facebook’s API. You don’t generally need any permissions, and the only piece of data you really need is a particular persons Facebook ID. However when developing applications utilizing this data, there can be a few hang up’s – especially if you are working in Flash.
Over a series of projects I worked on at Context Optional, I found that I kept making a custom class for each project that would handle this image loading. So recently I finally sat down and made a nice clean reusable class that was easy to implement, and take care of many of the pitfalls of loading these images.
Issues solved
1. The Facebook default blue and white silhouette image is not available to use in any application not hosted on Facebook’s servers
Facebook serves this default image from a static asset server that does not have a crossdomain file which allows off Facebook use. Regular Facebook profile images are hosted on servers that have the crossdomain file in place making them available to any flash application. The problem here is that if you are not catching this error, you are left with your application failing silently not loading anything at all.
2. Depending on Facebook’s status, or the server the particular profile image is located on there can be some latency in retrieving the image.
There is nothing quite as awkward as watching an asset load without some kind of progress notification. If the image is loading slowly you will be faced with just a blank spot, then all of a sudden the image just appears *POP* on the screen which isn’t the best user experience. A loading graphic doesn’t have to be precisely informative, but should let the user know something is processing and that it doesn’t feel broken while they are waiting. With this class you can quickly pass the instance of a loading movie clip (still graphic or animation) to display while assets are loading.
3. The ability to update or remove the user in the event the user might be selecting someone else, or maybe a leader-board is updating.
Often times in a Facebook app you are dealing with lists of people for various reasons, and as these lists might update for any reason you should be able to clear a user out of this asset, and replace them with some other user. There is functionality built in to quickly clear a user and select a new one to put in it’s place.
Have a look at the zip file with included example usage:
http://folio.codyo.com/content/viewSource/facebook/FB_userIcon.zip
