如何创建传递参数的自定义Facebook共享对话框？

Posted 2021-04-18

我在这里和周围的网站上看到了一些帖子，解释了如何为我的网站创建自定义Facebook共享对话框。

但我发现与我的平均情况存在一些差异：

1-当人们点击按钮（分享按钮）时，我希望页面中的自定义区域可以打开和关闭

2-我希望在灯箱中共享内容，而不是页面的内容。例如，我们有一个产品列表，每个产品都将在灯箱中打开。我想分享有关此产品的信息，该信息现已在灯箱中打开

我看到有人在谈论javascript SDK，但它的安装指南告诉我设置APP_ID，但没有为我的网站创建任何App。我是否必须创建一个才能使用此SDK？

我也发现了这种模式

http://www.facebook.com/sharer.php?s=100&p[title]=a title&p[summary]=a description &p[url]=http://www.linkhere.com&p[images][0]=http://www.linkhere.com/image.jpg

如果我将其复制并粘贴到地址栏就可以了。但是用户被重定向到新页面。这不好。

我用上面描述的模式尝试了这个，但是无法使它工作

<a href="#" 
          onclick="
            window.open(
                'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
              'facebook-share-dialog', 
              'width=626,height=436');
            return false;">
          Share on Facebook
        </a>

它不接受我试图传递的参数。

你们中的任何人都知道如何解决这个问题吗？是通过改变元标记的“内容”吗？你有什么解决方案？

@编辑

刚回答我使用的解决方案

@EDIT 2

更新了v2.2

答案

这是一个老问题，但这对我有用：

window.open(
        'http://www.facebook.com/sharer.php?s=100&p[title]=a title&p[summary]=a description &p[url]=http://www.linkhere.com&p[images][0]=http://www.linkhere.com/image.jpg',
        'facebook-share-dialog', 
        'width=626,height=436'
    ); 

基本上我所要做的就是从facebook url中删除/ sharer /。我猜这是文档中的拼写错误。

另一答案

这就是我在网站上解决问题的方法：

首先，我添加了Facebook为我提供的工具：

<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR APP ID GOES HERE',                        // App ID from the app dashboard      
      status     : true,                                 // Check Facebook Login status
      xfbml      : true                                  // Look for social plugins on the page
    });
    // channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
    // Additional initialization code such as adding Event Listeners goes here
  };

  // Load the SDK asynchronously
  (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/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

</script>

然后我创建了一个函数shareOnFacebook来打开共享器和将调用此函数的按钮

var globalFacebookShareObject = {} //will be set when I click on a product, on a picture, on a comment or post, or whatever I want to share on Facebook or when I load the page

function shareOnFacebook(){
    FB.ui({
        method: 'feed',
        name: globalFacebookShareObject.name,
        link: globalFacebookShareObject.link,
        caption: 'R$ '+globalFacebookShareObject.caption,
        picture: globalFacebookShareObject.picture,
        description: globalFacebookShareObject.description
    }, function(response) {
        if(response && response.post_id){}
        else{}
    });
}

<button onclick='shareOnFacebook()'>Share it!</button>

@edit于10/01/2015仍在为v2.2工作

请参阅qazxsw poi以了解如何创建共享对话框（我使用的qazxsw poi方法似乎更灵活）

并向Feed method了解如何将Javascript SDK导入您的页面

另一答案

2017年12月：不推荐使用自定义对象共享。从现在开始，您最好的选择是为该对象创建另一个页面，并在那里找到相应的元标记facebook。更多信息：feed