對於PC版大尺吋的螢幕，當網站要 feed 資料到 facebook 時，可以使用 javascript SDK 的
FB.ui => method:'feed' 方式處理，參考位置。此方法會popup小視窗讓user可以分享資料出去。
但是遇到手機版網頁就有點麻煩，實測上手機版的 chrome 會出現轉不停的情況，無法分享；而iPhone則是另開新頁面處理，可以成功但是會多一個分頁。所以手機版網頁建議使用 redirect 方式處理分享機制，參考位置
var fbUrl = "https://www.facebook.com/dialog/feed?" +
"app_id=122465741241119&display=touch" +
"&link=" + encodeURIComponent("http://www.shopunt.com/tch/FixPage.aspx?id=525") +
"&picture=" + encodeURIComponent("http://www.shopunt.com/tch/event/2014-nail-enrollment/fb_200x200.jpg") +
"&description=" + encodeURIComponent("市價不斐的光療DIY教學，UNT傾囊相授！10場巡迴免費教學，讓妳輕鬆掌握光療DIY訣竅，並搶先體驗秋冬最新流行色！現場打卡，再送時尚美甲工具組") +
"&redirect_uri=" + encodeURIComponent("http://www.shopunt.com/tch/event/2014-nail-enrollment/Handler.ashx?fun=FBCallback");
當然以 redirect 處理與 javascript 方式處理是兩種不同的方式，redirect 方式的 callback 網址 (redirect_uri)要接收facebook 導回的 post_id , javascript 方式則是 callback function 處理 post_id
<link href="圖片連結網址" rel="image_src" type="image/jpeg">
//先檢查是不是已經登入
FB.getLoginStatus(function (response) {
if (response.status === "connected") {
// 已登入FB
}
else {
// 未登入FB
// 盡量不要在此呼叫 FB.login , 因為彈跳視窗會被擋下來
}
});
//呼叫登入 scope:publish_stream 是要讓user同意發文到FB的權限
FB.login(function (response) {
if (response.authResponse) {
// 已登入，可取得 AccessToken
} else {
// 未登入
}
}, { scope: 'publish_stream' });
// 檢查 user 有無同意發文到FB的權限 (publish_stream)
FB.api({ method: 'users.hasAppPermission', ext_perm: 'publish_stream' }, function (resp) {
if (resp === "1") {
//有同意
} else {
//不同意
}
});
// 分享連結到登入者的FB牆
// msg 是發文的內容
// link, picture, caption, description 是一組的
var args = {
message: msg,
link: product.Link,
picture: product.Picture,
caption: product.Name,
description: "超高口碑BB霜/CC霜、頂級精華液哪款半價 由你決定!"
};
FB.api('/me/feed', 'post', args, function (response) {
if (response.id) {
// 成功會回傳訊息id
}
else {
// 分享失敗
}
});
FB.ui({
method: 'feed',
name: '快去搶！超過9成的使用者滿意推薦的《玻尿酸精華》',
link: 'http://www.shopunt.com/tch/event/2014-aqua-deluge/default.aspx',
picture: 'http://www.shopunt.com/Upload/tch/unt/14mar/fb154x154.jpg',
caption: 'UNT 頂級玻尿酸保濕精華液(奢華)',
description: '熱銷破百萬 真實口碑見證的水感奇肌 逆時補水科技 快速滲透 為肌膚注入高水位……'
},
function (response) {
if (response && response.post_id) {
// handle success
}
else {
alert("facebook分享失敗!");
}
}
);