web-dev-qa-db-ja.com

angularjsとfacebook共有ボタンを備えた単一ページアプリケーション

この投稿に従ってFacebook共有ボタンをアプリに展開します http://www.hyperarts.com/blog/tutorial-how-to-add-facebook-share-button-to-your-web-site-ページ/

最初の問題は、post.id、post.captionをFacebookスクリプトに渡すことができないことです。

2番目はFacebookの壁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>
javascriptangularjssingle-page-applicationfacebook-social-pluginsfacebook-sharer
12
user3044147

「Angular way」でシェアボタンクリックイベントハンドラを登録できると思います。ロジックをコントローラーに移動し、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: ''
    });
  }
});

スクリーンショット

enter image description here

この機能が複数のパーツに適用される場合、FACEBOOK共有用のサービスを作成できます。

これがお役に立てば幸いです。

34
Chickenrice

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 */パーツが存在するため、未定義の変数の警告が表示されません。

5
Vexter