【问题标题】:FB.ui feed dialog requires redirect_uri, dialog does not closeFB.ui 提要对话框需要redirect_uri,对话框不关闭
【发布时间】:2012-02-15 09:48:30
【问题描述】:

我正在尝试使用 JS SDK 的 FB.ui 方法打开一个提要对话框,并在用户分享后关闭它。我的问题是提要对话框需要一个redirect_uri,即使文档说它不需要定义,并且弹出窗口重定向到那里并且不会像回调函数所说的那样关闭。

这是我的代码,附加到提交点击事件:

    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();
        }
    );

如果我不使用 redirect_uri,弹出窗口会打开,但它只是说 FB 应用程序出错,请重试。

【问题讨论】:

    标签: javascript facebook sdk dialog fb.ui


    【解决方案1】:

    这似乎是 Facebook 的 JavaScript SDK 中的一个已知变化:http://developers.facebook.com/bugs/302946973066993

    使用 Facebook JavaScript API 时,除非在 params 对象中提供“redirect_uri”属性,否则调用 FB.ui 将失败 - 此行为是意外的,因为:

    1.) 文档指出,大多数 SDK [1] 将自动附加“redirect_uri” - 以前 JavaScript SDK 提供了一个关闭 Lightbox iFrame 的功能。 2.) 添加redirect_uri 参数会导致Facebook Lightbox iFrame 重定向,从而阻止用户关闭它。 3.) 以前不需要 redirect_uri 参数。

    这是我习惯并一直试图复制的行为。一位 FB 开发人员报告说这是“设计使然”。

    【讨论】:

    • 所以,你无法避免被重定向,真的吗?
    【解决方案2】:

    在花了一整天的时间解决这个问题后,我有一个非常好的解决方案,我想分享一下。我发现我可以通过手动打开我自己的弹出窗口到https://www.facebook.com/dialog/feed 来完全避免它,而不是使用带有 FB.ui() 的 SDK。以这种方式执行此操作时,redirect_uri 按预期工作,您只需重定向到关闭弹出窗口的 HTML 文件。无论用户单击共享还是取消,弹出窗口都会按预期关闭。

    我认为这段代码没有任何妥协,如果有的话,它比实际的 SDK 更容易使用。

    我的 Javascript 代码(可以保存为 FacebookFeedDialog.js)如下所示:

    /* 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');
    }
    

    这是一个使用上述 Javascript 代码的示例 HTML 文件:

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

    您的 closeWindow html 文件可能如下所示:

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

    【讨论】:

    • 我在这里提出了一个类似的解决方案:stackoverflow.com/questions/8497217/… 请注意,现在不鼓励提要对话框以支持共享对话框——我认为它会被弃用,但它没有说对话框页面上的那个了。我更喜欢 FD 而不是 SD,因为它有更多的自定义选项。
    【解决方案3】:

    嗯,我看到的文档说它是必需的,必须定义....

    redirect_uri

    用户单击对话框上的按钮后重定向到的 URL。 必需,但大多数 SDK 会自动指定。

    【讨论】:

    • 那我想知道为什么FB本身在FB.ui的代码示例和提要对话框中不使用redirect_uri。
    • 和我们一样,Facebook 的开发人员也是人。你知道有多少开发人员保持他们的文档 100% 保持最新;) 反问,因为我们都知道答案是 0.000001% 的开发人员这样做。
    • 似乎是开发人员的重大遗漏。无论如何,如果窗口在共享后关闭,我不介意保留 redirect_uri 的位置。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-20
    • 2012-09-02
    • 1970-01-01
    • 2011-08-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多