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

Question

我正在尝试从我的网络应用程序中在 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)。其他一切都完全一样。但是当我这样做时，会发生以下情况:

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

2. 当我单击“发布到 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 的嵌入式链接。

Answer 1

真正的答案有三方面:

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

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

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

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