程式設計菜鳥奮鬥日記: [Facebook]我也要用FaceBook帳號來登入我的網站

辛苦了兩天，總算找到了如何使用「新版」的Facebook API來製作

首先，要做這個之前，需要到developers.facebook申請帳號，取得APP ID
流程如下：
1.登入 developers.facebook ，如果需要獨立的帳號，請申請。
2.點選「應用程式」，並點「建立新的應用程式」。

3.決定你的應用程式名稱

4.輸入驗證碼。
5.輸入你的網站是屬於哪個Domain底下(EX:如果我網站是在http://Myweb.hinet.net/XXXXX/index.htm，那我就填上http://Myweb.hinet.net/即可)。

如果上面的動作都沒有問題，那恭喜你，就可以開始寫你的網頁了，如果有任何一個地方，出現了FaceBook的貼心提醒，說你什麼不行，基本上，他都會有提示，看不懂可以上網查，或在這邊問。

接著，最好是對JavaScript與基本的Html語法都有一定程度的了解(起碼知道怎麼呼叫Function)。

最後，就是實做的了，我所使用的程式碼都是可以從FaceBookDeveloper裡找得到，只不過把他整合起來在這邊做個記錄罷了：

<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      
      <title>My Facebook Login Page</title>      
      <script>
//引入Facebook的API，需要修改的部分，就是把你在第一步取得的APP ID貼上去 
 (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/zh_TW/all.js#xfbml=1&appId=APPID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

//取得登入者的資料。
function GetStatus(){
var
  div    = document.getElementById('me'),
  showMe = function(response) {
    if (response.status !== 'connected') {
      div.innerHTML = '<em>Not Connected</em>';
    } else {
      FB.api('/me', function(response) {
        var html = '<table>';
        for (var key in response) {
          html += (
            '<tr>' +
              '<th>' + key + '</th>' +
              '<td>' + response[key] + '</td>' +
            '</tr>'
          );
        }
        div.innerHTML = html;
      });
    }
  };
FB.getLoginStatus(function(response) {
  showMe(response);
  FB.Event.subscribe('auth.sessionChange', showMe);
});
}

    </script>
    </head>
    <body>
    
<div id="fb-root"></div>
 <div class="fb-login-button" data-show-faces="true" data-scope="email,user_checkins">使用Facebook帳號登入</div>
 <hr/>
 <input type="button" id="btn1" onClick="javascript:GetStatus();return false;" value="取得Facebook登入者資訊" text="1234" />
 <div id="me"></div>
  </body>
 </html>