[宅] facebook開發筆記 - javascript SDK(上)

前面兩篇講到了facebook API，現在我們來講講SDK。

API(Application Programming Interface)直譯成中文是"應用程式介面"：只要藉由對方提供的介面丟東西進去就會回傳結果給你。
SDK(Software Development Kit)比較不一樣的是他需要在本機安裝他所提供的函式庫實際跑在本機端，而不是單純使用遠端的服務。

facebook javascript SDK

facebook目前提供JavaScript SDK、PHP SDK、iOS SDK、Android SDK四種開發環境，因為我目前只做web開發，而且也不只用php，所以選擇javascript SDK來做研究、開發。

安裝函式庫&初始化

要使用javascript SDK，必須先include進函式庫，我們來看看以下範例：

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID from the App Dashboard
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File for x-domain communication
      status     : true, // check the login status upon init?
      cookie     : true, // set sessions cookies to allow your server to access the session?
      xfbml      : true  // parse XFBML tags on this page?
    });

    // Additional initialization code such as adding Event Listeners goes here

  };

  // Load the SDK's source Asynchronously
  (function(d, debug){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
     ref.parentNode.insertBefore(js, ref);
   }(document, /*debug*/ false));
</script>

第一部份(藍字) - "fb-root tag"

只要有facebook javascript SDK的地方就要有fb-root。
但是你會發現即使不加它，程式好像也能正常執行，這是因為在初始化時SDK找不到fb-root，就會幫你新創一個，並在console log中顯示"The "fb-root" div has not been created, auto-creating."
在facebook的官方文件中有提到，若將fb-root設為display: none 或 visibility: hidden，在萬惡IE中可能會不正常運作，但是基本上你也不用考慮它會影響排版，因為初始化時就會把它設為position:absolute且top:-1000之類的，絕對不會讓你看到。所以這部份很單純的嵌入這個小小的div就好。

第二部份(綠字) - 初始化設定

這部份很關鍵，第一部份不用改、第三部份也可以不用改，但是這個地方你至少必須填入你的appId，不然是不能work的，其他參數可以不用改沒關係。
雖然說除了appId以外的參數保留預設值就可以了，但是channelUrl似乎滿值得一提的，所以我在網路上查了一下，在stackoverflow上找到了一個不錯的解釋：

The channel file is to provide a way to do cross domain communication between FB's servers and your own. The reason for this is their tight control over access tokens. You must authenticate a redirect url and app id to retrieve this access token. In order for them to pass you the token, they hit your URL with the access token in the hash. With the Channel URL, they get to pass this token to themselves (their JavaScript running on your domain).
This channel file can then communicate the access token to your active page.

facebook提供給開發者的大部分服務幾乎都得靠access_token來驗證權限，而要取得access_token必須要經過facebook的兩個檢查：redirect url和app id，他們必須和你在facebook developer那邊所註冊的資料是吻合的(redirect url得在登記的domain下)。也因為這個原因，在沒有預設chanel的狀況下，SDK會強制在你的頁面塞入一個隱藏的iframe以便在你的頁面載入social plugins，這樣一來會造成載入時間長以及效率低落的問題。所以為了提高效能，facebook建議開發者建立http://www.yourdomain.com/channel.html這個檔案，檔案中只要有一行程式碼即可：

<script src="//connect.facebook.net/en_US/all.js"></script>

第三部份(紅字) - 載入facebook javascript SDK

其實只要照範例把這段貼上去即可，不太需要變動它。
這段code主要是檢查document中是否已載入了SDK，如果沒有就嵌入SDK的js檔。在這段code裡面你會看到它所載入的js檔是"//connect.facebook.net/en_US/all.js"，其中的en_US是代表洋人美語語系，若要改成台灣用的繁中語系，只要把en_US換成zh_TW就好了。

2012年11月5日星期一