使用 WooCommerce Social Login 實現 Facebook 臉書登入
在 WordPress 網頁設計的領域裡,我們會很常需要使用到 Woocommerce 購物網站的模組來實現購物網站基本的需求(延伸閱讀: 最大的電子商務架站系統 Woocommerce),使商家可以在WordPress的網站上販售商品。
不過,Woocommerce本身雖然有一些基本的功能可以實現,卻有很多亞洲地區基本的消費習性並沒有精確掌握,因此實用的功能也會相對比較少,這時就需要透過 WordPress 外掛插件來彌補這些功能。
其中,最常見的就是社群會員登入,利用LINE、Facebook、Instagram等等社群平台來實現登入,因為最快速而且最方便,可以大幅提升消費者註冊的意願,進而讓商家留下消費者資訊做進一步的行銷!
這時我們會需要使用Woocommerce自行開發的 Woocommerce Social Login 這套外掛,裡面除了LINE以外,其他Twitter、Google與Facebook臉書等等社群平台皆有提供快速登入,非常方便,那我們接下來就看看怎麼使用吧!
一、建立Facebook臉書應用程式及臉書登入
首先,我們需要有一組臉書的應用程式,所以我們先到臉書的開發平台 Facebook for Developers ,選擇右上角的「我的應用程式」,然後建立一個應用程式。
接著我們選擇企業商家然後按繼續。
接下來就是開始輸入詳細資料,顯示名稱通常只要好辨認即可,然後商業帳號是可以連結你的臉書商用帳號,點建立應用程式。
我們到「設定」>「基本資料」,會看到右邊有許多欄位,我們就直接把該填寫的欄位填一填,應用程式網域就是你的網站網址,而裡面有個特別需要注意的是隱私權政策網址及服務條款網址。
這個通常在你建立購物網站時應該就會被規劃進去的,只是你需要事先將這兩個頁面建立起來,然後再將網址複製填入到這兩個欄位當中。
而應用程式圖示通常我們會按照它建議的格式使用商家的Logo,然後選擇你自己或你的商家。
類別的地方就依照你的產業性質選擇。
都輸入完畢以後,就點選右下角的「儲存變更」。
再往下滑動,可以填寫商家的一些基本資料,名稱、電子郵件及街道地址等等,填寫完畢後一樣按下儲存變更。
在下面會看到一個「新增平台」的按鈕,點下去後我們選擇”網站”(Website)然後進行下一步。
我們點選左邊商品的「新增商品」,然後選擇Facebook登入的設定。
然後我們再回到設定的基本資料,記住應用程式編號以及應用程式密鑰,我們之後會用到。
我們可以先將上方的調整中切換為正式啟用的狀態,然後儲存變更。
接著會看到有一堆OAuth登入的選項,基本上都保留它原來的預設值即可,我們最主要需要輸入的是「有效的OAuth重新導向URL」這個欄位。
裡面需要填入的基本上就是Woocommerce預設的Endpoint,也就是Woocommerce幫你建立的頁面網址。
1. 首頁網址
2. 我的帳戶網址
3. 結帳頁網址
4. 訂購成功網址
5. API網址
裡面的API網址你可以在網站後台內的 Woocommerce > 設定 > Social Login > Facebook 裡面可以找得到哦!
填入之後,一樣儲存變更。
然後我們可以回到網站Social Login設定的地方將剛剛的應用程式編號及密鑰分別貼入App ID及App Secret裡。
再啟用Facebook即可。
這樣一切就大功告成囉!