啟動一鍵登入 Facebook 的功能,讓你的顧客可以使用 Facebook 帳戶便捷地登入你的網店成為會員,不需經過繁複的註冊程序,提供便利的購物體驗。
此為Facebook開發之擴充套件,需註冊Facebook Developers帳號進行串接設定,meepShop僅提供與Facebook登入串接之服務。若您想要在您商店使用該服務,需要先建立好 Facebook 應用程式再回到商店後台進行串接,現在就看著以下操作來設定吧!
提醒您:當串接完成後,請務必留意您Facebook 登入應用程式權限與使用情況,Facebook 會不定時發出的通知與資料審核的訊息,請您需依造期限內回覆FacebooK,以免您的應用程式遭 Facebook 停用。
1. Facebook登入設定
啟動一鍵登入 Facebook 的功能,讓你的顧客可以使用 Facebook 帳戶便捷地登入你的網店成為會員,不需經過繁複的註冊程序,提供便利的購物體驗。
此為Facebook擴充套件,需註冊Facebook Developers帳號進行串接設定,需於meepShop後台安裝「FB登入」之擴充功能,填入Facebook串接之App ID/ Secret,才能啟用此功能。
Step 1 : 請至https://developers.facebook.com/ 登入後點選右上角的「我的應用程式」
Step 2 : 登入後點選右上角的「建立應用程式」,若您已經建立過,請直接點選要使用的應用程式
Step 3 : 選擇第一項「設定 Facebook 登入」 → 繼續
Step 4 : 「應用程式顯示名稱」為必填項目,建議填入「商店/品牌名稱」,「應用程式聯絡電子郵件地址」則會在您進入此頁面時自動帶入您綁定的電子郵件地址。
Step 5 : 進入主控版頁面,請點選頁面左側的「產品」
於「Facebook 登入」欄位右側的下拉式選單點選「設定 > 快速入門」
請選擇將應用程式使用在「網站」中使用,如下圖
接著輸入您商店前台的網址 Ex : https://www.meepshop.com,或無自訂網域請輸入meepShop提供之免費網址 ex: https://您的Cname.meepshoper.com,並按下保存save
注意:務必要填寫https://開頭的安全性加密網址,才能設定成功。
Step 6 : 進入主控版 設定 → 基本資料 中依序填寫
① 應用程式網域 (必填):請填首頁網址,若您有自訂網域請直接填入您購買的網域ex: https://www.meepshop.com/;若使用meepshop提供之免費網域,請貼入您商店前台網址ex: https://您前台的商店Cname.meepshoper.com
② 隱私權政策 (必填):網站如何對待網路使用者個人資料之聲明,網路使用者同意或信賴隱私權政策之聲明,即具有契約效力;Facebook 為提升對 Facebook 帳戶的保護,針對外部網站隱私政策更加嚴格審核,請您至您網站「隱私政策 Privacy Policy」頁面取得網址,並貼上此處。
③ 用戶資料刪除 (必填):請填首頁網址,若您有自訂網域請直接填入您購買的網域ex: https://www.meepshop.com/;若使用meepshop提供之免費網域,請貼入您商店前台網址ex: https://您前台的商店Cname.meepshoper.com
④ 類別 (必填):請下拉選擇您商店的所屬的類別。
⑤ 聯絡電子郵件 (選填):建議填寫您的客服信箱。
⑥ 服務條款網址 (選填):請您至您網站「服務條款」頁面取得網址,並貼上此處。
⑦ 應用程式圖示:上傳您的LOGO或是品牌圖示,顧客在登入時,應用程式圖示和顯示名稱會一起出現,建議上傳尺寸為 1024 x 1024 像素,檔案大小 5MB 以內的圖片。
⑧ 應用程式用途 (必填):如您是為自己店家建立的,請點選「你自己或你的商家」
填寫完 ① 至 ⑧ 欄位 儲存變更後顯示如下,FB系統會自動幫您偵測並更改應用程式網域
Step 7 : 移至最下方網站網址的欄位,如該欄位空白,請填入您商店前台的網址,填入後請按右下方儲存變更。
Step 8 : 自 2023 年 2 月 1 日起,如果您的應用程式需要進階層級存取權限,則需要完成商家驗證。
請至驗證-> 商家驗證區塊,依照指示完成驗證流程
** 若未完成商家驗證,顧客於前台使用 Facebook 帳號快速註冊/登入會員時,會顯示「以下某些權限已不再獲得 Facebook 批准使用」
Step 9 : 請至主控版 產品 → 可新增的產品 → 建立新的應用程式
建立應用程式類型選擇「消費者」 → 繼續
「應用程式顯示名稱」為必填項目,建議填入「商店/品牌名稱」,「應用程式聯絡電子郵件地址」請填寫您的郵件信箱 → 建立應用程式
應用程式商品選擇 Facebook 登入「設定」
請選擇應用程式使用在「網站」中使用
接著輸入您商店前台的網址 Ex : https://www.meepshop.com,或無自訂網域請輸入meepShop提供之免費網址 ex: https://您的Cname.meepshoper.com,並按下保存save
注意:務必要填寫https://開頭的安全性加密網址,才能設定成功。
Step 10: 進入 Facebook 登入 → 設定
1. 開啓「用戶端 OAuth 登入」
2. 開啓「網絡 OAuth 登入」
3. 開啓「對重新導向 URI 使用 Strict 模式」
4. 並在有效的 OAuth 重新導向 URI 輸入「https://www.您商店首頁的網域/fbAuthForLine」+「https://www.您商店首頁的網域/fb-login」(以上藍色的字需請您改為您商店的自訂網域)
例如,您的網域為www.abc123.com, 請於該欄位輸入 https://www.abc123.com/fbAuthForLine 及 https://www.abc123.com/fb-login
(因應FB更新安全性規定,前台網址一定要有有效的https:// )
5. 開啟「Login with the JavaScript SDK」並於JavaScript SDK允許的網域輸入「https://www.您商店首頁的網域」
6. 按右下方儲存變更
Step11 : 請您至 應用程式審查 → 權限和功能,將 email 以及 public_profile 選項開啟「取得進階的存取權限」
** 請留意如未完成 Step.8 商家驗證 步驟,無法取得進階權限層級
將 email 以及 public_profile 選項開啟「取得進階的存取權限」
請勾選同意後 → 確認
請檢查使用權限層級出現綠色 Advanced Access,應用程式審查狀態為「已自動授予」表示取得進階的存取權限
如狀態顯示「需要驗證」表示您尚未通過商家驗證,需完成商家驗證才能啟用
Step 12 : 點選頁面狀態旁的開關,會跳出視窗與您確認是否切換成上線模式? 請按切換模式
將狀態調整為「開啟」,並顯示「上線」。
Step 13 : 回到設定 → 基本資料頁面,點擊「應用程式密鑰」旁的「顯示」按鈕,讓密鑰代碼顯示出來,並複製該 「應用程式編號」及「應用程式密鑰」,貼回至meepShop後台做串接
Step 14 : 回到meepShop後台「設定→第三方設定→FB整合功能」將「應用程式編號」及「應用程式密鑰」貼回,並將下方 按右上方儲存即設定完成。
Step 15 : 以上設定完成後,可於前台使用FB登入的功能,請務必提供給顧客有含安全憑證https 的前台網址 ,才能使用FB登入喔!!
提醒您:串接後,請務必留意您Facebook 登入應用程式權限與使用情況,Facebook 會不定時發出的通知與資料審核的訊息,請您需依造期限內回覆FacebooK,以免您的應用程式遭 Facebook 停用。
2. Facebook登入設定影片說明
3. Facebook登入為何無法使用?
(1) API版本未升級
由於facebook for developers 不定期會做更新,例如圖形API版本升級,系統將會寄出升級提醒通知郵件。
若您許久未做更新,將可能導致無法登入的情況
請您務必至Facebook for developers 確認版次是否為最新版本
查看版本:①進入應用程式-> ②設定-> 進階 ③更新到API最新版本
(2) 數據使用檢查未授權
Facebook Developers近期推出數據使用檢查,此過程仍然需要您查看您管理的每個應用程序以及您有權訪問並確認平台使用符合Facebook平台條款和開發人員政策。
進入應用程式-> 請確認是否出現以下紅框內訊息,
請點擊立即開始,依照步驟完成操作
完成後,即可重新回到前台使用Facebook登入看看。
** Facebook for Developers不定期會有版本、資訊需要更新或認證
您可於提示-> 收件匣中確認是否有未更新的項目,並於此處更新,避免因久未更新導致登入失效
如更新後仍無法使用Facebook登入,建議您重新建立應用程式,將新建立的「應用程式編號」及「應用程式密鑰」貼回到meepShop後台 第三方設定→ Facebook 登入,儲存後即完成。建立應用程式的步驟如上述的 1.Facebook登入設定
(3) 顯示需要確認進階權限
若於Facebook登入後,出現下方權限錯誤訊息
請您至 應用程式審查-> 權限和功能,確認 將 email 以及 public_profile 選項開啟「取得進階的存取權限」
請勾選同意後-> 確認
請檢查使用權限層級出現綠色 Advanced Access,表示已開啟取得進階的存取權限
(4) 安卓手機無法使用FB登入
目前安卓手機無法使用FB登入,主要為Facebook監控發現 Android 內嵌瀏覽器(也稱為 Webview)的網路釣魚嘗試持續增加,因此從2021 / 8 月開始,將不再支援 Android 內嵌瀏覽器的「Facebook 登入」驗證。
4. Facebook Store設定
meepShop與Facebook 合作串接「商店」功能,讓你可以將商品同步曝光在 Facebook粉絲頁面,消費者若對產品有興趣,立即點擊FB商店內的商品就可以回到你的網站購買。
在開始設定之前,請您需確認你的粉絲專頁範本是否選為『購物』,請調整為『購物』範本後開始以下設定
FB粉絲專頁範本說明 https://www.facebook.com/help/393123551046542
Step 1 : 開啟粉絲頁商店頁籤
進入粉絲頁,選擇『 更多- 編輯頁籤』
選擇範本需使用購物,才會有「商店」頁籤,
並請開啟「商店」頁籤的開關
建議將商店的頁籤,點選前方拖移按鈕,將頁面移至上面一點
FB粉絲頁首頁,上方即會出現「商店」的頁籤按鈕
點擊前往商務管理工具
選擇『Facebook』後按繼續
設定結帳方式為『在其他網站上結帳』,接著按繼續
設定銷售管道,請選擇您的粉絲頁,接著按繼續
請選擇您的FB企業管理平台之商業帳號,接著按繼續
如之前沒有設定過商品可選擇新建立目錄
設定您商品送貨的地址,選擇『台灣』,如有販售至國外地區可另外進行勾選,接著按繼續
請再次確認您的設定,如無誤點選『完成設定』
Step 2 : 於FB商務管理平台,新增商品到目錄
進入FB 商務平台,點擊『新增商品』
請選擇『資料摘要』按繼續
選擇『是』使用試算表檔案,接著按繼續
上傳檔案上傳 請選擇使用『網址』
檔案代管位置的網址: 請進入meepShop後台→行銷-廣告分析→Facebook →點選動態廣告下方的「複製動態網址」按鈕
在將複製動態網址 貼回FB檔案代管位址的網址欄位內,按下方繼續
設定更新資料的時間,請選擇「每天」早上7:00 GMT+08:00→按右下方「繼續」,屆時FB商店將會每天早上7:00執行商品的更新
預設幣別 : 請選擇「TWD-新台幣」,按下方「儲存摘要並上傳」
上傳完成後將會顯示新增商品數量的結果,就表示已成功上傳商品。
如上傳後有出現商品錯誤訊息,請您需檢查您商品的資訊是否有齊全,如商品沒有價格等,請您依造FB提供的錯誤資訊進行後續修正
待FB審核後,回到商品,則會顯示剛已上傳的商品資訊
接著點選左側『總覽』,按下『發佈商店』
會進入商店 頁面顯示的預覽畫面,請點擊右下方『發佈更新』
發佈商店並更新商品後,點擊左側商店,可確認商店『已啟用』的狀態,表示FB也通過您商店和商品的審核囉!(P.S如狀態無法變為已啟用請需等待FB審核通過)
接著,回到您的粉絲頁 → 點進「商店」的頁籤,將可查看剛剛匯入的商品
點選商品後將會顯示商品照片及售價,並顯示「在網站上結帳」
引導消費者到您的meepshop商店進行結帳
5. 移除Facebook商店頁籤
若您後續不想要在FB粉絲頁顯示商店,可點選粉絲頁「更多-編輯頁籤」
進入業僉編輯,將商店頁籤「關閉」即可