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

Question

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.

score 2 · Answer 1 · answered Feb 13 '15 at 17:59

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:

<SCRIPT>
window.close();
</SCRIPT>

I came up with a similar solution here: http://stackoverflow.com/questions/8497217/fb-ui-popup-window-doesnt-close/9025219#9025219 Note that the Feed Dialog is being discouraged now in favor of the Share Dialog--I thought it was to be deprecated but it doesn't say that on the dialog's page anymore. I prefer FD to SD since it has more customization options. — Jeremy Schultz, Feb 13 '15 at 19:05

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

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."

so, you just can't avoid being redirected, really? – finiteautomata Mar 01 '13 at 14:03 — finiteautomata, Mar 01 '13 at 14:03

score 0 · Answer 3 · answered Jan 20 '12 at 21:49

0

Hmmm, the docs I see says it is required and must be defined....

redirect_uri

The URL to redirect to after the user clicks a button on the dialog. Required, but automatically specified by most SDKs.

answered Jan 20 '12 at 21:49

DMCS

31,720
14
71
104

1

Then I wonder why FB itself does not use redirect_uri in its code samples of FB.ui and the feed dialog. – Jeremy Schultz Jan 20 '12 at 21:54
1

Like us, the developers at Facebook are human. How many developers do you know that keep their documentation 100% up to date ;) Rhetorical question, because we all know the answer is 0.000001% of developers do. – DMCS Jan 20 '12 at 21:55
1

Seems like a major omission by the devs. In any case, I don't mind keeping redirect_uri in place if the window closes after sharing. – Jeremy Schultz Jan 20 '12 at 21:59

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

3 Answers3

Linked