Facebook使用AngularJS分享按钮不稳定行为 [英] Facebook share button erratic behavior with AngularJS

问题描述

尝试将Facebook Share按钮集成到我的SPA应用程序中时遇到两个问题.该应用程序显示两个文章列表，这些列表是在其他人发布的，而这些是我发布的.通过单击页面顶部的两个按钮之一，分别显示这两个列表.我正在使用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.

我的第二个问题是更面向AngularJS.我需要共享的URL包括远程计算/构建的参数.由于列表中可能有数十或数百个条目，因此我只想在需要时(即，当用户希望共享特定条目时)调用远程服务.假定这是通过功能Get_Path_for_Facebook(One_Article)完成的，该功能将在用户单击特定条目的共享按钮时调用.

My second problem is more AngularJS 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.

问题似乎是调用服务时创建的Promise的异步行为(即函数Get_Path_for_Facebook发出带有Promise的HTTP请求，该Promise返回所需的参数，但这太迟了).

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

推荐答案

您可以使用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屋！