Facebook 帳號快速註冊 / 登入會員｜顧客登入設定

請您點選此連結進入 Meta for Developers 並使用您 Facebook 個人帳號登入。登入後，點選「我的應用程式 > 建立應用程式」開始來建立 Facebook 應用程式。

＊注意：由於 Meta for Developers 應用程式是綁定並建立在個人帳號下，為避免貴司內部人員權限異動，建議使用貴司可共同管理的 Facebook 個人帳號建立程式，並請留意「步驟十二」將貴司相關人員 Facebook 帳號都加入應用程式管理員，以便後續維護管理。

 

若在此前您尚未建立任何應用程式，則點擊我的應用程式後，會顯示「還沒有應用程式」的頁面，並邀請您建立第一款應用程式。

 

步驟二：建立 Facebook 應用程式

點擊建立應用程式後，頁面會詢問「想為應用程式新增哪些使用案例」，選擇「設定 Facebook 登入 > 繼續」。

勾選您的應用程式將用於哪個平台，完成後點擊繼續。

「應用程式顯示名稱」為必填項目，建議填入「商店/品牌名稱」。「應用程式聯絡電子郵件地址」則會在您進入此頁面時自動帶入您綁定的電子郵件地址。若您有 Facebook 企業管理平台，也可於下方「商業帳號」選填欄位選取您管理此應用程式的平台，最後點選建立應用程式。

 

點選後會出現「請重新輸入密碼」的彈跳視窗，請輸入密碼後點選提交 。

步驟三：新增「Facebook 登入」應用程式

接著會進入主控版頁面，點選頁面左側的「產品」。

 

於「Facebook 登入」欄位右側的下拉式選單點選「設定 > 快速入門」。

 

接著請選擇要將應用程式使用在「網站」中。

步驟四： 輸入商店網址

請在「網站網址」中輸入您商店首頁網址，例如：https://www.test123.com 或是 https://www.test123.com.tw 等，請注意：務必要填寫 https:// 開頭的安全性加密網址，輸入完畢確認後，請點選右下角的「保存 (Save)」按鈕，並待應用程式存取網址。

步驟五：進入應用程式「基本資料」中設定

接下來請到左側主控版，進入「設定 > 基本資料」完成應用程式網址、隱私政策網址、用戶資料刪除、應用程式圖示、服務條款、類別、網站網址欄位的設定。

 

1. 應用程式網域（必填）

這個欄位總共會需要輸入 2 個網址 (裸網域和包含子網域網址)，請依照以下方法取得並分別貼上後按下鍵盤的「Enter(Window) / Return(Mac)」鍵，當網址變成灰底灰字時才代表成功輸入。

• 如果您的商店使用獨有網址，例如：https://www.test123.com 
  請分別填入 2 個網址：www.test123.com 和 test123.com 
  
  
• 如果您的商店使用免費網址，例如：https://test456.shoplineapp.com
  請分別填入 2 個網址：test456.shoplineapp.com 和 shoplineapp.com

以上「紅字粗體的範例網址」請更換成您的商店網址，若不確定您商店獨有網址和免費網址，可進入商店前台首頁複製網址。 

＊注意：請填寫您的商店網址而非 SHOPLINE 官方網址。

 

2. 隱私政策網址（必填）

隱私政策為網站「將如何對待網路使用者個人資料」之聲明，商店中是否有揭露「隱私條款」為金流審核、Google 廣告投放審核、Facebook 應用程式的審核項目之一。

請您先回到「SHOPLINE 後台 > 網店設計 > 網店分頁」，取得商店隱私政策網頁連結放置在此欄位中。

 

若您尚未建立隱私政策分頁，您可選擇使用預設的「隱私政策」分頁或建立新分頁。

A. 使用預設的「隱私政策」分頁

可參考示範商店案例補充相關資訊（請依實際規範及需求撰寫）。設定完成後，在「2. 隱私政策網址」處填入網址。

• 如果您的商店使用獨有網址，網址類似於：
  https://www.test123.com/about/privacy-policy
  
  
• 如果您的商店使用免費網址，網址類似於：
  https://test456.shoplineapp.com/about/privacy-policy

以上「紅字粗體的範例網址」請更換成您的商店網址，若不確定您商店獨有網址和免費網址，可進入商店前台複製網址。 

＊注意：請填寫您的商店網址而非 SHOPLINE 官方網址。

 

B. 建立新分頁

可透過「文字分頁/進階分頁」的方式建立「隱私政策」分頁，撰寫格式同樣可參考示範商店案例（請依實際規範及需求撰寫，也請務必依照商店營運內容放上「資料之查閱與刪除」的相關資訊）。

