Add Facebook Like Button with Facebook Connect iPhone SDK

25 Jun
2010

Like buttons are everywhere, so this is supposed to be easy with the facebook-iphone-sdk. It is not. Liking is not a supported action from the SDK. Only via facebooks iframe.

I present you a clever workaround, that even uses the sdk to display a *conventional* facebook login in a way the user knows.

The flow is equal to other Facebook-Connect functions – at least for the user:

User presses like button
If cookie is there (user logged in already and marked “Keep me logged in” it is instantly liked. Done.
Else, the (known) Facebook Connect Login Dialog pops up. It looks a bit different (two headers) but most users won’t notice
User enters his login details
Dialog closes, like button reloads, displays like now in user language + friend faces that also like link
User can press like again to invoke it

So how to we get there? First, let’s overload FBDialog (we need to hack a little bit).

PSFBLoginDialog.m:

// overridden to check against our *own* URLs
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType {
NSURL* url = request.URL;
GTMLoggerInfo(@"url: %@", [url absoluteString]);

if (![[url absoluteString] containsString:@"login"]) {
[self dialogDidSucceed:url];
return NO;
}else {
return YES;
}
}

This checks whether login was successful and calls our registered delegate. Now, let’s add an area where the like button should be. In my case, I add it as a table footer view.

#define kWebPadding 10
UIView *paddingView = [[[UIView alloc] init] autorelease];
paddingView.backgroundColor = [UIColor whiteColor]; //RGBACOLOR(128,128,128,0.7);
paddingView.opaque = NO;
UIWebView *webView = [[[UIWebView alloc] initWithFrame:CGRectMake(kWebPadding, kWebPadding, self.view.width-kWebPadding, 60+2*kWebPadding)] autorelease];
[paddingView addSubview:webView];

NSString *likePage = @"http://google.com";
NSString *likeFacebookUrl = @"http://www.facebook.com/plugins/like.php?href=%@&layout=standard&show_faces=false&width=320&action=like&colorscheme=light&height=35";
likePage = feedItem.link;
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:[NSString stringWithFormat:likeFacebookUrl, likePage]]]];
webView.opaque = NO;
webView.backgroundColor = [UIColor clearColor];
webView.delegate = self;

paddingView.height = webView.height;
paddingView.width = webView.width;
self.tableView.tableFooterView = paddingView;

This is wrapped in a UIView to get a bit padding.
Next, we need to intercept the calls on the UIWebView, maybe opening the dialog if a login is needed.

///////////////////////////////////////////////////////////////////////////////////////////////////
#pragma mark -
#pragma mark UIWebViewDelegate

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
GTMLoggerInfo(@"starting request %@", request);

// if user has to log in, open a new (modal) window
if ([[[request URL] absoluteString] containsString:@"login.php"]) {

PSFBLoginDialog *dialog = [[[PSFBLoginDialog alloc] init] autorelease];
[dialog loadURL:[[request URL] absoluteString] method:@"GET" get:nil post:nil];
dialog.delegate = self;
[dialog show];
return NO;
}

return YES;
}

We’re almost done. We need to create the callback delegate for this operation to reload our WebView after a successful login:

///////////////////////////////////////////////////////////////////////////////////////////////////
#pragma mark -
#pragma mark Facebook Connect

- (void)dialogDidSucceed:(FBDialog*)dialog {
GTMLoggerInfo(@"succeded!");

// try to reload webview after dialog succeeded
if ([[[self.tableView.tableFooterView subviews] objectAtIndex:0] isKindOfClass:[UIWebView class]]) {
[(UIWebView *)[[self.tableView.tableFooterView subviews] objectAtIndex:0] reload];
}
}

Voila. A working Like Button!

This solution however has a downside, the user may has to enter his credentials two times if both the FBConnect Login AND the web-login are used.

In: Random Stuff

18 Responses to Add Facebook Like Button with Facebook Connect iPhone SDK

Honey

June 26th, 2010 at 10:12 am

Hi,
Thank you for your guidance.Can you post your code regarding the implementation of “Like” button along with this article?

studpete

June 27th, 2010 at 12:36 pm

everything is there – really. no more code needed!

Honey

June 28th, 2010 at 8:53 am

hi,
I didn’t find PSFBLoginDialog in facebook-iphone-sdk and having problem with containsString.is it a method or what?

Honey

June 28th, 2010 at 8:55 am

Please please send me this code at honey.y.sharma@gmail because i am also having certain problems with FBConnect also.

Manuel Gebele

July 6th, 2010 at 5:06 pm

Thanks for sharing your code!

Everything is working fine as far as the post goes. But do you know a way to align the Like-Button inside the WebView (without a TableView)?

Thanks,

Manuel Gebele

July 6th, 2010 at 8:14 pm

I’ve found a simple but tricky solution =)

You need to use iframe:

NSString *like = @”";

after that load HTML string to web view:

[webView loadHTMLString:like baseURL:nil];

and finally we need to replace the reload statement (- (void)dialogDidSucceed:(FBDialog*)dialog) of the web view with

NSString *test = @”";

[webView loadHTMLString:test baseURL:nil];

Thanks,

rockey

July 28th, 2010 at 1:14 pm

I am new for iPhone development, I want to use facebook like button in our iPhone app. please send me the code for the same.

Thanks in Advance.

Yasir Ali

August 12th, 2010 at 2:22 pm

Hi,

Please provide dome code for the same. I have implemented it into my project, but it dialog screen immediately disappear and

- (void)dialog:(FBDialog*)dialog didFailWithError:(NSError*)error

returns ths error…

Dialog error: Error Domain=NSURLErrorDomain Code=-999 UserInfo=0x3da1a40 “Operation could not be completed. (NSURLErrorDomain error -999.)”

Thanks Alot

Bokidovo

October 8th, 2010 at 4:51 pm

Hi, I’m having the same issue Yasir Ali is having. Does anyone know why this is caused?

Nicolas

December 30th, 2010 at 10:15 am

I don’t know why “like” button on UIWebView not working. It open the connect facebook dialog with empty content and continue unless I close dialog. I can’t make like. Anybody get this bug or know why it like this.? Give me some advices, I need to finish my project! Thanks!

Nicolas

December 30th, 2010 at 10:35 am

Do you know how to make Like button work when we click like on them? I have already used the UIWebView to display like button, but when click on it, if not connected Facebook, One connect facebook dialog open, and we enter usernama and pass, but it can’t connect facebook OK, it still stand at this untill i close dialog. And if application connected Facebook, one other connect facebook with empty content, we must close it to continue app. And no thing happen for like action. It’s still working OK with post article to facebook. But can’t do like. Can you know how to fix it?