single page application with angularjs and facebook share button

Viewed 33541

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>
2 Answers
Related