Picking an image from your Facebook photos in iOS

by

Apple provides a convinient class, UIImagePickerController, that easily allows your app to display a user interface to pick an image from the photo library. There are countless apps out there that utilize this class. Since this class manages all the user interactions, end-users of the apps that use it will find consistency when picking an image from photo library. Facebook iOS app, WhatsApp text messenger, Messages and Tweetbot are just a few popular apps that leverage this class. It’d be great had Apple provided a similar class for picking a photo from a Facebook account. This is particularly helpful for apps such as WhatsApp. I use WhatsApp more than I do Messages for texting. It’s fun to be able to take a picture and send it to friends and family. But at times, I wanted to send a photo from my Facebook albums and I couldn’t do that directly from WhatsApp. This is when the Facebook photo picker would come in handy. I googled around and couldn’t find anything that was as simple to use as UIImagePickerController. There’s PhotoPicker+ but it requires creating a developer account on their site and getting an app key (what’s up with that?). Furthermore, its set of classes are far from being as simple as UIImagePickerController.

I decided to create a component that does exactly the same thing as UIImagePickerController but for picking a Facebook photo. I call it FacebookPhotoPickerController. If it takes the following 3 lines to pick an image from photo library:

UIImagePickerController *imagePickerController = [[UIImagePickerController alloc] init];
imagePickerController.delegate = self;
[self presentModalViewController:imagePickerController animated:YES]; 

it also takes as many, if not less, number of lines to pick from Facebook albums:

FacebookPhotoPickerController *fbPicker = [[FacebookPhotoPickerController alloc] initWithDelegate:self];
[self presentModalViewController:fbPicker animated:YES]; 

The delegate object has to implement FacebookPhotoPickerControllerDelegate protocol. If you look closely, this protocol is very similar to UIImagePickerControllerDelegate.

FacebookPhotoPickerController encapsulates the Facebook authentication process. It uses Facebook Connect SDK to perform in-app authentication. Once authenticated, the class will display a selection of the available Facebook photo albums. Tapping on an album will bring user to a thumbnail grid view of the album’s photos. This thumbnail view is a component from Three20 library. If the album contains a large number of photos, the view will not load all of them at once. Instead, it will only load a certain number at a time until user initiates to load for more. This article discusses how Three20 can handle this type of lazy loading.

To demonstrate how you can use this class, I’ve created a sample app called FacebookPhotoBrowser. When you run it, you’ll see two buttons: Facebook Photo and a camera icon. The camera icon is to pick image from your photo library.

Nbo58xwrxfyy

Tapping on Facebook Photo will bring up a UI to pick an image from your Facebook account:

1zbsjnmhywzk  Q5x02rkpcpms

Tapping on a thumbnail will initiate the download process of the fullsize image from Facebook and pass its UIImage object to the delegate object.

Lnje5iji9w35

You can download the sample app and the source code of FacebookPhotoPickerController here. Enjoy.

14 Comments

  1. Kamal Chandar on said:

    Source code cannot be downloaded. Can you provide the source code

  2. deep on said:

    I successfully integrated facebookImagePIcker in my app. But I have couple of issues:
    1) How to logout once logged in ?
    2) Not all the albums are displayed in the tableView.

    Any help would be greatly appreciated.

  3. Eric on said:

    Hello,
    I would like to use this on iPhone via MonoTouch.
    And surely I will mention your name because credits is all yours.
    Can you help me how to call / link?
    Any help appreciated.

  4. Mark on said:

    Hey, I’d like to make a note on my comment above. It appears that I did not implement the method

    facebookPhotoPickerControllerDidCancel

    and this was what was crashing on cancel. Still, any way to log out?

    Thanks,
    Mark

  5. Mark on said:

    Hey guys, great component. I’ve integrated it into my app, and it’s really awesome, but I’ve got a few questions:

    #1 – After a user has logged in, can they log out and log back in as a different user?

    #2 – When I press the ‘cancel’ button in the top right corner, my app is completely exited and the user is taken to the homescreen. Is this expected behavior?

    Thanks,
    Mark

  6. smartphone monitoring on said:

    I’m pleased with my statement cover photo, and I find the cover photo feature rather frustrating to work with. But it is rather frustrating that there it is difficult to resize photos in such a way that the whole picture can be seen and not just some blown up part of it.

  7. Greg Turner on said:

    Thanks santo,
    is there a way to get photo albums that are in the users fan pages? (not facebooks personal accounts)
    Greg

  8. Greg Turner on said:

    Hello,
    This looks like a very good project. I’d like to embed it in my application, and I will mention the author for gratitude.
    When downloading the source code and trying to compile it I get the errors: Missing dependency target Three20*.. What is the solution to this?
    Thanks, G

  9. Santo on said:

    Lukasz, feel free to include it in your project. If feel indebted, don’t hesitate to mention “Grio”… :>

  10. Lukasz on said:

    Hello,
    Thank you, it is a very usefull piece of code. But what about license? Can I use it in a commercial project?

  11. Santo on said:

    Thanks for pointing it out. There was a missing permission when requesting authorization from Facebook. Changes have been committed to github.

  12. Pat on said:

    Hello.
    I compiled the project and it runs ok. However i cannot see any album.
    What variables do I need to set or change?

Leave a Reply

Your email address will not be published. Required fields are marked