BloggerAds

2011年6月1日 星期三

Facebook login-button的一些研究

若想使用Facebook的login-button元件,可參考Facebook Developers Docs,下列這段就是從範例中節錄下來的,可直接參考使用:
<html>
    <head>
      <title>My Facebook Login Page</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script src="http://connect.facebook.net/en_US/all.js"></script>
      <script>
         FB.init({ 
            appId:'YOUR_APP_ID', cookie:true, 
            status:true, xfbml:true 
         });
      </script>
      <fb:login-button perms="email,user_checkins">Login with Facebook</fb:login-button>
</body> 
</html>
繁體中文語系的人,可以把include的網址改成
http://connect.facebook.net/zh_TW/all.js
其中login-button有下列 官方公佈的屬性 可以使用:

  • show-faces - 是否顯示Facebook的圖像(照片)
  • width - 設定元件的寬度 (注意!不是按鈕的寬度),預設為200 
  • max-rows - 設定圖像(照片)顯示最大的列數,預設為1 (不知道可以做什麼用? 試了沒效果)
  • perms - 要求Facebook使用者授權的項目,詳細屬性可至 這裡 查看
除了上面這些屬性,其實還有一些屬性是可以用的:

  • autologoutlink - 是否顯示 登出 按鈕,true: 若使用者登入,會顯示登出;false: 若使用者登入,還是顯示登入。
  • size - 按鈕大小,可使用:small、medium、large、xlarge。
  • length - 按鈕內預設文字的長度,ex. short:登入、long:用Facebook登入。若是自訂文字的話,這個屬性是沒作用的。
  • background - 指定按鈕的背景色,可使用white、light、dark。預設為light
如果要更改按鈕上的字,可以照下面這樣改,這樣就可以修改按鈕中的文字了。
<fb:login-button>[在這輸入文字]</fb:login-button>
但若有將上面的autologoutlink設為true,且login-button該變為「登出」時,login-button中的文字卻會一樣是自已輸入的登入文字,這點還蠻奇怪的,我還沒找到方法解決這個問題。

若要在login-button登入後執行一些動作,可以在FB.init後加上:

FB.Event.subscribe('auth.login', function(response) {
            //打上你的程式碼
          });

這樣就可以在login之後做您想做的事,同理,若要在登出後做某些事,只要把 auth.login 改成 auth.logout 即可

 --------------------------------- 接下來要說自訂按鈕的用法 ----------------------------------------

上面的用法,是直接使用Facebook內定的按鈕,只要放上FBML Tag即可使用。但若如果要自訂登入按鈕的話,可以直接寫一個function,如:
function fbLogin() {  
      FB.login(function(response) {
       if (response.session) {
         if (response.perms) {
          //使用者已登入Facebook成功,且已授權你的應用程式存取
         } else {
           //使用者已登入Facebook成功,但未授權你的應用程式存取
         }
       } else {
         //使用者未登入成功
       }
     }, {perms:'publish_stream,offline_access'}); //設定需要授權的項目
  }
接著再放入一個Html Tag,如button,在onclick中呼叫function即可:
<input type='button' value='登入' onclick="fbLogin();"/>
要注意的是,若你放的是input tag,千萬要切記啊,type不可以使用submit,否則當你按下按鈕,跳出Facebook登入視窗,並輸入帳號密碼登入後,你只會看到一個白色的畫面,標題上面寫著「XD Proxy」,然後你的function連動都不會動,但卻已成功登入進Facebook。

PS.今天卡了一個下午就是在查這個問題,google查的都沒有效 (facebook login-button popup blank),就在要放棄時,想說該不會是submit的問題,結果就好了,我也不知道是什麼原因造成這結果.....

參考:
http://developers.facebook.com/docs/
http://forum.developers.facebook.net/viewtopic.php?id=72137

2 則留言:

  1. 你好,請問登入後變成登出
    實作登出的程式碼要放在哪裡
    該如何撰寫呢
    謝謝

    回覆刪除
  2. 1.將 fb:login-button 的屬性 autologoutlink設為true。
    2. JavaScript中加入:
    FB.Event.subscribe('auth.logout', function(response) {
    //打上你的程式碼
    });

    這樣就行了

    回覆刪除