facebook单页面
我们的社交媒体团队今早登录该应用时有了一个小小的惊喜。我们上个月曾暗示过，但这似乎已经到来。新的Facebook商业页面设计实际上跟Timeline一样，如今所有企业都能够在Facebook页面上进行实现！
带有angularjs跟facebook分享按钮的单页面应用程序
我按照这篇文章在我的应用程序中部署facebook share botton http://www.hyperarts.com/blog/tutorial-how-to-add-facebook-share-button-to-your-web-site-pages/
第一个问题是我无法通过post.id,post.captionFacebook的脚本.
第二个是Facebook墙上每个帖子的链接link: ‘ link to every {{post.id}}’.如果人们点击他们墙上共享的链接,它应该jum(自动滚动)到我的网站上的特定帖子,这是单页所以所有帖子都有相同的链接
非常感谢!
这是我的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:
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
- {{post.title}} {{post.content}} share
Chi_ice 34
我想你可以在”Angular方式”中注册分享按钮点击事件处理程序.将逻辑移动到控制器并使用ng-click指令触发共享操作.
我的实施
HTML {{post.title}} {{post.content}} SHARE
调节器
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共享创建服务.
希望这是有帮助的.
Vex_ter 5
这里也是根据Chickenrice的答案建立的指令.
HTML:
指示:
‘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 */部件就在那里,因此您不会获得未定义的变量警告
About The Author
