facebook单页面

facebook广告,facebook账号,facebook产品,facebook,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 */部件就在那里,因此您不会获得未定义的变量警告

Add a Comment

您的电子邮箱地址不会被公开。 必填项已用*标注