Facebook Tutorial for iOS: How To Get a User Profile with Facebook’s New Graph API from your iPhone App
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.)
So let’s get some data with Facebook’s Graph API!
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!
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:
- Download the latest version of ASIHTTPRequest.
- Back in FBFun, right click FBFun under “Groups & Files”, click “Add\New Group”, and name the group “ASIHTTPRequest”.
- 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”.
- Repeat the above for the 2 files in “pokeb-asi-http-request-xxx\External\Reachability”.
- Right click the Frameworks folder, and click “Add\Exisitng Frameworks…”. Choose CFNetwork from the list, and click Add.
- Repeat the above for SystemConfiguration.framework, MobileCoreServices.framework, CoreGraphics.framework and libz.1.2.3.dylib (at the bottom of the list).
- 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:
- Download the latest version of the Open Source Objective-C JSON framework developed by Stig Brautaset.
- Back in FBFun, right click FBFun under “Groups & Files”, and click “Add\New Group” and name the group “JSON”.
- 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”.
- Compile your project. If it works, you’re integrated!