FB.login issue, need to show lightbox instead of pop-up, Javascript SDK, iFrame Application

Question

Hi, I am developing a facebook iFrame application which would be embedded inside a facebook page. I have chosen iFrame as FBML is deprecated by facebook.

My application is ready but I am facing a small problem

when FB.login is called, a popup window appears. My application requirement is that whenever its loaded, it should check whether user is authorized or not, if not then show a Dialog asking for extended permission/login

Problem: The Pop-up is in form of a new window which Safari blocks by default because window is open through javascript and not via click, I want it to appear as a lightbox/shadow which facebook typically shows for fbml applications

I read at http://developers.facebook.com/blog/post/312 that

Blockquote In order to make a more consistent and secure user experience when connecting accounts, we're changing the behavior of the dialog when a user connects accounts between your site and Facebook when the user is already logged in to Facebook. Previously, the Connect with Facebook dialog appeared in an IFrame "lightbox" within the browser window. After tomorrow's weekly code push, the dialog will pop up in a separate browser window, with an address bar, which matches the user login flow when the user is not logged in to Facebook and tries to connect accounts with your site. This will also make it easier for users to identify that the URL is trustworthy and coming from Facebook. Blockquote

But this new feature is clearly not helping me out.

Any workaround for this?

My code:

 <script src="http://connect.facebook.net/en_US/all.js"&gt;&lt;/script&gt;
    <script type="text/javascript">
        FB.init({ appId : '161077430577043', status : true, cookie : true, xfbml  : true });
        FB.getLoginStatus(function(response) {
            // alert("response: " + response.session);
            if (response.session) {
                // alert("response of getlogin status, permissions:  " + response.perms);
                login();
            }
            else{
                document.getElementById('loginStatus').innerHTML = "Login and Grant Permission";
                logMeIn();
            }
        });

        function logMeIn(){
            FB.login(function(response) {
                // alert("login!");
              if (response.session) {
                    // alert("Granted permissions: " + response.perms);
                    login();
                } else {
                    // alert("not logged in");
              }
            }, {perms:'read_stream,publish_stream,offline_access,friends_birthday,email'});
        }
        function login(){    
            FB.api('/me', function(response) {
                document.getElementById('login').innerHTML="Welcome " + response.name;
            });
            getFriendsData();
        }

        function getFriendsData(){
            //  fetches data from Graph API
        }

    </script>

Answer 1

I figured out how to solve this. Now I am using FBML prompt generated through PHP and signed_request for permissions.

I missed an important point that once you have permissions granted, they will be available irrespective of the sdk being used. i.e. get permission from fbml and use them with php