並請確保該分頁的 SEO「標題」包含「隱私權政策 Privacy Policy」；「描述性 URL」 包含「privacy-policy」讓 Facebook 容易識別頁面具有隱私權的相關內容。設定完成後，在「2. 隱私政策網址」處填入網址。

• 如果您的商店使用獨有網址，網址類似於：
  https://www.test123.com/pages/privacy-policy

• 如果您的商店使用免費網址，網址類似於：
  https://test456.shoplineapp.com/pages/privacy-policy
  

以上「紅字粗體的範例網址」請更換成您的商店網址，若不確定您商店獨有網址和免費網址，可進入商店前台複製網址。 

＊注意：請填寫您的商店網址而非 SHOPLINE 官方網址。

＊請留意：如果您的商店正在使用 Facebook 帳號快速註冊/登入會員功能，且過去曾提供 Facebook 的「描述性 URL」 中包含「privacy-policy」分頁，請您留意請勿刪除此舊分頁，以免登入功能失效。
若要刪除過去自行建立的隱私權政策舊分頁，改用新分頁/預設分頁，請您記得到 Meta 
for Developers 以及過去顯示舊頁面的分頁中，手動更新相關網址。

 

3. 用戶資料刪除（必填）

從下拉式選單中選擇「資料刪除指示網址」。

下拉式選單的下方「你也可以提供連結」欄位可輸入商店首頁網址，如 https://www.test123.com 或 https://www.test123.com.tw。請務必填寫以 https:// 開頭的安全性加密網址。

 

4. 類別（必填）

請依照您的商店販售的商品或是服務類型，從選單中選取合適的選項。

 

5. 服務條款網址（建議填寫）

此網址連結會顯示在 Facebook 登入應用程式的視窗「應用程式條款」中，建議您編輯商店的預設分頁「條款與細則」，並依實際情況描述您商店的服務項目與交易細則，完成後將分頁網址連結放置在此欄位中。

 

6. 應用程式圖示（必填）

應用程式圖示會和「顯示名稱」一起出現在顧客登入流程，建議您上傳商店 Logo 或是品牌圖示完整呈現給顧客，減少顧客認為是詐騙或是非正式管道搜集用戶資料的疑慮。Facebook 建議上傳尺寸為 1024 x 1024 像素，檔案大小 5MB 以內的圖片。

 

7. 網站網址（必填）
接下來請往下滑，到「網站」的區塊，如果欄位空白請再次輸入商店首頁網址，例如：https://www.test123.com 或是 https://www.test123.com.tw 等，請注意：務必要填寫 https:// 開頭的安全性加密網址，輸入完畢確認後請點選右下角的「儲存變更」按鈕。

 

步驟六：完成商家驗證

自 2023 年 2 月 1 日起，如果您的應用程式需要進階層級存取權限，則需要完成商家驗證。

向下滑動頁面至商家驗證區塊，依照指示完成驗證流程。

＊請留意：若您沒有完成商家驗證，顧客於前台使用 Facebook 帳號快速註冊/登入會員時，會顯示「以下某些權限已不再獲得 Facebook 批准使用」。

 

步驟七：進入「Facebook 登入 > 設定」中設定

接下來回到 Meta for Developers 頁面，點選左側「Facebook 登入 > 設定」中的「用戶端 OAuth 設定」進行設定。

 

1. 將指定功能開關開啟

請開啟以下 4 個功能開關，設定完畢後可以與下圖比對確認

• 開啓「用戶端 OAuth 登入」
• 開啓「網路 OAuth 登入」
• 開啓「對重新導向 URI 使用 Strict 模式」
• 開啓「強制採用 HTTPS」 

 

2. 在「有效的 OAuth 重新導向 URI 」輸入連結
請依照以下方法取連結並貼到在「有效的 OAuth 重新導向 URI」欄位，貼上後按下鍵盤的「Enter(Window) / Return(Mac)」鍵，當網址變成藍底灰字時才代表成功輸入。

• 如果您的商店使用獨有網址，例如：https://www.test123.com 
  請在欄位中貼上：https://www.test123.com/users/auth/facebook/callback  
• 如果您的商店使用免費網址，例如：https://test456.shoplineapp.com
  請在欄位中貼上：https://test456.shoplineapp.com/users/auth/facebook/callback

以上「紅字粗體的範例網址」請更換成您的商店網址，若不確定您商店獨有網址和免費網址，可進入商店前台首頁複製網址。

