带有 angularjs 和 facebook 分享按钮的单页应用程序答案

【问题标题】：single page application with angularjs and facebook share button带有 angularjs 和 facebook 分享按钮的单页应用程序
【发布时间】：2013-12-30 07:03:42
【问题描述】：

我按照这篇文章在我的应用中部署 facebook 分享按钮 http://www.hyperarts.com/blog/tutorial-how-to-add-facebook-share-button-to-your-web-site-pages/

第一个问题是我无法将post.id、post.caption 传递给 facebook 脚本。

第二个是 facebook wall link: ' link to every {{post.id}}' 上每个帖子的链接。如果人们点击他们墙上共享的链接，它应该跳转（自动滚动）到我网站上的特定帖子，这是单页，所以所有帖子都有相同的链接

非常感谢！

这是我的 Angularjs 控制器：

function MyController($scope) {
            $scope.posts = [{"title": "AAtitle",
                            "content":"AAcontent",
                            "caption":"AAcaption",
                            "id":"adfddsf"dfsdfdsds
                           },
                           {"title": "BBtitle",
                            "content":"BBcontent",
                            "caption":"BBcaption",
                            "id":"dfgfddrggdgdgdgfd"
                           },
                            {"title": "CCtitle",
                            "content":"CCcontent",
                            "caption":"CCcaption",
                            "id":"dhgfetyhnncvcbcqqq"
                           }
                          ]
        }

这是 Facebook SDK：

<div id="fb-root"></div>
window.fbAsyncInit = function() {
FB.init({appId: 'MY APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());

这是我的html

<div ng-controller = "MyController">
  <ul>
    <li ng-repeat = "post in posts">
           <div> {{post.title}} </div>
           <div> {{post.content}} </div>
           <div> <script type="text/javascript">
                $(document).ready(function(){
                $('#{{post.id}}').click(function(e){    //unrecognized expression: {{post.id}}
                e.preventDefault();
                FB.ui(
                {
                method: 'feed',
                name: 'This is the content of the "name" field.',
                link: ' link to every {{post.id}}',
                caption: '{{post.caption'}},
                });
                });
                });
                </script>
                <div id = "{{post.id}}">share </div>
        </div>

    </li>
  </ul>
</div>

【问题讨论】：

不确定这是否有帮助，但我使用此页面在 Angular 应用程序上创建了一个类似 facebook 的按钮 developers.facebook.com/docs/plugins/like-button
@rob 我之前尝试过，但没有达到我的预期

标签： javascript angularjs single-page-application facebook-social-plugins facebook-sharer

【解决方案1】：

这也是基于 Chickenrice 的回答构建的指令。

HTML：

<body>
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
        FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
        xfbml: true});
    };
    (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol +
        '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
    }());
  </script>


  <button fb-share>
      <img src="/assets/images/icons/icon-fb.png">
  </button>

</body>

指令：

'use strict';
/* global FB */

myApp.directive('fbShare', [
    function() {
        return {
            restrict: 'A',
            link: function(scope, element) {
                element.on('click', function() {
                    FB.ui({
                        method: 'feed',
                        name: 'Name you want to show',
                        link: 'http://link-you-want-to-show',
                        picture: 'http://picture-you-want-to-show',
                        caption: 'Caption you want to show',
                        description: 'Description you want to show',
                        message: 'Message you want to show'
                    });
                });
            }
        };
    }
]);

如果您使用 jshint（您应该），/* global FB */ 部分就在其中，因此您不会收到未定义变量警告。

【讨论】：

【解决方案2】：

我认为您可以以“Angular 方式”注册共享按钮单击事件处理程序。将逻辑移至控制器并使用 ng-click 指令触发共享操作。

我的实现

HTML

<body>
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
        FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
        xfbml: true});
    };
    (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol +
        '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
    }());
  </script>
  <div ng-controller="fbCtrl">
    <div ng-repeat="post in posts">
        <div>{{post.title}}</div>
        <div>{{post.content}}</div>
        <button ng-click="share(post)">SHARE</button>
    </div>
  </div>
</body>

控制器

angular.module("myApp",[])
.controller("fbCtrl",function($scope){
  $scope.posts = [{id:1,title:"title1",content:"content1",caption:"caption1"},{id:2,title:"title2",content:"content2",caption:"caption2"}];
  $scope.share = function(post){
    FB.ui(
    {
        method: 'feed',
        name: 'This is the content of the "name" field.',
        link: 'http://www.hyperarts.com/external-xfbml/'+post.id,
        picture: 'http://www.hyperarts.com/external-xfbml/share-image.gif',
        caption: post.caption,
        description: 'This is the content of the "description" field, below the caption.',
        message: ''
    });
  }
});

截图

如果此功能适用于多个部分，您可以创建 FACEBOOK 共享服务。

希望这有帮助。

【讨论】：

是的！这是工作，这非常有帮助。这有助于解决我的第一个问题。非常感谢！
我不断收到此消息。 “发生错误。请稍后再试”。你知道为什么会发生这种情况吗？
我有这个错误“API 错误代码：191 API 错误描述：指定的 URL 不属于应用程序错误消息：redirect_uri 不属于应用程序。”
@Jocker Well ... 错误 191 是 Facebook API 集成问题。您应该检查您的站点 URL 设置（redirect_url 应该等于或相对于站点 URL）。而且我认为这不是 Angular 相关问题 :)