当 href 参数是变量时，Facebook 共享对话框不起作用

Posted 2023-03-05

【中文标题】当 href 参数是变量时，Facebook 共享对话框不起作用

【英文标题】：Facebook Share dialog doesn't work when href parameter is a variable

【发布时间】：2014-11-20 15:28:24

【问题描述】：

我正在尝试通过我的网络应用程序在 Facebook 上分享一个链接。我已经初始化了 SDK 等，下面的代码可以正常工作：

callToMyAPI()
    .then(function(response) 
        FB.ui(
            method: "share",
            href: "http://www.google.com",
        , function(response) 
            console.log(response);
        );
    );

这会弹出一个 Facebook 分享对话框，其中包含指向 http://www.google.com 的链接和一个小的嵌入式预览（底部的框显示来自 URL 的图像，以及页面的标题和描述/摘录）。当我点击对话框中的“发布到 Facebook”按钮，然后切换到 Facebook 时，我会看到带有共享链接的帖子。

但我需要使用从我的 API 返回的值动态设置 href 参数。所以我这样做了：

callToMyAPI()
    .then(function(response) 
        var url = response; // http://www.google.com

        FB.ui(
            method: "share",
            href: url,
        , function(response) 
            console.log(response);
        );
    );

基本上，我所做的只是将硬编码的"http://www.google.com" 替换为变量url（其值是响应，即http://www.google.com）。其他一切都完全相同。但是当我这样做时，会发生以下情况：

Facebook 分享对话框仍然打开，但它缺少我尝试分享的 URL 的嵌入式预览

当我单击“发布到 Facebook”按钮时，对话框关闭，但没有任何内容发布到 Facebook。记录的响应只是一个空数组 ([])

因此，使用来自我的 API 的响应作为 href 值令人窒息，但我不明白为什么。我该如何解决这个问题？

---

更新：经过反复试验，我发现了这种奇怪的行为......

如果我使用 http://dev.example.com 作为 href 值（其中 example.com 实际上是我的真实域），我不会在“共享”对话框中获得预览，也不会向 Facebook 发布任何内容：

FB.ui(
    method: "share",
    href: "http://dev.example.com"
);

但如果我使用http://www.example.com（注意www）作为href 值（同样，example.com 实际上是我的真实域），我仍然无法在“共享”对话框中获得预览，但是帖子确实通过了：

FB.ui(
    method: "share",
    href: "http://www.example.com"
);

但是，由于“共享”对话框中仍然没有预览，因此它实际上并未将链接附加到消息中。所以在 Facebook 上，我得到的只是一个帖子，上面有我写的任何评论，但没有指向 http://www.example.com 的嵌入式链接。

【问题讨论】：

你试过简单的href: response吗？

是的，我实际上是先这样做的，但没有区别。我只是使用了url 变量来更清楚地表明这是我的 API 的响应，而不是 Facebook 的响应。

写var url = 'http://www.google.com';有用吗？如果是，则可能是 response 变量是一个对象而不是字符串。

是的，但我的回复也是一个字符串。这个问题描述了一个类似的问题：***.com/questions/25440700/…

【参考方案1】：

我现在通过使用feed 方法代替share 方法解决了这个问题，如this answer 中所述：

callToMyAPI()
    .then(function(response)
        var url = response;

        FB.ui(
            method: "feed",
            link: url,
        , function(response) 
            console.log(response);
        );
    );

语法和share方法一模一样，只是参数名是link而不是href，效果很好。这证实了我的回复确实是一个字符串，所以我真的不明白为什么share 不能以同样的方式工作。

唯一的问题是，feed 方法是 deprecated，并将在 2015 年 4 月 30 日停止工作。所以我仍然想找到一种方法来使用较新的share 方法。

【参考方案2】：

真正的答案是三方面的：

我的http://dev.example.com 站点需要身份验证；我完全忘记了这一点，因为我保存了我的用户名/密码，所以它永远不会提示我

我的http://www.example.com 实际上是一个较长的 URL (http://www.example.com/test/12345)，它没有指向该服务器上的现有页面（它只存在于我的开发服务器上）。因此 Facebook 可以访问 URL（无需身份验证），但无法从中抓取任何内容，因此帖子会通过但没有嵌入预览

我分享的页面缺少各种 Open Graph 元标记（og:type 等）；显然href 是您可以通过 share 方法传入的唯一参数，而共享所需的其他所有参数都必须来自页面上的 OG 标签

所以我在页面中添加了缺少的 OG 标签（og:url 除外），在我的开发服务器上禁用了身份验证（暂时用于测试），现在终于可以通过附加正确的链接发布帖子了。

【参考方案3】：

我遇到了同样的问题，我通过在我必须分享的网址末尾添加一个随机 GET 参数来解决它。

例如：

var url = window.location;
url = url+"?randomParameter=randomValue"

FB.ui( method:'share', href: url , function(response));

【讨论】：

您的问题是 window.location 不是字符串。它是一个位置对象。它自动转换为字符串的次数最多，但 facebook 会验证您是否发送了字符串。当您连接另一个字符串时， url 被转换为字符串，并且没有更多问题。真正的解决方案是使用 window.location.href