＊注意：請填寫您的商店網址而非 SHOPLINE 官方網址。

完成設定後 請點選右下角「儲存變更」按鈕。

＊請注意：送出之後請再檢查，「對重新導向 URI 使用 Strict 模式」開關是否變成關閉（「否」的狀態），如果變成關閉（「否」的狀態）請再次開啟（將狀態改為「是」）並再次「儲存變更」即可。 

 

步驟八：確認應用程式資料授權狀態

請到「應用程式審查 > 權限和功能」確認 將 email 以及 public_profile 選項開啟取得進階的存取權限。

＊請留意：若是您的應用程式被 Facebook 停用，會需要先完成 Facebook 的審核才能開啟進階授權的開關，請您先確認應用程式的設置正確後先提交重新審核予 Facebook 確認。

 

步驟九：確認應用程式狀態

請查看畫面上方「應用程式編號」旁的「開關」，開關應為「開啟」以及會顯示「狀態：上線」這樣應用程式才有辦法使用。（如果開關尚未開啟，會顯示灰色的「調整中」狀態）

 

開啟開關時，請點選視窗中的「切換模式」，將您的應用程式調整為「上線」的狀態。如果應用程式的開關是「關閉」的話，顧客將無法使用 Facebook 帳號登入商店。

 

步驟十：準備好要輸入在商店後台的資訊

請到左側主控版，進入「設定 > 基本資料」， 點擊「應用程式密鑰」旁的「顯示」按鈕，讓其代碼顯示出來。將「應用程式編號」以及「應用程式密鑰」複製下來，接下來請回到 SHOPLINE 商店後台進行設定。

 

步驟十一：回到 SHOPLINE 商店後台設定

方法一

前往「商店後台 > 設定 > 顧客設定」點按「網店 Facebook 登入」右側開關按鈕。

開啟後將「應用程式編號（App ID）」及「應用程式密鑰（App Secret）」貼到對應的欄位中，並點按「連接」，接著再點按頁面右下角「更新」按鈕儲存設定，您的商店即可使用 Facebook 登入功能。

 

方法二

前往「商店後台 > 第三方服務 > Facebook > 網店應用」分頁。點按「連接 Facebook Developer 帳號」右側「連接」按鈕。

將「應用程式編號（App ID）」及「應用程式密鑰（App Secret）」貼到對應的欄位中，並點按「連接」。

點按「網店 Facebook 登入」右側開關按鈕，您的商店即可使用 Facebook 登入功能。

 

步驟十二：將貴司相關同仁 Facebook 帳號都加入管理員

由於 Meta for Developers 應用程式是綁定並建立在個人帳號旗下，為避免貴司內部人員異動建議使用貴司管理的 Facebook 個人帳號，並請新增貴司相關人員同為此應用程式管理員，以便後續維護管理。

步驟十三：測試是否能正常使用 Facebook 帳號一鍵註冊/登入功能

恭喜您設定完畢，最後請進入您的商店前台進行測試。

進入您商店的會員註冊/登入頁面，並點選「Facebook 註冊/登入」按鈕，會跳出 Facebook 視窗請求顧客登入並授權給您的應用程式（應用程式顯示名稱及圖示就是在這個流程出現的）。

這時候顧客必須先授權 Facebook 登入應用程式存取資料，才可使用 Facebook 登入功能，如果顧客選擇不授權的話，就無法使用 Facebook 登入功能。

 

＊此功能設定步驟較多，如有操作設定的問題，歡迎您再將問題畫面截圖下來提供給線上顧問，將會協助您處理。 

 

二、於結帳頁面顯示「Facebook 登入」按鈕

請確認您的商店已開啟「網店 Facebook 登入」功能，詳情可參考上述設定步驟十。

無論是透過上述何種方法，在以下頁面皆會出現「Facebook 登入」按鈕，顧客可直接點選按鈕登入：

＊注意：

• 上述 Facebook 登入按鈕的設定步驟不適用於 Shopper App。
  若您希望在 Shopper App 上顯示 Facebook 登入按鈕，請參考：Facebook 帳號快速註冊 / 登入會員｜Shopper App。 
• 只有透過 Facebook 註冊的顧客才能使用「 Facebook 登入」按鈕。

 

1. 會員註冊/登入頁面
   
   
   
2. 一般結帳頁面：購物車、填寫資料畫面
   
   
   
   
   
3. 快速結帳頁面
   

 

三、常見問題與排除方法

1. 若是顧客無法使用 Facebook 登入，該如何協助排除？

A. 顯示「無法使用此功能」的提示：

