2 - Personalize

This tutorial outlines how to personalize your app experience with the Facebook SDK for iOS by displaying the user's profile picture and name when they've authenticated.

This tutorial introduces you to the Facebook SDK FBRequest object. Use this object to construct requests that make Facebook API calls. If you're making requests that require a user to be authenticated, you'll need to ensure that the activeSession on FBSession has been opened, or else provide an explicit FBSession instance to the FBRequest calls.

We'll walk through making an API call to get the user's basic information to add a personalization touch to your app. The Facebook SDK provides a static FBRequest class method called requestForMeWithSession that returns an FBRequest object that you can use to make an API call to return user data. The user data will be a strongly typed FBGraphUser object that represents a Facebook user.

Once you've constructed an FBRequest object, you can initiate the API call by invoking the startWithCompletionHandler: method. The method requires you to pass in a block callback handler of type FBRequestHandler, that will be called when the request is successful, canceled or produces an error. The request callback handler will be invoked with any result and any error data from the request.

Use the FBProfilePictureView Facebook SDK view to display the user's profile picture once the user API request returns successfully. This specialized view takes in properties that represent the user's ID and a desired picture size to format the display.

This tutorial walks through the following:

• Step 1: Set Up the User Interface
• Step 2: Get and Display the User's Information
• Next Steps
• Related Samples

Note: Before you start personalizing your app, make sure you've set up authentication.

---

Step 1: Set Up the User Interface

Add the personal information to the SCViewController that displays when the user logs in. Make these changes in SCViewController.xib:

• View: In the File Inspector settings, turn off ''Use Autolayout''.
• View: Change the main view's background color to FFFFFF.
• Profile Image: Add a View object with the following properties: X, Y (offset): 20, 17; Width, Height (size): 75, 75; Autosizing: flexible right margin, flexible bottom margin; Class: FBProfilePictureView
• User's Name: Add a Label object with the following properties: X, Y (offset): 104, 17; Width, Height (size): 210, 21; Text: none

When you're done, your UI in Interface Builder should look like this:

Next, wire up the profile image view and the user name label to the SCViewController implementation file:

• Create an outlet for the Profile Image View object called userProfileImage.
• Create an outlet for the Profile Image View object called userNameLabel.

---

Step 2: Get and Display the User's Information

To display the user's personal information, make a call to the requestForMeWithSession method of the FBRequest object. Define a new method to do this:

- (void)populateUserDetails 
{
    if (FBSession.activeSession.isOpen) {
        [[FBRequest requestForMe] startWithCompletionHandler:
         ^(FBRequestConnection *connection, 
           NSDictionary<FBGraphUser> *user, 
           NSError *error) {
             if (!error) {
                 self.userNameLabel.text = user.name;
                 self.userProfileImage.profileID = user.id;
             }
         }];      
    }
}

If the call is successful, you can set the user's name and show the user's profile picture by setting the user ID property on the FBProfilePictureView object.

Next, call the populateUserDetails method when you want to show the logged-in state by modifying the viewWillAppear: method.

-(void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];

    if (FBSession.activeSession.isOpen) {
        [self populateUserDetails];
    }
}

You want to make sure that the data displayed is updated any time the user logs in or out from Facebook. Use the NSNotificationCenter to get notified when the state of the active session changes.

Declare a string constant for the name of our new notification by adding the following to the top of the app delegate header file:

extern NSString *const SCSessionStateChangedNotification;

Next, in the app delegate implementation file, add the following at the top of the file:

NSString *const SCSessionStateChangedNotification = 
    @"com.facebook.Scrumptious:SCSessionStateChangedNotification";

Next, send the notification whenever the session state changes by adding the following to the sessionStateChanged:state:error: method, just before the line that reads if (error) {:

[[NSNotificationCenter defaultCenter] 
    postNotificationName:SCSessionStateChangedNotification 
                  object:session];

Switch to the SCViewController.m file to hook up a listener for the notification. Import the app delegate header so you can refer to the notification variables:

#import "SCAppDelegate.h"

Next, add the following at the bottom of the viewDidLoad method:

[[NSNotificationCenter defaultCenter] 
    addObserver:self 
       selector:@selector(sessionStateChanged:) 
           name:SCSessionStateChangedNotification
         object:nil];

Then add the following to viewDidUnload:

[[NSNotificationCenter defaultCenter] removeObserver:self];

Add a simple notification handler that just updates the UI any time the session state changes. Add the following method that was referenced above:

- (void)sessionStateChanged:(NSNotification*)notification {
    [self populateUserDetails];
}

If you run the project at this point, you may see an error like this:

2012-05-18 04:04:11.620 Scrumptious[6548:f803] Unknown class 
FBProfilePictureView in Interface Builder file.

To resolve this, add this as the first line in the app delegate's application:didFinishLaunchingWithOptions: method:

[FBProfilePictureView class];

Build and run the project to make sure it runs without errors. Once you're authenticated, you should see your profile picture and your name.

---

Next Steps

Learn how to show the user's friends in your app to make it a more social experience.

---

Related Samples

• MyProfileSample
• ProfilePictureSample