Facebook JavaScript SDK: FB.ui opens a popup window

Question

I am trying to show a 'Post to Your Wall' feed dialog with the following code in a facebook iframe app:

<div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/all.js">
  </script>
  <script>
     FB.init({ 
        appId:'249725835046216', cookie:true, 
        status:true, xfbml:true 
     });

     FB.ui({ method: 'feed', 
        message: 'Facebook for Websites is super-cool',
        name: 'Facebook Dialogs',
        link: 'http://developers.facebook.com/docs/reference/dialogs/',
        picture: 'http://fbrell.com/f8.jpg',
        caption: 'Reference Documentation',
        description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'



        });
  </script>

The problem is that it is appearing in a new popup window like this:

Instead of appearing as like this without appearing in a popup window:

I don't want the feed dialog to appear in a new popup windows because in most modern web browsers where popups are blocked. I don't know why this is happening. Please help.

Answer 1

I'm pretty sure that you get a popup if the user has not authorized your application. Facebook made it work that way for security reasons. If you prompt for authorization first, then you should get the inline dialog.

Note that the request for authorization will itself be a popup, but you only have to have that happen once. I have things working this way, the way you want, in the someecards Facebook app. Feel free to grab the javascript code, it's not specific to the app.

Answer 2

Try this, put FB.ui inside FB.getLoginStatus:

FB.getLoginStatus(function(response) {
  if (response.authResponse) {
    FB.ui({ 
      method: 'feed',
      ...
      display: 'dialog'       
    });  
  }
});