首先，要先申請 Facebook API
申請的過程"非常"簡單~~
1.進入 facebook 開發者介面 這裡，如下圖。
2.點擊"新增應用程式"，按繼續。
3.輸入完驗證碼後，即申請完成。
上圖中紅色框框裏 App ID 與 App Secret 請務必牢記
另外，要把沙盒模式關掉喔~~
上圖中的 URL 可以填寫你自己網站的網址
Facebook 登入登出完成後，會自動導回這個 URL
只要依照以上三個步驟即可申請 Facebook app 了
是不是很簡單呢XDD
–
以下開始說明如何做出 Facebook 登入登出：
/********* js 的部分 *********/
/********* 使用 jquery *********/
function oplogin(){ // 初始化 facebook api
FB.init({
appId: ‘放剛剛申請的appId’, //此例為 468049916622189
status: true,
cookie: true,
xfbml: true,
channelUrl: ‘放 channel.html 檔案的URL’, //下文會說明 channel.html
oauth: true
});
checkfbstatus(); //判斷登入登出按鈕
}
function fblogin(){ // facebook 登入
FB.login(function(response){
if (response.authResponse){ // 登入成功
//查看登入成功後的回傳資料 response.authResponse
console.log( response.authResponse );
//查看 Facebook Access_Token
console.log(response.authResponse.accessToken);
//查看你的 Facebook ID
console.log( response.authResponse.userID );
FB.api(‘/me’, function(response){ //查看 Facebook Graph API
//查看 Facebook Graph API 的回傳資料 response
console.log( response );
console.log( ‘FB_api:’+ JSON.stringify(response));
console.log( ‘FB_id:’+ response.id );
//設置使用者 Facebook ID
localStorage.setItem( ‘FB_id’, response.id );
console.log( ‘FB_name:’+ response.name );
console.log( ‘FB_messages:’+ response.username + ‘@facebook.com’);
console.log( ‘FB_main_email:’+ response.email );
console.log( ‘FB_userURL:’+ response.link);
checkfbstatus(); //判斷登入登出按鈕
});
} else{ // 登入失敗
alert(“登入失敗。");
}
},{
//scope:"放置使用者所需要的權限"
//EX：publish_stream -> 使用者發文權限
//關ㄤ說明 請按此
scope: "email,xmpp_login,publish_stream,publish_actions,publish_actions,
user_birthday,friends_birthday,user_status,friends_status,user_about_me,
friends_about_me,read_mailbox,read_stream,create_event"
});
}
function fblogout(){ // facebook 登出
FB.getLoginStatus(
function (response){
if(response.status === ‘connected’){
FB.logout(function(response){ //使用者已成功登出
alert(“成功登出。");
localStorage.clear();
//再 refresh 一次，讓登入登出按鈕能正常顯示
location.replace( “放欲導回網站的URL" );
});
} else if(response.status === ‘not_authorized’){
// 使用者已登入 Facebook，但是在你的app是無效的
FB.logout(function (response) { // 使用者已登出
alert(“請重新登入！");
});
} else{ // 使用者沒有登入 Facebook
alert(“請重新登入！");
}
});
}
function checkfbstatus(){ // 顯示 facebook 登入or登出按鈕
var check_fbstatus = localStorage.getItem(‘FB_id’);
if( !check_fbstatus ){
if($(‘#fblogin_button’)){
$(‘#fblogin_button’).html(“"+
“<a href=’javascript: void(0);’ title=’login’"+
“onclick=’javascript:fblogin();return false;’>"+
“<div class=’fblogin_btn’>登入</div>"+
“</a>");
$(‘#fblogout_button’).css(‘display’, ‘none’);
$(‘#fblogin_button’).css(‘display’, ‘block’);
}
} else{
if($(‘#fblogout_button’)){
$(‘#fblogout_button’).html(“"+
“<a href=’javascript: void(0);’ title=’logout’"+
“onclick=’javascript:fblogout();return false;’>"+
“<div class=’fblogout_btn’>登出</div>"+
“</a>");
$(‘#fblogin_button’).css(‘display’, ‘none’);
$(‘#fblogout_button’).css(‘display’, ‘block’);
}
}
}
/********* head 的部分 *********/
<head>
<meta charset="utf-8″>
<script type="text/javascript" src="http://connect.facebook.net/zh_TW/all.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
/********* body 的部分 *********/
<body onLoad="oplogin()">
<div class="right_slider" id="fblogin_button"></div>
<div class="right_slider" id="fblogout_button"></div>
<div id="fb-root"></div>
</body>
----
最後，還有一件事要做…
在你的網站的資料夾中
創建一個檔案 channel.html
裡面放這行 script ：
<script src="http://connect.facebook.net/en_US/all.js"></script>
(記得把這個檔案的URL當作 channelUrl 的位置)
即可大功告成啦！！
希望這篇文章能對剛接觸 Facebook API 的開發者有所幫助
Enjoy it !!
留言列表
