I am building an Facebook IFrame App. I am using the below javascript code to request user to login and allow permissions for the application, after which they are supposed to be redirected to the iframe app. The code works correctly. But, I have two issues with it.
a. as soon as the app loads in IFrame, it redirects to a page (http://www.facebook.com/connect/uiserver.php?app_id=…...) and displays a large facebook icon. When I click this icon it redirects to facebook login page. I want my app to redirect to the login page directly instead of showing the inbetween facebook icon page.
b. When the user clicks ‘Allow’ button for the requested permission in facebook, the page redirects to my main site (http://www.mysite.com) instead of the iframe application(http://apps.facebook.com/myapp).
I have pasted my javascript below, this works with above quirks.
var api_key = 'xxxxxxxxxxxxxxx';
var channel_path = 'xd_receiver.htm';
FB_RequireFeatures(["Api"], function () {
FB.Facebook.init(api_key, channel_path);
var api = FB.Facebook.apiClient;
// require user to login
api.requireLogin(function (exception) {
FB.Connect.showPermissionDialog("publish_stream");
});
});
Help much appreciated.
Thanks for your answers.
I used the solution posted by McKAMEY(Facebook API: FB.Connect.requireSession issues) with few changes, and it works as intended, without showing the intermediate facebook icon page, and also it redirects after authentication to the iframe app correctly.
I have posted below the working solution in case someone needs it.