Facebook Tutorial for iOS: How To Get a User Profile with Facebook’s New Graph API from your iPhone App

Is She Hot or Not??

Is She Hot or Not??

This article is the second part of a three-part series about how to use Facebooks’s new Graph API in your iPhone app.

In the first part of the series, we covered how to authenticate the user using the Graph API.

In this second article, we’ll cover how to get basic information from the user’s Facebook profile – and we’ll have a little fun along the way! (Jump to Part 3 of the series.)

We’ll also cover how to use JSON framework to parse the response, and ASIHTTPRequest to send the requests.

So let’s get some data with Facebook’s Graph API!

Getting Started

If you haven’t already, grab a copy of the sample project that we developed in the first part of the series, which we will use as our starting point.

Last time we wrote an app that authenticated our user and got an access token. But all we did was print it out!

Obviously that is not very fun. And since after all as iPhone devs most of us are in the business of fun – let’s do something about that!

And what could be more fun than rating hot babes?! (or dudes, if you’re into that kind of thing!)

Hot or Not?

Let’s begin by modifying FBFunViewController.h to add a few more variables that we’ll need for our Hot or Not UI:

// Inside class declaration
UITextView *_textView;
UIImageView *_imageView;
UISegmentedControl *_segControl;
UIWebView *_webView;
NSString *_accessToken;

// Afterwards
@property (retain) IBOutlet UITextView *textView;
@property (retain) IBOutlet UIImageView *imageView;
@property (retain) IBOutlet UISegmentedControl *segControl;
@property (retain) IBOutlet UIWebView *webView;
@property (copy) NSString *accessToken;

- (IBAction)rateTapped:(id)sender;

Now open up FBFunViewController.xib so we can set up our Hot or Not UI. We need a place for a message, a picture to rate, a hot or not button, and a rate button. We also want an area down at the bottom where users can like our fan page on Facebook if they like this app.

So drag a UITextView, UIImageView, UISegmentedControl, UIButton, and UIWebView over to the view and arrange them like the image below:

Once you’ve laid it out, do the following as well:

• Click on the UITextView and uncheck the Editable checkbox.
• Control-drag from “File’s Owner” to the UITextView, UIImageView, UISegmentedControl, and UIWebView, and connect each of them to the appropriate outlets.
• Control-drag from the “Rate!” UIButton back to the “File’s Owner” and connect it to the “rateTapped:” outlet.
• Save the XIB, and now let’s dive into code!

Or actually, let’s not. First we have to take a slight detour and talk a bit more about how the Facebook Graph API works.

Facebook Graph API Overview

The Facebook Graph API is pretty simple. Basically, to get all kinds of information, all you need to do is navigate to a particular URL. For example, you could see my profile information by visiting https://graph.facebook.com/ray.wenderlich.

Note the data comes back in JSON format. Well, after the recent Google Translate and JSON tutorial, this is no problem for us!

There are tons of objects you can access via different URLs, including users, pages, status messages, photos, and more. Far too many to list here, so if you’re interested in a list, take a quick look at the Graph API Introduction on Facebook’s official page.

Note that to access most of these, you need to pass in an access token like we got in the previous Facebook tutorial so Facebook can authenticate you’re allowed to see it.

NSURLRequest and NSURLConnection to the Rescue?

From an iPhone development perspective, our first thought might be to use the NSURLRequest and NSURLConnection classes to simply fire off a request to the above APIs and get a response. This would definitely work – but there’s an even easier way.

You see, one of the beauties of the Graph API is that not only can you GET data from Facebook – you can also POST data to Facebook! So you can post an update to a user’s wall, like a post, attend an event, or much more.

You can do POSTs with NRURLRequest / NSURLConnection, but it gets a bit hairy when dealing with multipart MIME data, which we’ll need when we’re doing things like uploading photos.

So rather than implementing this ourselves by hand, we’ll use a great library made just for this purpose: ASIHTTPRequest!

Integrating ASIHTTPRequest

ASIHTTPRequest is a powerful open source library written by Ben Copsey from All-Seeing Interactive (and he’s a fellow cocos2d developer too!) It makes it easy to post data and files, and has tons of other great features too like cache support, easy access to HTTP headers, cookie support, and much more.

So let’s add ASIHTTPRequest to our project. Take the following steps:

1. Download the latest version of ASIHTTPRequest.
2. Back in FBFun, right click FBFun under “Groups & Files”, click “Add\New Group”, and name the group “ASIHTTPRequest”.
3. Drag all of the files from the “pokeb-asi-http-request-xxx\Classes” to your new group. Make sure “Copy items into destination group’s folder (if needed)” is checked, and click “Add”.
4. Repeat the above for the 2 files in “pokeb-asi-http-request-xxx\External\Reachability”.
5. Right click the Frameworks folder, and click “Add\Exisitng Frameworks…”. Choose CFNetwork from the list, and click Add.
6. Repeat the above for SystemConfiguration.framework, MobileCoreServices.framework, CoreGraphics.framework and libz.1.2.3.dylib (at the bottom of the list).
7. Compile your project. If it works, you’re integrated!

We’ll explain about how ASIHTTPRequest works when we start to use it. But first, let’s integrate the JSON Framework while we’re at it.

Integrating JSON Framework

I already covered a lot of info about the JSON framework back in the Google Translate and JSON tutorial, so I’m not going to talk about how it works again here. However, here are the notes about how to integrate it into the project for handy reference:

1. Download the latest version of the Open Source Objective-C JSON framework developed by Stig Brautaset.
2. Back in FBFun, right click FBFun under “Groups & Files”, and click “Add\New Group” and name the group “JSON”.
3. Then open the disk image of the JSON framework that you downloaded, open the JSON folder inside, and drag all of the files in that folder to the new “JSON” group you created in XCode. When the dialog pops up, verify that “Copy items into destination group’s folder (if needed)” is checked, and click “Add”.
4. Compile your project. If it works, you’re integrated!