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. 快速結帳頁面