如何 WooCommerce 會員快速登入 / 註冊+社群分享(FB & Google)?

如何 WooCommerce 會員快速登入 / 註冊+社群分享(FB & Google)?

不論是 架設品牌網站購物網站製作 等 ..,有許多類型的網站都需要有會員註冊的功能,除了方便後續的購物流程,也能進一步留下訪客資料,未來才有機會做再行銷。

WordPress 雖有許多社群快速註冊外掛,但通常免費版一來是有許多限制,二來是能顯示的地方不夠多。

WooCommerce 電商 為例子,如果要在 結帳表單流程,要放上一個社群登入功能,這對於許多社群登入外掛,通常是進階版才有的。

這篇文章,會和大家分享 Super Socializer 外掛,它的免費版功能就很完整,整合了「 會員快速登入 / 註冊(Facebook+Google) 」、「 社群分享 」、「 社群評論 」這三大項功能。

假如這些都是你想要的功能,那只需安裝這款外掛就能一次滿足,但如果你只需要其中某一項功能,也能針對單一功能開啟。更多 開啟 Line 快速登入功能

好囉,那我們就開始吧!

Super Socializer 完整影片教學

如何 WooCommerce 會員快速登入 / 註冊+社群分享(FB & Google)?

1. Super Socializer 是什麼?

WordPress 社群登入註冊:Super Socializer 外掛
WordPress 社群登入註冊:Super Socializer 外掛

Super Socializer 是一款優質的社群外掛,主要包含三大功能,分別是「 社交登錄 」、「 社交分享 」、「 社交評論 」,一款外掛就能搞定這些事情,簡單俐落。更多 Super Socializer 完整教學

Super Socializer 有幾個很棒的功能&特色,挑選出來跟大家分享。

  • 支援多種社群快速註冊+登入功能(像是 Facebook、Google、Line ..)。更多 Line 快速登入功能
  • 可在 WordPress 登入、註冊、評論表單 ..,啟用社群登入功能。
  • 可在 WooCommerce 結帳頁面、客戶登錄表單上,啟用社群登入功能。
  • 超過 100 種社群軟體的分享,且支援計數功能。
  • 社群分享按鈕的樣式調整(像是形狀、大小、顏色、顯示順序、水平或垂直浮動顯示 ..)。
  • 可自訂登錄、註冊後的網址重定向。
  • 啟用社群留言功能,像是 Facebook、Disqus。
  • 多站點兼容。
  • 支持啟用 HTTPS 的網站。

下圖就是基本款的使用社群登入到 WordPress 後台(社群登入還能放在很多頁面,這只是其中一種)。

WordPress 社群登入註冊:社群登入功能整合
社群登入功能整合

另外的就是社群分享功能(有超過 100 種社群集合),如下圖。

WordPress 社群登入註冊:多種社群分享&樣式調整
多種社群分享&樣式調整

由於 Super Socializer 是個社群集成外掛,你也能依照自己需求,挑選特定功能外掛安裝即可,這樣可降低網站負擔。

至於使用流程,我在這篇文章都會帶到,只需挑選相同功能的章節學習即可。


2. Social Login 社群登入(Facebook)

這章節,來進行 Super Socializer 外掛安裝,示範常用的 Facebook 社群快速登入 / 註冊功能,簡單分成 3 步驟來處理(也能參考 官方流程)。

Step1:外掛安裝+社群登入設定

首先,前往 WordPress 外掛 > 安裝外掛,搜尋 Super Socializer 然後安裝+啟用。

WordPress 社群登入註冊:安裝 Super Socializer 外掛
安裝 Super Socializer 外掛

把 Enable Social Login 社群登入打勾,選擇 Facebook 社群登入,然後到 Facebook for Developers 激活社群登入功能(下面有 FB 社群登入,申請流程教學)。

設定完畢後,再把 App ID(帳號)& App Secret(金鑰)貼入到下圖相對應的欄位,就能正常啟用囉!

WordPress 社群登入註冊:開啟 FB 社群登入&輸入功能帳密
WordPress 社群登入註冊:開啟 FB 社群登入&輸入功能帳密

再來,切換到 Advanced Configuration 進階設定,幫社群登入取個標題。

