使用localhost测试Facebook Share对话框 - ＆＃34;无法解析URL http：// localhost＆＃34;

Question

我试图使用当前（在提出此问题的日期）Facebook Share Dialog仅使用URL（而非SDK）。

我的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;
}

我得到的错误是：

  

无法解析网址http://localhost/上的对象。

这意味着什么，我该如何解决它？ 我应该注意到这个JS使用旧的＆share;分享器没有问题。 facebook的网址。

我已将http://localhost添加到我的应用中。

Answer 1

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

首先，在您需要的每个页面上添加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响应，但在这个块中你可以做你想要的。例如，抓住响应以查看帖子是否已经很好地共享。

Answer 2

@WizKid试图说的是Facebook正在寻找页面上的一些元标记（例如<meta property="og:title" content="My awesome site" />，以便它可以构建您的共享的内容......但是找不到它们。您当前的共享可能适用于生产，但不适用于localhost。您可以使用其网址调试器测试Facebook查找的内容：https://developers.facebook.com/tools/debug/

旧的基于URL参数的共享与localhost一起使用（如果您已将其添加为站点URL和应用程序域），因为该实例中的所有facebook都必须解析您的共享字符串的查询参数。

Answer 3

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

请遵循以下步骤 来源：facebook share debugger on localhost