【问题标题】:How do I create a custom Facebook share dialog box passing parameters?如何创建自定义 Facebook 分享对话框传递参数?
【发布时间】:2013-07-02 20:06:13
【问题描述】:

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

但我发现与我的平均情况有一些不同:

1- 我希望我的页面中的自定义区域在人们单击按钮(共享按钮)时打开和关闭

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

我看到有人在谈论 Javascript SDK,但它的安装指南告诉我设置 APP_ID,但没有为我的网站创建任何应用程序。是否必须创建一个才能使用此 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>

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

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

@编辑

刚刚回答了我使用的解决方案

@编辑 2

使用 v2.2 更新

【问题讨论】:

    标签: facebook dialog share lightbox


    【解决方案1】:

    2017 年 12 月:自定义对象共享将被弃用。从现在开始,您最好的选择是为该对象创建另一个页面,并在其中包含 facebook 查找的相应元标记。更多信息在这里:developers.facebook.com/docs/sharing/reference/share-dialog

    【讨论】:

      【解决方案2】:

      这是我为解决我的网站中的问题所做的:

      首先我添加了 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>
      

      @编辑于 2015 年 10 月 1 日 仍在为 v2.2 工作

      参考Feed method了解如何创建分享对话框(我使用的是feed方法,似乎更灵活)

      还有Quickstart 了解如何将 Javascript SDK 导入您的页面

      【讨论】:

      • 我相信 feed 现在在 APIv2 中已被弃用。仅支持共享,并且似乎不允许覆盖 OG 属性。
      • @VictorFerreira 为什么我们应该创建一个 facebook 应用程序?如果我为某人创建一个网站,我应该使用我的应用程序还是让他们创建一个应用程序?
      【解决方案3】:

      这是一个老问题,但对我有用的是:

      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/。我猜这是文档中的错字。

      【讨论】:

      • 现在这种方法将不起作用,它从打开的图表或给定的 url 中获取详细信息。特别是与规范一起使用它会卡住。
      • Open Graph 是另一回事。它告诉 Facebook 要分享什么。
      猜你喜欢
      • 2012-12-24
      • 1970-01-01
      • 1970-01-01
      • 2014-05-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多