開啟 WooCommerce 登入 / 註冊 / 結帳頁面的社群登入功能,還有可設定登入 / 註冊成功後,網址要導向到哪裡。

WooCommerce 會員註冊&登入:Super Socializer 社群登入,進階設定
Super Socializer 社群登入,進階設定
  • Enable at WooCommerce Customer Login Form:在 WooCommerce 登入表單,開啟社群快速登入。
  • Enable at WooCommerce Customer Register Form:在 WooCommerce 註冊表單,開啟社群快速登入。
  • Enable at WooCommerce Checkout Page:在 WooCommerce 結帳表單,開啟社群快速登入。
  • Login redirection:登入後導向的位置,可依照自己需求選擇。有提供 4 種選項,分別是 Same page where user logged in(登入後停留在當前頁面)、Homepage(前往首頁)、Account dashboard(會員專區)、Custom Url(客製化網址)。
  • Registration redirection:註冊後導向的位置,可依照自己需求選擇,其他同上。

Super Socializer 社群登入設定完成後,下面就來申請 FB 快速登入功能啦!

Step2:申請 FB 快速登入 / 註冊功能

前往 Facebook for Developers,如果是第一次使用,右上角應該會有類似開始的按鈕,讓自己能順利前往應用程式即可。

因為我已經有申請過,就用目前的介面操作示範,點選「 我的應用程式 」。

WordPress 社群登入註冊:前往應用程式
前往應用程式

前往「 建立應用程式 」。

WordPress 社群登入註冊:建立 FB 應用程式
建立 FB 應用程式s

選擇「 消費者 」應用程式類型,然後下一步。

WordPress 社群登入註冊:選擇應用程式類型
選擇應用程式類型

自訂應用程式名稱、設定信箱,完成後下一步。

WordPress 社群登入註冊:建立應用程式
建立應用程式

選擇使用 Facebook 登入。

WooCommerce 會員註冊&登入:使用 Facebook 登入
使用 Facebook 登入

選擇 www(網站類型)。

WooCommerce 會員註冊&登入:選擇 www(網站類型)
選擇 www(網站類型)

輸入自己網站的網域,並進行儲存。然後,前往設定 > 基本資料。

WordPress 社群登入註冊 :設定網站網址
WordPress 社群登入註冊 :設定網站網址

整體欄位輸入,大致上可直接參考下圖,內容記得改成自己的唷。

應用程式編號&密鑰是最重要的,目前所做的設定都是為了讓這個憑證申效,這裡先記得就好,設定完成後再把它們複製起來。

WooCommerce 會員註冊&登入:輸入相關內容
輸入相關內容
  • 應用程式網域:填入你的網站網域。舉例:必須同時輸入 www.demo.comdemo.com 這兩種網域版本(demo.com 需改為自己的網域)。
  • 隱私政策網址:輸入隱私權頁面網址,如果網站沒有此頁面的話,需自行新增。
  • 服務條款網址:同上。
  • 用戶資料刪除:Facebook 新增的審核欄位,填入自己的網域名稱即可。
  • 類別:由於是示範購物網站,所以選「 購物 」。
  • 應用程式圖示:可放自己的網站 Logo。
  • 應用程式用途:網站是自己的選「 你自己或你的商家 」,幫客戶建立的選「 客戶 」。

接著輸入網站網址,然後「儲存」。

WooCommerce 會員註冊&登入:輸入網站網域
輸入網站網域

前往 Facebook 登入 > 設定,在「 有效的 OAuth 重新導向 URI 」輸入 https://demo.com/?SuperSocializerAuth=Facebook。(需把 demo.com 改為自己的網域)

完成後,就進行儲存。

WooCommerce 會員註冊&登入:FB 快速登入設定
FB 快速登入設定

備註:

如果使用 Super Socializer 外掛,上圖網域需輸入 https://demo.com/?SuperSocializerAuth=Facebook

如果使用 Heateor Social Login 外掛,上圖網域需輸入 https://demo.com/?HeateorSlAuth=Facebook

都搞定後,前往「設定 > 基本資料」,把模式切換成「 上線 」,然後把應用程式編號&密鑰複製起來。

WooCommerce 會員註冊&登入:功能開啟&複製憑證
功能開啟&複製憑證

