Facebook分享按钮与AngularJS的行为 [英] Facebook share button arratic behavior with AngularJS

问题描述

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

I have two issues trying to integrate Facebook Share buttons in my SPA application. The application displays two lists of articles, those posted y other people and those posted by me. Each of these two lists are presented separately by clicking at one of two buttons at the top of the page. I'm using ng-show to achieve this (meaning, there are two $scope variables that are set to true or false by these buttons, such that if $scope.Others_Posts is set to true, the posts from others are being shown; the opposite for my own posts).

第一个问题是，我第一次点击Facebook分享按钮，比如别人的帖子查看，我需要时可以获得Facebook的登录窗口。只要我保持在同一个视图（在这个例子中的其他人的帖子），Facebook登录的弹出就可以了。如果我切换到其他视图（我的帖子），那么共享按钮不再出现了。没有什么我有帮助（像回到第一个视图）。另一方面，如果我切换到调用共享之前的第二个视图，那么只要我不切换视图，它也可以工作。
总结如果我点击两个视图中的一个视图中的分享按钮，只要我切换视图（从其他人的帖子到我的或反之亦然），共享按钮停止显示。

The first problem is that the first time I click on the Facebook share button in, say, the others' posts view, I get the Facebook login window as needed. As long as I remain in the same view (others' posts in this example), popping of the Facebook login works ok. If I switch to the other view (my posts), then the share button does not appear anymore. Nothing I do helps (like going back to the first view). If, on the other hand, I switch to the second view before invoking the share, it also works as long as I don't switch view. Summarizing, if I click on the share button in one of the two views, as soon as I switch view (from others' posts to mine or vise-versa), the share button stops appearing.

这是我使用的：

<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包装到按钮中，因为我有其他操作可供用户。

Note that I am wrapping the standard code from Facebook into a button because I have other actions to offer to the user.

我的第二个问题是更多的AlgularJS导向。我需要共享的URL包括远程计算/构建的参数。由于列表中可能有数十或数百个条目，所以我只在需要时才调用远程服务（即当用户希望共享特定条目时）。这可以通过在用户点击特定条目的共享按钮时调用的函数 Get_Path_for_Facebook（One_Article）完成。
这个问题似乎是在调用服务时创建的承诺的异步行为（即函数 Get_Path_for_Facebook 发出一个HTTP请求，具有返回所需参数的承诺但是这样做太晚了）。

My second problem is more AlgularJS oriented. The URL I need to share includes parameters that are calculated/built remotely. Since there may be tens or hundreds of entries in the list, I want to invoke the remote service only when it is needed (i.e. when the user wishes to share a particular entry). This is suppose to be done by the function Get_Path_for_Facebook(One_Article) which is to be invoked when the user clicks on the share button of a particular entry. The issue appears to be the asynchronous behavior of the promise created when invoking the service (i.e. the function Get_Path_for_Facebook issues a HTTP request with a promise that returns the needed parameters, but this takes place too late).

对这两个问题的任何建议将非常感谢。

Any suggestions for these two problems will be highly appreciated.

推荐答案

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

You could use Facebook's sharer.php. Basic concept:

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，如果您没有使用它，还可以使用它。

You can remove the FB SDK as well, if you're not using it for anything else.

这篇关于Facebook分享按钮与AngularJS的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！