Facebook JavaScript SDK: FB.ui opens a popup windo

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

in my case the problem seems to have been solved by seting display to async

     display: 'async',

i think this is default for page tabs and canvas, but from time to time, instead of appearing within the main window it would load a new popup.. after setting it though (page tab in my case) i haven't noticed any pop up coming up since then..

Answer 2

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 3

I know this is a bit old, but I stumbled across this page when trying to solve this problem for myself and none of the answers here worked for me.

For the benefit of anyone else who has this problem, this was happening for me because I was trying to call the dialog on page load. Moving it to a user triggered event (such as a click) resolved it for me.

Answer 4

I have the same UI issue and I don't like the pop up window too.

I just found a link.

It helps us to redirect the page in same window. But it does not solve our problem perfectly.

Answer 5

There's a "URL Redirection" section in the docs for the Feed Dialog:

https://www.facebook.com/dialog/feed?
  app_id=145634995501895
  &display=popup&caption=An%20example%20caption 
  &link=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
  &redirect_uri=https://developers.facebook.com/tools/explorer

So you can do window.location=(this url) in Javascript, setting the redirect_url correctly, and this should work without a popup.

Note that the Feed Dialog is now deprecated in v2.0, so check out the Share Dialog instead:

To share a link:

https://www.facebook.com/dialog/share?
  app_id=145634995501895
  &display=popup
  &href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
  &redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

To share an Open Graph story:

https://www.facebook.com/dialog/share_open_graph?
  app_id=145634995501895
  &display=popup
  &action_type=og.likes
  &action_properties=%7B%22object%22%3A%22https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F%22%7D
  &redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

The 'display=popup' bit affects how the share screen looks, it doesn't open a new window. Possible values for display are:

async, iframe, page, popup, touch, wap

Answer 6

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

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