Step3:FB 憑證貼上&瀏覽成果

前往 WordPress 後台,回到 Super Socializer > Social Login 社群登入,將 Facebook 的 App ID & Secret 分別填上,然後儲存。

WordPress 社群登入註冊 :輸入 Facebook 憑證帳號&密碼
WordPress 社群登入註冊 :輸入 Facebook 憑證帳號&密碼

前往 WordPress 前台的會員登入&註冊頁面,就會發現 Facebook 快速登入功能,已經出現啦!

WooCommerce 會員註冊&登入:FB 社群登入功能顯示
FB 社群登入功能顯示

除此之外,在結帳流程也會出現社群登入功能,這也是許多電商主愛用的功能之一。

好囉,以上是示範 Super Socializer 的 FB 社群登入功能。

額外教學:如果要想讓網站加上 FB 線上即時聊天功能,也能參考 這篇文章


3. Social Login 社群登入(Google)

剛剛示範了激活 FB 社群登入功能,這章節會跟大家分享,如何啟用 Super Socializer 的 Google 快速登入功能(也能參考 官方流程)。

這裡主要會分享如何申請 Google 快速登入,至於進階功能設定,剛在上一章節都有提到,這邊就不重複說明。

Step1:開啟 Google 快速登入功能

前往 Super Socializer > Social Login,把 Google 快速登入打勾。

接下來需前往 Google API 控制台,申請快速登入功能,申請完畢後,再把憑證帳密輸入即可(下面有流程教學)。

WooCommerce 會員註冊&登入:開啟 Google 快速登入功能
開啟 Google 快速登入功能

Step2:申請 Google 快速登入 / 註冊功能

前往 Google API 控制台,點選「 建立專案 」。

WooCommerce 會員註冊&登入:新增 Google 專案
新增 Google 專案

幫專案取個名字,然後「 建立 」。

WooCommerce 會員註冊&登入:專案命名+建立
專案命名+建立

確認自己是在剛新建的專案底下,前往「 API 和服務 > OAuth 同意畫面 」。

Google 快速登入 / 註冊,申請流程
Google 快速登入 / 註冊,申請流程

User Type 選擇「 外部 」,然後點「 建立 」。

Google 快速登入 / 註冊,申請流程
Google 快速登入 / 註冊,申請流程

設定應用程式名稱、電子郵件、標誌等 ..。

Google 快速登入 / 註冊,申請流程
Google 快速登入 / 註冊,申請流程

參考下圖輸入自己的網站網址,有關隱私權&服務條款頁面,如果網站上沒有此頁面,就自行新增然後再來這邊輸入即可。

授權網域就輸入自己的網站網址。

Google 應用程式,註冊 / 申請
Google 應用程式,註冊 / 申請

前往「 憑證 」,點選「 建立憑證 > OAuth 用戶端 ID 」。

Google 應用程式,註冊 / 申請
Google 應用程式,註冊 / 申請

依照下圖進行輸入(下面有細部說明),完成後「 建立 」。

Google 應用程式,註冊 / 申請
Google 應用程式,註冊 / 申請
  • 應用程式類型:選擇「網頁應用程式」。
  • 名稱:可輸入你的網站名稱或是公司名稱。
  • 已授權的重新導向 URI:輸入網站網域,需包含 http:// 或 https:// 開頭。網域尾端不需要尾端斜槓。輸入網址後,記得直接按 Enter,否則不會保存。

最後就會看到 Google 的憑證帳號&密碼囉,分別複製起來。

複製 Google 登入憑證
複製 Google 登入憑證

Step3:Google 憑證貼上&瀏覽成果

前往 WordPress 後台,回到 Super Socializer > Social Login 社群登入,將 Google 的 Client ID & Secret 分別填上,然後儲存。

WordPress 社群登入註冊 :填上 Google 憑證帳密
WordPress 社群登入註冊 :填上 Google 憑證帳密

前往 WordPress 前台的會員登入&註冊頁面,就會發現 Google 快速登入功能,已經出現啦!

這樣訪客就能使用 Google,快速註冊會員囉。

Google 快速登入功能,出現啦!
Google 快速登入功能,出現啦!

