Menu
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>
680
Here's also a directive built based on Chickenrice's answer.
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>
Directive:
'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'
});
});
}
};
}
]);
If you use jshint (you should) the /* global FB */ part is there in so you don't get undefined variable warning.
55
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.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
