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

天大地大妈咪最大 提交于 2019-12-03 08:22:40

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

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>

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!