与angularjs和Facebook分享按钮单页应用程序 [英] single page application with angularjs and facebook share button
问题描述
我按照这个帖子在我的应用程序部署Facebook共享钮
<一href=\"http://www.hyperarts.com/blog/tutorial-how-to-add-facebook-share-button-to-your-web-site-pages/\">http://www.hyperarts.com/blog/tutorial-how-to-add-facebook-share-button-to-your-web-site-pages/
第一个问题是我无法通过 post.id ， post.caption Facebook的脚本。
第二个是链接到每一个岗位上的Facebook墙上链接：链接到每一个{{post.id}} 。如果人们点击他们的墙上共享一个链接，就应该Jum的（AUTO SCROLL）在我的网站的具体职位，这是单页，因此所有岗位都有相同的链接
太感谢了！
这是我的Angularjs控制器：
函数myController的（$范围）{
$ scope.posts = [{称号：AAtitle
内容：AAcontent
标题：AAcaption，
ID：adfddsfdfsdfdsds
}，
{称号：BBtitle
内容：BBcontent
标题：BBcaption，
ID：dfgfddrggdgdgdgfd
}，
{称号：CCtitle
内容：CCcontent
标题：CCcaption，
ID：dhgfetyhnncvcbcqqq
}
]
}
这是Facebook的SDK：
＆LT; DIV ID =FB-根＆GT;＆LT; / DIV＆GT;
window.fbAsyncInit =功能（）{
FB.init（{APPID：'我的应用程序ID'，状态：真的，饼干：真实，
XFBML：真}）;
};
（函数（）{
变种E =使用document.createElement（'脚本'）; e.async = TRUE;
e.src = document.location.protocol +
//connect.facebook.net/en_US/all.js';
的document.getElementById（'FB-根'）的appendChild（E）。
}（））;
这是我的HTML
＆LT; DIV NG控制器=myController的＆GT;
＆LT; UL＆GT;
＆LT;李NG重复=后在帖子中＆GT;
＆LT; DIV＆GT; {{post.title}}＆LT; / DIV＆GT;
＆LT; DIV＆GT; {{post.content}}＆LT; / DIV＆GT;
＆LT; DIV＆GT; ＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（'＃{{post.id}}'）点击（函数（五）{//未确认前pression：{{post.id}}
亦即preventDefault（）;
FB.ui（
{
方法：'喂'，
名称：这是名称字段的内容。，
链接：链接到每一个{{post.id}}'，
标题：{{post.caption'}}，
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; DIV ID ={{post.id}}＆GT;共享和LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
我想你可以在角办法注册分享按钮单击事件处理程序。移动逻辑控制器和使用NG-点击指令触发份额的行动。
我执行
HTML
＆LT;身体GT;
＆LT; DIV ID =FB-根＆GT;＆LT; / DIV＆GT;
＆LT;脚本＆GT;
window.fbAsyncInit =功能（）{
FB.init（{APPID：'你的App ID'，状态：真的，饼干：真实，
XFBML：真}）;
};
（函数（）{
变种E =使用document.createElement（'脚本'）; e.async = TRUE;
e.src = document.location.protocol +
//connect.facebook.net/en_US/all.js';
的document.getElementById（'FB-根'）的appendChild（E）。
}（））;
＆LT; / SCRIPT＆GT;
＆LT; DIV NG控制器=fbCtrl＆GT;
＆LT; DIV NG重复=后在帖子中＆GT;
＆LT; DIV＆GT; {{post.title}}＆LT; / DIV＆GT;
＆LT; DIV＆GT; {{post.content}}＆LT; / DIV＆GT;
＆LT;按钮NG点击=份额（后）＆GT;共享和LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
控制器
angular.module（对myApp，[]）
.controller（fbCtrl功能（$范围）{
$ scope.posts = [{id:1,title:\"title1\",content:\"content1\",caption:\"caption1\"},{id:2,title:\"title2\",content:\"content2\",caption:\"caption2\"}];
$ scope.share =功能（POST）{
FB.ui（
{
方法：'喂'，
名称：这是名称字段的内容。，
链接：http://www.hyperarts.com/external-xfbml/'+post.id，
图片：http://www.hyperarts.com/external-xfbml/share-image.gif'，
标题：post.caption，
介绍：这是说明字段的内容，标题下面。，
信息： ''
}）;
}
}）;
屏幕截图
您可以创建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屋！
