FB.ui feed dialog requires redirect_uri, dialog does not close

问题

I am trying to open a feed dialog using the JS SDK's FB.ui method and have it close after the user shares. My problem is the feed dialog is requiring a redirect_uri even though the documentation says it doesn't have to be defined, and the popup window redirects there and will not close like the callback function says.

Here's my code, attached to the submit click event:

    FB.ui (
        {
            method: 'feed',
            name: 'xxx!',
            link: 'link to FB tab',
            picture: 'jpg',
            caption: 'xxx',
            actions: {name:'xxx',link:'url'},
            ref: 'xxx',
            redirect_uri: 'link to FB tab'
        },
        function(response) {
            self.close();
        }
    );

If I leave off the redirect_uri, the popup opens but it just says the FB app has an error and please try again.

回答1:

It appears this is a known change in Facebook's JavaScript SDK: http://developers.facebook.com/bugs/302946973066993

When using the Facebook JavaScript API, invoking FB.ui will fail unless a 'redirect_uri' property is supplied in the params object - this behavior is unexpected because:

1.) The documentation states that the 'redirect_uri' will be automatically appended by most SDKs [1] - previously the JavaScript SDK was providing one which closed the Lightbox iFrame. 2.) Adding a redirect_uri param results in the Facebook Lightbox iFrame redirecting which stops the user from being able to close it. 3.) The redirect_uri param was not required previously.

This is the behavior I'm used to and have been trying to duplicate. A FB dev reports that this is now "by design."

回答2:

After spending a whole day working on this problem, I have a very good solution that I'd like to share. Instead of using the SDK with FB.ui(), I have discovered that I can avoid it entirely by manually opening my own popup to https://www.facebook.com/dialog/feed. When doing it this way, redirect_uri works as expected, and you can just redirect to an HTML file that closes the popup window. Whether the user clicks on share or cancel, the popup will close as expected.

I don't believe there are any compromises with this code, and if anything, it is much easier to use than the actual SDK.

My Javascript code (which you can save as FacebookFeedDialog.js) looks like this:

/* by Steven Yang, Feb 2015, originally for www.mathscore.com.  This code is free for anybody to use as long as you include this comment.  */
function FacebookFeedDialog(appID, linkTarget, redirectTarget) {
  this.mParams = {
    app_id: appID,
    link: linkTarget,
    redirect_uri: redirectTarget,
    display: "popup"
  }
};

/* Common params include:
   name - the title that appears in bold font
   description - the text that appears below the title
   picture - complete URL path to the image on the left of the dialog
   caption - replaces the link text
*/
FacebookFeedDialog.prototype.addParam = function(key, value) {
  this.mParams[key] = value;
};

FacebookFeedDialog.prototype.open = function() {

  var url = 'https://www.facebook.com/dialog/feed?' + encodeCGIArgs(this.mParams);
  popup(url, 'feedDialog', 700, 400);
};

/* Takes a param object like this:
   { arg1: "value1", arg2: "value2" }
   and converts into CGI args like this:
   arg1=value1&arg2=value2

   The values and args will be properly URI encoded
*/
function encodeCGIArgs(paramObject) {

  var result = '';

  for (var key in paramObject) {
    if (result)
      result += '&';
    result += encodeURIComponent(key) + '=' + encodeURIComponent(paramObject[key]);
  }

  return result;
}

function popup(mylink,windowname,width,height) {
  if (!window.focus) return;
  var href;
  if (typeof(mylink) == 'string')
    href=mylink;
  else
    href=mylink.href;
  if (!windowname)
    windowname='mywindow';
  if (!width)
    width=600;
  if (!height)
    height=350;
  window.open(href, windowname, 'resizable=yes,width='+width+',height='+height+',scrollbars=yes');
}

Here's a sample HTML file that uses the Javascript code above:

<HTML>
<BODY>
<SCRIPT type="text/javascript" src="FacebookFeedDialog.js"></SCRIPT>
<SCRIPT>
var dialog = new FacebookFeedDialog(yourAppIDGoesHere,yourDestinationURLGoesHere,yourCloseWindowURLGoesHere);
dialog.addParam('name','This is my title');
dialog.addParam('description','This is the description');
dialog.addParam('picture',yourImageURLGoesHere);
dialog.addParam('caption','This is the caption');
</SCRIPT>

<A href="javascript:dialog.open()">Open facebook dialog</A>
</BODY>
</HTML>

Your closeWindow html file can look like this: