Question

我有两个问题试图在我的SPA应用程序中集成Facebook Share按钮。该应用程序显示两个文章列表，其他人发布的文章和我发布的文章。通过单击页面顶部的两个按钮之一单独显示这两个列表中的每一个。我正在使用ng-show来实现这一点（意思是，有两个$scope变量被这些按钮设置为 true 或 false ，例如如果 $ scope.Others_Posts 设置为 true ，则会显示其他人的帖子;与我自己的帖子相反）。

第一个问题是我第一次点击Facebook分享按钮，比如其他人的帖子视图，我根据需要获得了Facebook登录窗口。只要我保持相同的视图（此示例中的其他人的帖子），弹出Facebook登录就可以了。如果我切换到其他视图（我的帖子），则不再显示共享按钮。我没有做任何帮助（比如回到第一个视图）。另一方面，如果我切换到第二个视图之前调用共享，只要我不切换视图，它也会起作用。总而言之，如果我在两个视图之一中单击共享按钮，只要我切换视图（从其他人的帖子到我的或反之亦然），共享按钮就会停止显示。

这就是我正在使用的：

<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>
    <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>


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

请注意，我将标准代码从Facebook包装到按钮中，因为我还有其他操作要提供给用户。

我的第二个问题是更加面向AlgularJS。我需要共享的URL包括远程计算/构建的参数。由于列表中可能有数十或数百个条目，因此我只想在需要时（即当用户希望共享特定条目时）调用远程服务。这假设由函数Get_Path_for_Facebook(One_Article)完成，当用户点击特定条目的共享按钮时，该函数将被调用。问题似乎是在调用服务时创建的promise的异步行为（即函数Get_Path_for_Facebook发出带有返回所需参数的promise的HTTP请求，但这发生得太晚了。）

对这两个问题的任何建议都将受到高度赞赏。

Answer 1

您可以使用Facebook的sharer.php。基本概念：

HTML

<button ng-click="share(selected)">Share</button>

JS

$scope.share = function share(selected) {
    window.open('https://www.facebook.com/sharer/sharer.php?u=https://your.url/&t=' + selected.id, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
    // anything else you want to do when clicking the share button
}

如果您没有将其用于其他任何目的，也可以删除FB SDK。

Facebook分享按钮与AngularJS的一致行为

1 个答案: