CODEWITHSUNDEEP
facebookfacebook-iframefacebook-javascript-sdk
mmdanziger
mmdanziger

Reputation: 4648

FB.ui apprequest not working in page tab

I have a page tab app with an invite button (aka FB.ui -> apprequests), which when it's run from example.com/pagetab works fine (ie, it pops up a FB.ui friend selector windows etc.) But when I point my app's pagetab to there and load it as an iframe from within Facebook, nothing happens. At first I thought it was a problem with the button not being linked because of jquery not knowing which document was ready but I switched to using onclick and even typing in the command from the Chrome console (in the iframe's scope, of course) but nothing happens... Is this a bug or am I missing something?

Minimal code:

window.fbAsyncInit = function() {
  FB.init({
    appId      : '123456789', // App ID
    channelUrl : '//fbjscache.php', // Channel File
    status     : true, // check login status
    cookie     : true, // enable cookies to allow the server to access the session
    xfbml      : true  // parse XFBML
  });  };
 (function(d){
   var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement('script'); js.id = id; js.async = true;
   js.src = "//connect.facebook.net/en_US/all.js";
   ref.parentNode.insertBefore(js, ref);
}(document));
function sendInvite() {
  console.log("Inviting...");
  FB.ui({method: 'apprequests',
   title: 'Check out this great app!',
   message: 'Join the fun!',
  }, inviteCallback);
}

Then on the page 

<a href="javascript:void(null)" class="invite" onclick="sendInvite()"><div class="facebookButton">Invite</div></a>

This code works exactly as expected (pops up the cute friend selector dialog) when the page is loaded directly and does nothing when loaded from an iframe. Is this a bug or is there some hidden setting/JS quirk that I'm not catching on to?

Upvotes: 0

Views: 3958

Answers (1)

mmdanziger
mmdanziger

Reputation: 4648

After discovering a related question, ( Send dialog doesn't work in page tab ) I realized that the problem is that you need to manually include the parameter display : 'popup' in the options, so the working code requires:

function sendInvite() {
    FB.ui({method: 'apprequests',
        title: 'Check out this great app!',
        message: 'Join the fun!',
        display: 'popup'
    }, inviteCallback);
}

This behavior is expressly against what the docs say is supposed to happen:

Platform Dialogs are all built to seamlessly run in a variety of display contexts on both the web and mobile web. If you're invoking a Dialog using the JS, iOS or Android SDKs, the display mode will be automatically chosen for you based on the platform and the device being used by the user.

Unless the automatic choice is "no display, with no warning or error message" for the arcane combination of "page tab" and "desktop browser."

For the record, proper canvas apps do not have this limitation. I used line-for-line the same code in a full app and everything worked fine.

Upvotes: 5

Related Questions