Jayhsu's Note: 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

Jayhsu's Note

BloggerAds

2011年6月1日星期三

Facebook login-button的一些研究

2 則留言:

BloggerAds

2011年6月1日 星期三

Facebook login-button的一些研究

2 則留言:

2011年6月1日星期三