одностраничное приложение с angularjs и кнопкой «Поделиться в Facebook»

Я следую этому сообщению, чтобы развернуть кнопку «Поделиться в 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 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);
}());

это мой хтмл

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

javascript angularjs single-page-application facebook-sharer facebook-social-plugins
person user3044147    schedule 12.12.2013    source источник
comment
Не уверен, поможет ли это, но я использовал эту страницу для создания кнопки «Мне нравится» в приложении angular developers.facebook.com/docs/plugins/like-button   -  person rob    schedule 12.12.2013
comment
@rob Я пробовал это раньше, но это не сработало, как я ожидал   -  person user3044147    schedule 12.12.2013

Ответы (2)


arrow_upward
34
arrow_downward

Я думаю, вы могли бы зарегистрировать обработчик события нажатия кнопки «Поделиться» в «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: ''
    });
  }
});

Снимок экрана

введите здесь описание изображения

Вы можете создать сервис для обмена FACEBOOK, если эта функция будет применяться к нескольким частям.

Надеюсь, это полезно.

person Chickenrice    schedule 12.12.2013
comment
Да! Это работа, это очень полезно. Это поможет решить мою первую проблему. Большое спасибо! - person user3044147; 12.12.2013
comment
Я продолжаю получать это сообщение. Произошла ошибка. Пожалуйста, попробуйте позднее. Вы знаете, почему это может происходить? - person Alok Pant; 26.09.2014
comment
у меня есть эта ошибка Код ошибки API: 191 Описание ошибки API: Указанный URL-адрес не принадлежит приложению Сообщение об ошибке: redirect_uri не принадлежит приложению. - person Deenadhayalan Manoharan; 12.04.2015
comment
@Jocker Ну ... Ошибка 191 - это проблема интеграции API Facebook. Вам следует проверить настройку URL-адреса вашего сайта (redirect_url должен быть равен URL-адресу сайта или относиться к нему). И я думаю, что это не проблема, связанная с Angular :) - person Chickenrice; 12.04.2015

arrow_upward
5
arrow_downward

Вот также директива, построенная на основе ответа Чикенрайса.

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 */, поэтому вы не получите предупреждение о неопределенной переменной.

person Vexter    schedule 18.05.2014