facebookpopupfacebook-javascript-sdkdom-eventspopup-blocker

Facebook application, dialogue to publish on user's wall, using Javascript API, pop-up blocked in browsers


I am using JS-API to generate a dialogue which asks for permission to publish the status message generated by my Application. Given below is the screenshot of what I am talking about:

THE POP-UP which gets blocked by browsers

Here is the code:

FB.ui(
   {
     method: 'feed',
     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.',
     message: 'Facebook Dialogs are easy!'
   },
   function(response) {
     if (response && response.post_id) {
       alert('Post was published.');
     } else {
       alert('Post was not published.');
     }
   }
 );

I use the sample JS code as told in the documentation and it works well if pop-ups are not blocked in the browser settings. but without status message being displayed there's no utility of the app!

Please help; I'm stuck at the last stage.


Solution

  • I don't see why it's bothering you. If the user is blocking FACEBOOK pop-up then it's his loss!

    Anyway, if you really need to handle all cases, then you can choose a different way. Have a read of the Feed Dialog.

    What you could do is when you are done from the previous step you redirect your page to the Facebook feed method so it'll open as a page:

    http://www.facebook.com/dialog/feed?
      app_id=123050457758183&
      link=http://developers.facebook.com/docs/reference/dialogs/&
      picture=http://fbrell.com/f8.jpg&
      name=Facebook%20Dialogs&
      caption=Reference%20Documentation&
      description=Dialogs%20provide%20a%20simple,%20consistent%20interface%20for%20applications%20to%20interact%20with%20users.&
      message=Facebook%20Dialogs%20are%20so%20easy!&
      redirect_uri=http://www.example.com/response
    

    The important part to change here is the app_id and redirect_uri, so your code would look like:

    ...
    previous code
    ...
    inside previous code success response
    ...
    var url = "http://www.facebook.com/dialog/feed?" +
                "app_id=" + YOUR_APP_ID + "&" +
                "link=http://developers.facebook.com/docs/reference/dialogs/&" +
                "picture=http://fbrell.com/f8.jpg&" +
                "name=Facebook%20Dialogs&" +
                "caption=Reference%20Documentation&" +
                "description=Dialogs%20provide%20a%20simple,%20consistent%20interface%20for%20applications%20to%20interact%20with%20users.&" +
                "message=Facebook%20Dialogs%20are%20so%20easy!&" +
                "redirect_uri=" + YOUR_REDIRECT_URI;
    top.location.href = url;