以上的登入、註冊頁面是 WooCommerce 預設提供的版型,如果你有用頁面編輯器像是 Elementor,自行客製化設計登入、註冊頁面,也可參考 Elementor 表單設計 相關章節。

好囉,以上就是使用 Google 社群登入 / 註冊功能,詳細流程教學。


4. Social Sharing 社群分享

Super Socializer 還有整合「 社群分享 」功能,有超過 100 種社群軟體分享,以台灣來說常看到的 Facebook、Line 分享等 .. 都有涵蓋在裡面。

這章節,來教大家使用這項功能。

首先,前往 Super Socializer > Social Sharing(社群分享),將 Enable Social Sharing 社群分享功能打開。

Theme Selection 樣式設定

這裡有分為 Standard interface theme(一般介面)、Floating interface theme(浮動介面)這兩種的樣式調整。

可調整社群分享 Icon 的形狀、尺寸、顏色、計數顯示位置等 ..。

WordPress 社群登入註冊 :WordPress 設定社群分享功能(僅部分截圖)
WordPress 設定社群分享功能(僅部分截圖)

Standard Interface 一般介面

Standard interface(一般介面)的社群分享位置,通常就是在文章、頁面的頭部或尾部,所出現的分享功能。

這裡就是相關設定的地方。

Standard interface theme 標準介面,相關設定
Standard interface theme 標準介面,相關設定
  • Enable Standard sharing interface:是否開啟社群分享功能(一般介面)。
  • Target Url:點擊分享後,會分享哪一個頁面。用預設值即可,是分享當前頁面。
  • Title:是否幫分享功能取個名字。

下圖紅色框內的社群,是實際會在網站上顯示的分享按鈕,也能拖曳進行排序,只需勾選自己想要的社群即可。

至於 Select Sharing Services,這是類似按讚的功能,因為這我比較少用,所以就沒勾選。

WordPress 多個社群分享功能
WordPress 多個社群分享功能

可調整顯示位置、在哪一些頁面顯示、是否顯示分享數量等 ..。

WordPress 社群分享,相關設定
WordPress 社群分享,相關設定
  • Position with respect to content:社群分享的顯示位置,在網站上方 or 下方(這會搭配下面的 Placement 動作)。
  • Placement:設定哪些地方會顯示分享按鈕。上圖我是勾選 Posts(文章)、Category Archives(分類列表)、WooCommerce Product Page(單一商品頁),會顯示分享按鈕。
  • Show share counts:顯示單一社群分享數量。
  • Show total shares:顯示全社群加總分享數量。
  • Enable ‘More’ icon:顯示更多分享的按鈕。

好囉,來看其中一頁的成果(還有其他上面有勾選的頁面,也會顯示),果然在單一商品頁面,出現了社群分享按鈕!太棒了!

WooCommerce 商品分享功能,出現囉!
WooCommerce 商品分享功能,出現囉!

Floating Interface 浮動介面

Floating Interface (浮動介面)的社群分享位置,是在網站側邊欄顯示。

這裡比較重要的是,Enable Floating sharing interface 為是否開啟社群分享功能(浮動介面),如果需要就打勾,反之就關閉。

WordPress 社群分享,設定浮動介面
WordPress 社群分享,設定浮動介面

我這邊貼上自己的相關設定,但實際設定還是以個人需求為主(下圖)。

我主要是在 Homepage(首頁)、Pages(頁面),這兩個地方顯示浮動式的社群分享。因為在其他地方,大致都已經使用一般式的社群分享顯示,就不用再重複出現。更多 文章和頁面差別

Floating Interface 社群分享(浮動介面),相關設定
Floating Interface 社群分享(浮動介面),相關設定

完成後,記得儲存嘿,就可以到 WordPress 前台瀏覽成果啦~

再來,比較特別是社群分享(浮動介面)在電腦版時,會在網站側邊欄顯示,反之在手機版時會出現在網頁底端,這是良好的設計,比較符合使用者習慣。

WooCommerce 社群分享,浮動介面(電腦版顯示)
WooCommerce 社群分享,浮動介面(電腦版顯示)

另外看到的是手機版的社群分享介面。好囉,這樣就大功告成了!

