Question

此问题专门针对客户端Javascript开发，具有整合Facebook Share按钮的丰富经验。

我的SPA应用程序是使用Javascript和AngularJS开发的。

作为功能的一部分，有一个包含几个div的页面，每个div都显示一个文档引用列表，每个引用都有自己的状态。

div包含一个ng-show指令，这样在任何给定时间只能呈现两个div中的一个。

此信息（文档列表）是从远程服务器接收并安排在JSON集合（数组）中，其中每个条目包括文档标题，其状态，和编码的字符串（稍后将使用它将变得清晰）。

文档可能有两种状态：EDIT或VIEW。

我想要做的是在每个文档的旁边添加一个SHARE按钮，其URL如下所示：

  http://MyTestSite.com/Index.html?action=<action>&reference=<reference>

其中可以是EDIT或VIEW，并且将是编码的字符串。例如：

  http://MyTestSite.com/Index.html?action=view&reference=23lkj32oi4j23kl2j2lk2l34kj23

点击此网址（带参数）的访问者将直接路由到相关文档的视图页面（由编码字符串指定）。

我使用的是从Facebook网站上提取的以下代码：

进入页面后：

<script>
    (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#xfbml=1&version=v2.5";
        fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk')
    );
</script>
<style>
    .fb-share-button
    {
        transform: scale(1.5);
        -ms-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -o-transform: scale(1.5);
        -moz-transform: scale(1.5);
        transform-origin: top left;
        -ms-transform-origin: top left;
        -webkit-transform-origin: top left;
        -moz-transform-origin: top left;
        -webkit-transform-origin: top left;
    }
</style>

对于每个文件参考：

<button type="button" class="btn btn-default" 
        aria-haspopup="true" 
        aria-expanded="false" 
        style="width:100%;height:40px;text-align:left">
    <div id="fb-root" style="width:100%;height:0px;margin:-10px 0 0 0 "></div>

    <div class="fb-share-button" data-href="{{Get_Path_for_Facebook(One_Article)}}" data-layout="button"></div>
</button>

注意：

由于我提供了与Facebook无关的其他选项而我希望所有选项看起来都一样，所以我用我自己的按钮包装Facebook的按钮。
函数Get_Path_for_Facebook(One_Article)返回包含整个路径的字符串（例如http://MyTestSite.com/Index.html?action=view&reference=23lkj32oi4j23kl2j2lk2l34kj23）。

所以，这是我的问题：

当我查看两个div中的一个并单击任何SHARE按钮时，我会看到Facebook登录窗口。如果我点击其中的不同文件，这将重复工作同样的div。当我切换到另一个div时，Facebook徽标不再显示，显然，单击按钮时没有任何反应。我应该补充说，我开始使用哪个div并不重要， Facebook的登录窗口将首次出现，只要我保持在同一个div中，我点击SHARE按钮的任何额外时间，并且一旦切换div就会停止工作。
如何共享包含上述示例参数的网址？

最后，这不是我使用此问题创建的第一篇文章。我得到了建立服务器端页面（或类似内容）的建议，这远远超出了我目前的知识。如果这是实现我需要的唯一方法，我非常感谢如果还提供了一个明确的例子，那么我可以复制粘贴并根据我的需要调整内容。

提前感谢任何帮助。

修改

根据收到的反馈，似乎我的问题不明确，所以这里描述的方法不同。

我希望达到一种情况，即我的SPA应用程序共享的链接会出现在Facebook中，当点击它们时，会打开一个单独的窗口/选项卡，其中包含链接的URL。这与您在电子邮件中获得链接并单击它时非常相似。

现在，这些链接看起来像：

  http://MyTestSite.com/Index.html?action=view&reference=dfklj34lkdjawoet4jw4oige9034

并在我的SPA中动态生成。

虽然很明显，但重要的是要注意我的SPA使用这些参数，例如，访问者将被直接带到文档的视图而不需要登录应用程序并搜索文档。

我的SPA有两个 div ，其可见性受ng-show指令的限制。每个此类 div 都包含一个文档列表（该列表是ng-repeat的结果）。

我想在每个列出的文档旁边显示一个SHARE按钮，该按钮将共享一个链接，如上例所示（但当然使用不同的参数）。

值得注意的是，我不需要在“共享”窗口内或Facebook页面中显示任何页面内容。只有链接和（如果共享用户希望）a 评价。

我的问题是：

1）如何与上面显示的参数共享链接？

2）我正在使用上面显示的示例代码，并且在启动并保留在 divs 之一时，所有共享按钮都会导致Facebook窗口弹出（无论哪个都是 div 我开始了）。只要我从一个 div 切换到另一个，共享按钮就会停止显示。

希望这次我的解释清楚，我非常感谢解决方案。谢谢！

编辑2

我应该补充一点，对我来说最好的解决方案是，如果我可以使用自己的按钮（而不是Facebook），并在页面控制器的功能内处理共享机制。 / p>

再次感谢！

Answer 1

在这个例子中，我找到了一个使用Facebook共享器的工作解决方案：

"http://codepen.io/anon/pen/yOdVXr?editors=1111"

我在我的控制器中创建了一个简单的功能，完全按照我需要的方式完成工作。

是的，我知道它已被折旧，但它完全按我想要的方式工作，最重要的是，它很简单。

在我的SPA应用程序中整合Facebook Share的问题

修改

编辑2

1 个答案: