带有 angularjs 和 facebook 共享按钮的单页应用程序 [英] single page application with angularjs and facebook share button

问题描述

我按照这篇文章在我的应用程序中部署 Facebook 共享按钮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 each {{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: '我的应用程序 ID', 状态: true, cookie: true,xfbml: 真});};(功能() {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

<ul><li ng-repeat = "在帖子中发帖"><div>{{post.title}} </div><div>{{post.content}} </div><div><script type="text/javascript">$(document).ready(function(){$('#{{post.id}}').click(function(e){//无法识别的表达式:{{post.id}}e.preventDefault();FB.ui({方法:'饲料'，name: '这是名称"字段的内容.',链接:'链接到每个{{post.id}}'，标题:'{{post.caption'}}，});});});<div id = "{{post.id}}">share </div>

解决方案

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

我的实现

HTML

<div id="fb-root"></div><脚本>window.fbAsyncInit = function() {FB.init({appId: '你的应用程序 ID', 状态: true, cookie: true,xfbml: 真});};(功能() {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);}());<div ng-controller="fbCtrl"><div ng-repeat="post in post"><div>{{post.title}}</div><div>{{post.content}}</div><button ng-click="share(post)">SHARE</button>

控制器

angular.module("myApp",[]).controller("fbCtrl",function($scope){$scope.posts = [{id:1,title:"title1",content:"content1",caption:"caption1"},{id:2,title:"title2",content:"content2",caption:"标题2"}];$scope.share = function(post){FB.ui({方法:'饲料'，name: '这是名称"字段的内容.',链接:'http://www.hyperarts.com/external-xfbml/'+post.id，图片:'http://www.hyperarts.com/external-xfbml/share-image.gif'，标题:post.caption，description: '这是标题下方描述"字段的内容.',信息: ''});}});

截图

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

希望对您有所帮助.

I follow this post to deploy facebook share botton in my app http://www.hyperarts.com/blog/tutorial-how-to-add-facebook-share-button-to-your-web-site-pages/

The first problem is I can not pass post.id, post.caption to facebook script.

The second one is the link to every post on facebook wall link: ' link to every {{post.id}}'. If people click on a link shared on their wall, it should jum (AUTO SCROLL) to specific post on my site, this is single page so all post have the same link

Thanks so much!

This is my Angularjs controller:

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"
                           }
                          ]
        }

This is 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);
}());

This is my 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>

解决方案

I think you could register share button click event handler in "Angular way". Move the logic to controller and use ng-click directive to trigger share action.

My implementation

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>

Controller

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: ''
    });
  }
});

Screenshot

You could create a service for FACEBOOK sharing if this function will apply to multiple parts.

Hope this is helpful.

这篇关于带有 angularjs 和 facebook 共享按钮的单页应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！