WooCommerce 社群分享,浮動介面(手機版顯示)
WooCommerce 社群分享,浮動介面(手機版顯示)

5. Social Commenting 社群留言

Super Socializer 還提供了一個 Social Commenting 社群留言 功能,讓訪客不只能用 WordPress 預設的留言方式,也能使用社群留言方式,像是常看到的 Facebook 留言。

前往 Super Socializer > Social Commenting,把 Enable Social Commenting 開啟,就能使用社群評論功能了。

設定 Social 社群評論功能
設定 Social 社群評論功能
  • Order of tabs in commenting interface:留言類型排序。支援 WordPress 預設留言、FB 留言、Disqus 留言,要優先顯示的就放前面,用「 , 」進行區分,也可只輸入單一值。
  • Comment area label:評論區塊的標題。
  • Enable Social Commenting at:允許在哪顯示社群留言功能。支援 Posts 文章、Page 頁面、Product 商品等 ..。
  • Labels:可設定中文,方便辨認。

除此之外,當頁還能做 Facebook 留言表單的樣式調整,有需要再調整即可。

另外,如果想在網站加上聯絡表單等 ..,增加訪客互動率,可參考 WordPress 表單製作 外掛。


6. 社群小工具(含社群追蹤)

Super Socializer 有提供多種網站小工具可用,像是社群追蹤、社群登入、社群分享等 ..,都能放入側邊欄使用。更多 WordPress 後台教學

前往 WordPress 外觀 > 小工具,有 Super Socializer 開頭的工具都是。

Super Socializer 社群小工具
Super Socializer 社群小工具

如此一來,網站的整體社群功能,就變得更加強大啦!


常見問題

Super Socializer 是什麼?

Super Socializer 是一款優質的社群外掛,主要包含三大功能,分別是「 社交登錄 」、「 社交分享 」、「 社交評論 」,一款外掛就能搞定這些事情,簡單俐落!

Super Socializer 外掛有什麼特色呢?

1. 支援多種社群快速註冊+登入功能(像是 Facebook、Google、Line ..)。更多 開啟 Line 快速登入
2. 可在 WordPress 登入、註冊、評論表單 ..,啟用社群登入功能。
3. 可在 WooCommerce 結帳頁面、客戶登錄表單上,啟用社群登入功能。
4. 超過 100 種社群軟體的分享,且支援計數功能。
5. 還有更多 ..

Super Socializer 有支援 WooCommerce 電商嗎?

是的。Super Socializer 不論社群快速登入、社群分享等 ..,在電商頁面都可看到它的發揮。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,你可以在下方留言給我,我會盡力協助解答。

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能配上 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 犬哥網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

犬哥網站:wordpress教學社團

8 thoughts on “如何 WooCommerce 會員快速登入 / 註冊+社群分享(FB & Google)?”

  1. 你好,我想詢問一下
    把帳號開至上線中,出現以下訊息,無法開啟

    更新隱私政策網址或資料刪除資訊
    切換到上線模式之前,你必須提供有效的隱私政策連結和資料刪除資訊。請在應用程式主控板的「基本設定」中更新此資訊

    內容都輸入完畢了,但是還是沒辦法…

  2. 您好!按照您的方式安裝了外掛,現出現問題:
    網址已遭封鎖: 這個重新導向失敗了,因為重新導向 URI 並未列入應用程式用戶端 OAuth 設定的許可名單中。請確定已開啟用戶端和網站 OAuth 登入,並將你所有的應用程式網域新增為有效的 OAuth 重新導向 URI。

    請教問題該如何解決?
    懇請指導

    1. 小犬網站 - Luna

      嗨,Lucky,

      可能要先確認,在 FB 的應用程式選擇登入模式時,是否選擇的是「 www(網站類型)」

      是否有輸入自己的網域,也就是:

      Facebook 登入 > 設定,在「 有效的 OAuth 重新導向 URI 」輸入 https://demo.com/?SuperSocializerAuth=Facebook 。( 把 demo.com 改為自己的網域)

      或者是跟著文章,再重新試跑一次流程看看。

      如果都確認無誤,卻還是無法正常顯示 FB 登入,那可以看一下是否有其他外掛或主題衝突。

      或者是尋找 Super Socializer 客服的協助!

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

回到頂端