** 老文新貼 **
這篇其實是 2011年我在公司做部門分享時寫的
用的也是我在公司寫的專案，剛剛試用了一下還可以玩耶!
( code 寫得很爛請別在意，精神有到就好 = =)
因為 FB 改了 n 版了
如果在發佈塗鴉牆有遇到 API Error Code: 191 的可以參考一下這篇
這篇裡面講了如何用javascript sdk 開發 facebook APP
包含取得facebook 登入授權與要求權限的範圍，還有發佈至塗鴉牆
要看在APP內發佈到塗鴉牆直接點這裡，要看判斷加入粉絲團看這裡
要看開發APP流程就繼續看下去
首先我先把會用到的說明文件連結貼上去 (文章裡面搬上來而已)
SDK 載入方式
https://developers.facebook.com/docs/reference/javascript/
授權
http://developers.facebook.com/docs/authentication/
FB.login
https://developers.facebook.com/docs/reference/javascript/FB.login/
登入後可以取得授權資料的 Permissions
https://developers.facebook.com/docs/reference/login/
印象中預設可以取得使用者uid、email、生日....等資料
但改了那麼多次版不知道現在變怎樣，但反正你要要求什麼權限看文件打上去就對了
但也不要全打上去，權限要求太多user 看到只會覺得你在詐騙
FB.getLoginStatus
http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
FB.api
http://developers.facebook.com/docs/reference/javascript/FB.api/
FB.ui
http://developers.facebook.com/docs/reference/javascript/FB.ui/
以下開始
=============================================
此文件簡略說明Facebook APP 開發的方式
由於 FBML 將於2012 / 6 停止使用，因此這邊介紹的方式是使用 Javascript SDK
http://developers.facebook.com/docs/reference/javascript/
一、首先到此新增一個 APP https://developers.facebook.com/apps
其中
- 應用程式顯示名稱 : 是 User 看的到的，就是你APP的名字
- 應用程式名稱空間 : 就是你APP網址後面的名稱
ex: http://apps.facebook.com/scolorappx/ 的 scolorappx
勾選我同意後按繼續
然後拉到下方，選擇Facebook 上的APP，然後輸入你的程式位址(請注意https的環境也要考慮進去)
測試階段這邊可以先用 localhost 測試
完成品在這
http://apps.facebook.com/scolorappx/
然後底下是程式
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!—要引用這個才能寫 FBML 雖然此例是沒在用 FBML -->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml"
xmlns:og="http://opengraph.org/schema/">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="fb-root"></div> <!--- 這個一定要加，加了才能用 Javascript SDK or FBML -->
<table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="fifi/FIFI2.jpg" width="720" height="650" border="0" usemap="#Map" /></td>
</tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="554,157,710,208" href="Question.aspx" />
</map>
<!-- 加了這行才能用 Javascript SDK -->
<script language="javascript" type="text/javascript" src="http://connect.facebook.net/zh_TW/all.js"></script>
<script type="text/javascript" >
FB.init({
appId: '294448433900314', // App ID
channelURL: '//www.suncolor.com.tw/channel.html', // Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
oauth: false, // enable OAuth 2.0
xfbml: true // parse XFBML
});
FB.Canvas.setAutoResize(true);
FB.Canvas.setSize({ height: 750, width: 740 });
$(document).ready(function () {
fb_init();
});
// fb_init
function fb_init() {
FB.getLoginStatus(function (response) {
if (response.session){
is_fan();
} else {
window.open('https://www.facebook.com/dialog/oauth?client_id=294448433900314&redirect_uri=http://apps.facebook.com/scolorappx/&scope=email,read_stream','_top');
}
});
}
// is_fan 判斷加入粉絲團
function is_fan() {
FB.api(
{
method: 'pages.isFan',
page_id: '113926358659722'
},
function (response) {
if (response) {
$("#be_fan").hide();
} else {
$("#be_fan").show();
setTimeout("is_fan()", 1000);
}
});
}
</script>
<!-- 請先加入粉絲團 -->
<div style="width:760px; height:660px; background-image:url(images/transbg.png);background:rgba(0,0,0,0.6);display:none;z-index:999;position:absolute;top:0px;left:0px;" id="be_fan">
<div style="width: 351px; height: 285px; margin-left: 205px; background: #fff; margin-top: 150px; border: #333 2px solid; padding-top:5px;">
<div style="width: 349px; margin-left: 0px; font-size: 14px; font-weight: bold; color: #333;">
請先加入粉絲團：
<div id="like_box" style="margin-top: 5px;"><iframe src="https://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/suncolorbooks&width=349&colorscheme=light&show_faces=true&stream=false&header=false&height=259" scrolling="no" frameborder="0" style="border: none; overflow: hidden; width: 360px; height: 259px;" allowTransparency="true"></iframe></div>
</div>
</div>
</div>
</form>
</body>
</html>
SDK 載入方式
https://developers.facebook.com/docs/reference/javascript/
授權
http://developers.facebook.com/docs/authentication/
FB.getLoginStatus
http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
FB.api
http://developers.facebook.com/docs/reference/javascript/FB.api/
發布到塗鴉牆 sample
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="End.aspx.vb" Inherits="Suncolor_Act20111027_End" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml"
xmlns:og="http://opengraph.org/schema/">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="fb-root"></div>
<div>
<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="fifi/fifi-title2.jpg" width="720" height="149" border="0" usemap="#Map" /></td>
</tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="432,111,505,140" href="http://www.facebook.com/suncolorbooks" />
<area shape="rect" coords="359,111,433,140" href="http://www.suncolor.com.tw/index_book_c1_01_data.aspx?bokno=015503005" />
<area shape="rect" coords="286,111,359,140" href="Default.aspx" />
</map>
<table width="720px" cellpadding="5px" valign="top"><tr>
<td style="font-size:10pt;line-height:20px">
<asp:Literal ID="Pic" runat="server"></asp:Literal></td>
<td style="font-size:10pt;line-height:20px" valign="top">
<asp:Literal ID="Content" runat="server"></asp:Literal>
<br /><br /><a href="javascript:{void(0)}" onclick="ShowFeed()">發佈到塗鴉牆</a>
</td></tr></table>
</div>
<input type="hidden" id="des" runat="server" />
<input type="hidden" id="title" runat="server" />
<input type="hidden" id="CImg" runat="server" />
<script language="javascript" type="text/javascript" src="http://connect.facebook.net/zh_TW/all.js"></script>
<script type="text/javascript" >
FB.init({
appId: '294448433900314', // App ID
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
oauth: true, // enable OAuth 2.0
xfbml: true // parse XFBML
});
FB.Canvas.setAutoResize(false);
FB.Canvas.setSize({ height: 750, width: 760 });
$(document).ready(function () {
FB.getLoginStatus(function (response) {
if (response.session) {
//登入成功
} else {
//FB.login(function (response) {
// if (response.session) {
// var access_token = response.session.access_token;
// } else {
// }
//});
}
is_fan();
ShowFeed();
});
});
// is_fan
function is_fan() {
FB.api(
{
method: 'pages.isFan',
page_id: '113926358659722'
},
function (response) {
if (response) {
$("#be_fan").hide();
} else {
$("#be_fan").show();
setTimeout("is_fan()", 1000);
}
});
}
FB.ui(
{
method: 'feed',
name: $("#title").val(),
link: 'http://apps.facebook.com/scolorappx/',
picture: $("#CImg").val(),
caption: 'Fifi Lapin',
description: $("#des").val()
},
function (response) {
if (response && response.post_id) {
//
} else {
//
}
}
);
}
</script>
</form>
</body>
</html>
FB.ui
http://developers.facebook.com/docs/reference/javascript/FB.ui/
結果長這樣
留言列表
CSS、Responsive Web Design (2)