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

Question

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

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

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

非常感谢！

这是我的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>

Answer 1

我想你可以在“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共享创建服务。

希望这是有帮助的。

Answer 2

这里也是根据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 */ part就在那里，你就不会得到未定义的变量警告。

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

问题描述

2 个解决方案

解决方案1
34 已采纳 2013-12-12 07:24:13

解决方案2
5 2014-05-18 08:08:49

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

问题描述

2 个解决方案

解决方案1 34 已采纳 2013-12-12 07:24:13

解决方案2 5 2014-05-18 08:08:49

解决方案1
34 已采纳 2013-12-12 07:24:13

解决方案2
5 2014-05-18 08:08:49