由於 Facebook 會不定期進行應用程式審核與更新，這邊會建議店家可以定時回到 Meta for Developers 的商店應用程式，查看左側「提示」內的「收件匣」查看 Facebook 最新提示，並依照訊息內容回覆 Facebook （尤其是 Facebook 向您發出的「資料使用情況檢查」）；並查看「設定 > 進階」中的 API 版本，將版本下拉選取最新版本。

 

請在應用程式「收件匣」務必回覆 Facebook 資料使用情況，勾選下列欄位後點選「繼續」提交回覆，以免遭到 Facebook 停用您的應用程式導致無法使用此登入功能：

 

B. 顯示「No authorization code」或是無法存取電郵等提示：

Facebook 註冊/登入時，商店會存取顧客 Facebook 帳號的姓名與電郵建立會員資料，若顧客使用 Facebook 登入時出現紅色 no authorization code 的授權提示，請引導顧客至 Facebook 帳號設定中確認有填寫姓名、電郵，並前往「Facebook > 設定及隱私 > 設定」確認「一般」的聯絡資料中有填寫姓名、主要聯絡電郵，以及在「應用程式及網站」同意授權登入功能，與收信完成認證。

 

遇到無法存取授權電郵的情況，也請您同時確認您的「Facebook 應用程式應用程式審查 > 權限和功能」確認 將 email 以及 public_profile 選項開啟取得進階的存取權限，這樣您的商店才能透過顧客 Facebook 帳號資料建立會員：

 

C. 登入時顯示需要確認進階權限：

Facebook 應用程式版本、審核的部分，會通知您需要確認開啟應用程式的進階授權取得顧客的資料，若是您查看到以下的訊息：

請您至應用程式的「應用程式審查 > 權限和功能」確認 將 email 以及 public_profile 選項開啟取得進階的存取權限。

 

D. 顯示「Invalid credentials」的提示：

若顧客使用 Facebook 登入時出現紅色 Invalid credentials 的提示，請至「應用程式設定 > 進階」關閉「應用程式驗證」，關閉後應就不會顯示此提示。

 

舊版設定介面：

新版設定介面：

 

E. 上述情況皆排除仍無法使用：

若上述三個情況已經確認排除，但是顧客還是無法登入使用，請您重新依照此文章的設定步驟確認 Facebook 應用程式的「設定欄位」與「上線狀態」，若有問題也請您提供相關的截圖從後台聯繫線上顧客協助您。

 

2. 我已有 Facebook 快速登入功能，但為什麼登入在 Meta for Developers 上找不到我的應用程式？應用程式的編號怎麼與後台不同？

若商店已有 Facebook 快速登入功能，表示已經在 Facebook 建立過快速登入的應用程式，Meta for Developers 應用程式是綁定個人 Facebook 帳戶管理的，因此若使用與先前不同人的 Facebook 帳戶登入，也並未有原先應用程式的管理權限時，在 Meta for Developer 中會找不到安裝在商店的應用程式。

這時會建議您請原先設定該功能的同仁協助登入 Meta for Developer 並調整商店的應用程式，並參考「步驟十一：將貴司相關同仁 Facebook 帳號都加入管理員」將貴司相關同仁都納入管理員，以便後續維護與管理。

 

3. 我的應用程式為什麼會被 Facebook 停用？申訴後要等候多久呢？

Facebook 登入功能的運作是由店家的應用程式提供，若是您的應用程式沒有依照上述的設置完成造成顧客無法使用、隱私政策不完整等情況（有時也會有誤判的情形），Facebook 偵測後可能會向您的應用程式提出警告並停用，這時候會建議您詳讀訊息中的內容確認您的應用程式設置完整。

確認您的應用程式已經符合規範、設置完整後，您可以透過應用程式中的申訴管道請 Facebook 協助您重新審核，通過後您商店的 Facebook 登入功能才能重新運作，但是我們無法確認 Facebook 審核的時間，若申訴後等候時間較久，您可以重新提出申訴或聯繫 Facebook 確認審核的進度，或是考慮參考文章步驟重新建立一個新的應用程式讓顧客重新授權後使用。

 

4. 我收到 Facebook 通知我的隱私政策不完整，請問要如何修正？

Facebook 審核時會特別注重應用程式網址欄位以及隱私政策的描寫，若是不完整要請您參考此篇文章的「步驟五：基本資料」中的第二點（撰寫格式可參考：示範商店案例），確認您網站隱私政策網頁的內容以及是否有提交到應用程式中的欄位，請您確認完畢後回覆 Facebook 訊息請他們重新為您審核。