Saturday, August 25, 2012

Get Profile Image from Facebook

In this post we will learn on how to get your the profile image from facebook.

You may also refer the tutorial 1 and tutorial 2 of the facebook series.

Note: In order to for this tutorial to work you should have the FBGraph API and JSON API in your project folder.

Step 1: Create an empty application with an image view and a UIButton which would look something like this

On the hit of the button we will call the facebook graph api and will get the users profile image from facebook.

Step 2: Create the function that will be called on the button and associate it with its touch up inside event

- (IBAction)displayFBGraphPopup:(id)sender
    objFBGraph = [[FbGraph alloc]initWithFbClientID:FbClientID];
    //mark some permissions for your access token so that it knows what permissions it has
    [objFBGraph authenticateUserWithCallbackObject:self andSelector:@selector(FBGraphResponse) andExtendedPermissions:@"user_photos,user_videos,publish_stream,offline_access,user_checkins,friends_checkins,publish_checkins,email"];

Also do remember to add the FBGraphResponse method which will provide you all the necessary detail of your account

- (void)FBGraphResponse
        if (objFBGraph.accessToken
            SBJSON *jsonparser = [[SBJSON alloc]init];
            FbGraphResponse *fb_graph_response = [objFBGraph doGraphGet:@"me" withGetVars:nil];
            NSString *resultString = [NSString stringWithString:fb_graph_response.htmlResponse];
            NSDictionary *dict =  [jsonparser objectWithString:resultString];
            self.userID = [NSString stringWithFormat:@"%@",[dict valueForKey:@"id"]];
            [self performSelectorOnMainThread:@selector(getProfilePic) withObject:nil waitUntilDone:NO];
    @catch (NSException *exception) {
        UIAlertView *objALert = [[UIAlertView alloc]initWithTitle:@"Alert" message:[NSString stringWithFormat:@"Something bad happened due to %@",[exception reason]] delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
        [objALert show];

Step 3: In the FBGraphResponse their is one method named getProfilePic which i am calling on the main thread and where all the code to get the profile image of the user is written.

- (void)getProfilePic
    NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:@"", self.userID]];

    NSData *tempData =  [NSURLConnection sendSynchronousRequest:[NSURLRequest requestWithURL:url] returningResponse:nil error:nil];
    UIImage *FBimage = [UIImage imageWithData:tempData];
    self.imgvprofileImage.image = FBimage;

Code Explanation: To get the profile image of the user their is one URL provided by the facebook where if you enter the user id then you can get the profile image.

Step 4: You can even get your friends profile image just like this i.e get all your friends by using the keyword "me.friends" and then select any one friend from the list and supply his facebook id in the above picture URL that's all

Step 5: Add view controller view to the iPhone window by selecting the app delegate file. Run the application and press the GetFBProfilePic button enter your credentials and wait for sometimes after that you can see your profile image just like the below image.

I hope this tutorial has helped you out in getting the profile image from facebook and in case if you have any sort of queries then feel free to ask them via mail or via comment

You can download the source code from here

Join us on facebook iPhone by radix Facebook group.

Happy iCoding and have a great day

1 comment: