Facebook API 折腾笔记

前端需要做 Facebook 分享功能,需要使用 Facebook JavaScript SDK,在此之前,与 JavaScript 的接触不多,折腾了整整一天,记录一下。

起初,用了 Facebook JavaScript SDK version 2.1,没添加弹出窗口功能,本地调试用 alert(); 打印,以为有了代码就行,没调试

再看回代码,觉得其中疏忽很多,没有 appIdfbFeed 方法下的列表没加引号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/**
* Facebook直接调用
*/
//初始化
window.fbAsyncInit = function() {
FB.init({
appId: '{your-appid}',
status: true,
cookie: true,
xfbml: true,
version: 'v2.1' // or v2.0, v2.1, v2.2, v2.3
});
};

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

//分享
function fbFeed(message, picture, name, caption, description) {
FB.api('/me/feed', 'post', {
message: message,
picture: picture,
name: name,
caption: caption,
description: description
}, function(response) {
if (response && !response.error) {
alert('Success');
} else {
alert('Error');
}
});
}

造成这种错误的原因是不知道使用 Facebook API 需要申请 APP,获取 appId,否则无法使用 Facebook APIfbFeed 方法下的列表没加引号这个错误就让人无法理解了,以后还是得多实践 (:

接下来,换了 Facebook JavaScript SDK version 2.5 这个版本的代码,能正常使用,调试有了经验,能正常打印内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//分享
function fbFeed() {
var obj = {
method: 'feed',
redirect_uri: 'https://developers.facebook.com/docs/',
href: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
name: 'Facebook Dialogs',
caption: 'Reference Documentation',
description: 'Using Dialogs to interact with people.'
};
FB.ui(obj,
// callback
function(response) {
if (response && !response.error_message) {
alert('Success');
} else {
alert('Error');
}
});
}

最后,还需要调用前端 AS 给出的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//分享
function fbFeed(type, link, picture, name, caption, description) {
var obj = {
method: 'feed',
link: link,
picture: picture,
name: name,
caption: caption,
description: description
};
FB.ui(obj,
// callback
function(response) {
if (response && !response.error_message) {
//alert('Success');
var swf = document.getElementById("FlashID");
if (!swf) return;
swf.fbFeedCallBack(type);
} else {
//alert('Error');
}
});
}

(完)