使用 localhost 测试 Facebook 共享对话框 - “无法在 URL http://localhost 解析对象”答案

【问题标题】：Testing Facebook Share Dialog with localhost - "Unable to resolve object at URL http://localhost"使用 localhost 测试 Facebook 共享对话框 - “无法在 URL http://localhost 解析对象”
【发布时间】：2019-05-09 22:54:49
【问题描述】：

我正在尝试仅使用 URL（而不是 SDK）来使用当前的（在提出这个问题的日期）Facebook 共享对话框。

我的 JS 看起来像这样：

openFacebookPopup : function (url) {
        this.openSharerWindow('https://www.facebook.com/dialog/share' + '?app_id=145634995501895' + '&display=popup' + '&href=http%3A%2F%2Flocalhost' + '&redirect_uri=http%3A%2F%2Flocalhost');
        return false;
}

我得到的错误是：

无法解析 URL http://localhost/ 处的对象。

这是什么意思，我该如何解决？我应该注意到，这个 JS 使用 facebook 的旧 'sharer.php' url 确实可以正常工作。

我的应用中添加了http://localhost。

【问题讨论】：

表示Facebook无法抓取你的网站
好的。 Facebook 无法抓取我的网站是什么意思？
Facebook 需要能够获取您要分享的页面才能获取有关它的信息
抱歉，我可能没有说清楚，但问题的重点是我希望能够在我的本地环境中测试 Facebook 分享对话框。
WizKid，您的回答对任何人都没有帮助。

标签： javascript facebook

【解决方案1】：

由于 FB 无法访问您的本地主机来提供弹出窗口，因此您必须自己提供。

首先，在您需要的每个页面上添加 Facebook 的 Javascript SDK：

  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.3'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

然后，将此函数绑定到您想要的任何触发器上，例如单击事件：

$('#fb-share-button').click(function() {
    FB.ui({
          method: 'feed',
          link: "The link you want to share", 
          picture: 'The picture url',
          name: "The name who will be displayed on the post",
          description: "The description who will be displayed"
        }, function(response){
            console.log(response);
        }
    );
});

我 console.log 响应但在这个块中你可以做你想做的事。例如，捕捉回复以查看帖子是否被很好地分享。

【讨论】：

【解决方案2】：

@WizKid 想说的是 Facebook 正在您的页面上寻找一些元标签（例如 <meta property="og:title" content="My awesome site" />，以便它可以构建您分享的内容......但没有找到它们。您当前share 可能在生产中有效，但在 localhost 上无效。您可以使用他们的 url 调试器测试以查看 facebook 正在寻找什么：https://developers.facebook.com/tools/debug/

旧的基于 URL 参数的共享适用于 localhost（如果您已将其添加为站点 URL 和应用程序域），因为 facebook 在该实例中所要做的就是解析您的共享字符串的查询参数。

【讨论】：

【解决方案3】：

要在 localhost 上测试 facebook 共享调试器，我们可以创建一个隧道。

按照以下步骤来源：facebook share debugger on localhost

【讨论】：