JavaScript SDK - 範例

請參閱我們的快速入門指南，瞭解如何載入和初始化 Facebook JavaScript SDK，還有我們的進階設定指南，瞭解如何自訂您的建置。接下來，試用我們的範例來使用 SDK：

• 觸發「分享」對話方塊
• Facebook 登入

觸發「分享」對話方塊

「分享」對話方塊允許用戶從頁面發佈連結到動態時報上，或建立開放社交關係圖動態。使用 JavaScript SDK 所顯示的對話方塊會依照載入的內容自動設定格式，例如行動版網頁或桌面版網頁。

在此向您展示如何使用 SDK 的 FB.ui() 方法來叫用非常基本的「分享」對話方塊。在 FB.init() 呼叫後，於基本設定程式碼中新增這段程式碼片段：

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/'
}, function(response){});
    

現在，您重新載入頁面時會在頁面頂端看到「分享」對話方塊出現。不論對話方塊是因為張貼動態或取消而關閉，關閉之後就會觸發回應函數。

請參閱 FB.ui 參考文件，查看可用參數的完整清單和回應物件的結構。

Facebook 登入

「Facebook 登入」允許用戶使用 Facebook 的身分來註冊或登入您的應用程式。

我們提供一份完整指南，告知如何使用 JS SDK 實作「Facebook 登入」。但現在讓我們使用一些基本的程式碼範例，讓您瞭解其運作方式。在您的原始 FB.init 呼叫後方，插入以下程式碼：

FB.login(function(response) {
    if (response.authResponse) {
     console.log('Welcome!  Fetching your information.... ');
     FB.api('/me', function(response) {
       console.log('Good to see you, ' + response.name + '.');
     });
    } else {
     console.log('User cancelled login or did not fully authorize.');
    }
});
    

請參閱登入指南以瞭解詳細資訊，但是在重新載入頁面時，如果尚未授予應用程式權限，應該會看見您應用程式的「登入」對話方塊。