社團外掛程式可讓用戶從電子郵件訊息中或網頁上的連結加入您的 Facebook 社團。
https://developers.facebook.com/docs/plugins/group-plugin/#web
電子郵件專用社團外掛程式
電子郵件專用社團外掛程式可讓電子郵件的收件者,透過電子郵件訊息加入您的社團。您可以產生程式碼,然後將程式碼加入電子郵件服務供應商的訊息中,接著只要一鍵就能向收件者傳送訊息。
- 僅可在電子郵件行銷活動軟體中使用這段程式碼。請勿在電子郵件用戶端的訊息中使用提供的程式碼。
- 請勿在網頁中使用這段程式碼。
網頁專用社團外掛程式
網頁專用社團外掛程式是一種外掛程式,可用來在您的網頁中新增按鈕,讓每個人都能加入您的 Facebook 社團。此外掛程式使用 Facebook JavaScript SDK,在您的網頁上顯示按鈕。當用戶選取此按鈕時,將可加入您的社團。
- 請勿在電子郵件訊息或電子郵件行銷活動軟體中,使用此外掛程式的程式碼。
逐步說明請執行下列的步驟,以將外掛程式加到您的網頁。 1.進行 Facebook 應用程式的設定- 在您應用程式主控板的設定 > 基本中,選擇 + 新增平台。在選擇平台中,選擇網站。
- 在網站的網址中,輸入您想讓外掛程式出現的網址。
- 在應用程式網域中,輸入您網站的網域名稱。
- 選擇位於視窗底部右側的儲存變更。
2.產生外掛程式的程式碼下列的加入按鈕程式碼配置器會產生必要的程式碼,您可將這些程式碼加到您的網頁。在社團網址中,輸入您社團的網址,並調整設定,例如外掛程式按鈕的 width。選擇取得程式碼,產生您可以複製到網頁上的程式碼。
2.設定 Facebook JavaScript SDK
Facebook JavaScript SDK 沒有任何需要下載或安裝的獨立檔案,您只需要將一小段一般的 JavaScript 置入 HTML 中,就會以非同步的方式將 SDK 載入頁面中。非同步載入是指不會阻擋頁面中其他元素的載入。
以下程式碼片段會提供 Facebook JavaScript SDK 基本版,選項會設定為最常見的預設值。在每一個要使用 Facebook 分析工具的頁面上,將以下程式碼片段直
接插入開頭的 <body> 標籤後方。以應用程式編號取代 {your-app-id},並以鎖定的 API 版本取代 {api-version}。目前的版本為
v3.2。
- <script>
- window.fbAsyncInit = function() {
- FB.init({
- appId : '{your-app-id}',
- cookie : true,
- xfbml : true,
- version : '{api-version}'
- });
-
- FB.AppEvents.logPageView();
-
- };
- (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 = "https://connect.facebook.net/en_US/sdk.js";
- fjs.parentNode.insertBefore(js, fjs);
- }(document, 'script', 'facebook-jssdk'));
- </script>
複製代碼 3.檢查登入狀態
載入您的網頁時,第一個步驟是確認用戶是否已經使用「Facebook 登入」來登入您的應用程式。呼叫 FB.getLoginStatus 來啟動這個程序。這個函式會觸發對 Facebook 的呼叫來取得登入狀態,接著呼叫您的回呼函式來傳回結果。
以下擷取自上述程式碼範例,為在頁面載入時用來檢查用戶登入狀態所執行的部分程式碼:
- FB.getLoginStatus(function(response) {
- statusChangeCallback(response);
- });
複製代碼
提供給回呼的 response 物件含有數個欄位:
- {
- status: 'connected',
- authResponse: {
- accessToken: '...',
- expiresIn:'...',
- signedRequest:'...',
- userID:'...'
- }
- }
複製代碼
status 說明此應用程式用戶的登入狀態。狀態可能為以下其中一項: - connected - 這位用戶已登入 Facebook,也已經登入您的應用程式。
- not_authorized - 這位用戶已登入 Facebook,但尚未登入您的應用程式。
- unknown - 這位用戶沒有登入 Facebook,因此您無法得知用戶是否已登入您的應用程式,或者之前已呼叫 FB.logout(),因此無法連結至 Facebook。
如果狀態是 connected,就會包含 authResponse,且由以下資料所構成: - accessToken - 含有這位應用程式用戶的存取權杖。
- expiresIn - 以 UNIX 時間顯示權杖何時到期並需要再次更新。
- signedRequest - 已簽署的參數,其中包含這位應用程式用戶的資訊。
- userID - 這位應用程式用戶的編號。
您的應用程式知道這位應用程式用戶的登入狀態後,就會進行以下其中一項動作: - 如果用戶已登入 Facebook 和您的應用程式,就會將用戶重新導向至已登入的應用程式體驗。
- 如果用戶沒有登入您的應用程式,或是沒有登入 Facebook,則使用 FB.login() 以「登入」對話方塊提示用戶,或向用戶顯示「登入」按鈕。
4.新增「Facebook 登入」按鈕
將「登入」按鈕加入您的頁面非常容易,參閱「登入」按鈕文件,並依照您要的方式設定按鈕。然後點擊取得程式碼,即會顯示所需程式碼,以便在您的頁面上顯示這個按鈕。
按鈕上的 onlogin 屬性是用於設定檢查登入狀態的 JavaScript 回呼,以瞭解用戶是否已經成功登入:
- <fb:login-button
- scope="public_profile,email"
- onlogin="checkLoginState();">
- </fb:login-button>
複製代碼
<fb:login-button
scope="public_profile,email"
>
</fb:login-button>
- function checkLoginState() {
- FB.getLoginStatus(function(response) {
- statusChangeCallback(response);
- });
- }
複製代碼 恭喜,您已經將「Facebook 登入」新增至您的網站!請務必查看其他說明文件頁面,以取得更多進階指南。
實作資料刪除回呼share-external
實作資料刪除回呼,以回應用戶從 Facebook 刪除其資料的要求。
「登入」對話方塊share-external
使用您自己的按鈕叫用「登入」對話方塊,而非使用「Facebook 登入」按鈕。
存取權杖share-external
使用「Facebook 登入」為您的網站產生的存取權杖。
權限share-external
管理您的應用程式可透過「Facebook 登入」存取的資料。
應用程式審查share-external
視您要求使用「Facebook 登入」的用戶所提供的 Facebook 資料而定,您可能需要在應用程式上線前,將應用程式提交審查。
|