如何WooCommerce 會員快速登入/ 註冊＋社群分享（FB ...

如何WooCommerce 會員快速登入/ 註冊＋社群分享（FB & Google）？ · 1. Super Socializer 是什麼？ · 2. Social Login 社群登入（Facebook） · 3. Social ... Skiptocontent 不論是架設品牌網站、購物網站製作等..，有許多類型的網站都需要有會員註冊的功能，除了方便後續的購物流程，也能進一步留下訪客資料，未來才有機會做再行銷。

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

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

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

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

更多開啟Line快速登入功能。

好囉，那我們就開始吧！ 1.SuperSocializer是什麼？2.SocialLogin社群登入（Facebook）3.SocialLogin社群登入（Google）4.SocialSharing社群分享5.SocialCommenting社群留言6.社群小工具（含社群追蹤）常見問題WordPress學習資源 SuperSocializer完整影片教學 如何WooCommerce會員快速登入/註冊＋社群分享（FB&Google）？ 1.SuperSocializer是什麼？ WordPress社群登入註冊：SuperSocializer外掛 SuperSocializer是一款優質的社群外掛，主要包含三大功能，分別是「社交登錄」、「社交分享」、「社交評論」，一款外掛就能搞定這些事情，簡單俐落。

更多SuperSocializer完整教學。

SuperSocializer有幾個很棒的功能＆特色，挑選出來跟大家分享。

支援多種社群快速註冊＋登入功能（像是Facebook、Google、Line..）。

更多Line快速登入功能。

可在WordPress登入、註冊、評論表單..，啟用社群登入功能。

可在WooCommerce結帳頁面、客戶登錄表單上，啟用社群登入功能。

超過100種社群軟體的分享，且支援計數功能。

社群分享按鈕的樣式調整（像是形狀、大小、顏色、顯示順序、水平或垂直浮動顯示..）。

可自訂登錄、註冊後的網址重定向。

啟用社群留言功能，像是Facebook、Disqus。

多站點兼容。

支持啟用HTTPS的網站。

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

社群登入功能整合 另外的就是社群分享功能（有超過100種社群集合），如下圖。

多種社群分享＆樣式調整 由於SuperSocializer是個社群集成外掛，你也能依照自己需求，挑選特定功能外掛安裝即可，這樣可降低網站負擔。

如果全部功能都要用，就直接安裝SuperSocializer。

如果只想用社群登入＆註冊功能，你只需安裝HeateorSocialLogin。

如果只想用Facebook社群留言，你只需安裝 FancyComments。

如果只想用社群分享功能，你只需安裝SassySocialShare。

立即取得SuperSocializer外掛 至於使用流程，我在這篇文章都會帶到，只需挑選相同功能的章節學習即可。

2.SocialLogin社群登入（Facebook） 這章節，來進行SuperSocializer外掛安裝，示範常用的Facebook社群快速登入/註冊功能，簡單分成3步驟來處理（也能參考官方流程）。

Step1：外掛安裝＋社群登入設定 首先，前往WordPress外掛>安裝外掛，搜尋SuperSocializer然後安裝＋啟用。

安裝SuperSocializer外掛 把EnableSocialLogin社群登入打勾，選擇Facebook社群登入，然後到FacebookforDevelopers激活社群登入功能（下面有FB社群登入，申請流程教學）。

設定完畢後，再把AppID（帳號）＆AppSecret（金鑰）貼入到下圖相對應的欄位，就能正常啟用囉！ WordPress社群登入註冊：開啟FB社群登入＆輸入功能帳密 再來，切換到AdvancedConfiguration進階設定，幫社群登入取個標題。

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

SuperSocializer社群登入，進階設定 EnableatWooCommerceCustomerLoginForm：在WooCommerce登入表單，開啟社群快速登入。

EnableatWooCommerceCustomerRegisterForm：在WooCommerce註冊表單，開啟社群快速登入。

EnableatWooCommerceCheckoutPage：在WooCommerce結帳表單，開啟社群快速登入。

Loginredirection：登入後導向的位置，可依照自己需求選擇。

有提供4種選項，分別是Samepagewhereuserloggedin（登入後停留在當前頁面）、Homepage（前往首頁）、Accountdashboard（會員專區）、CustomUrl（客製化網址）。

Registrationredirection：註冊後導向的位置，可依照自己需求選擇，其他同上。

SuperSocializer社群登入設定完成後，下面就來申請FB快速登入功能啦！ Step2：申請FB快速登入/註冊功能 前往FacebookforDevelopers，如果是第一次使用，右上角應該會有類似開始的按鈕，讓自己能順利前往應用程式即可。

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

前往應用程式 前往「建立應用程式」。

建立FB應用程式s 選擇「消費者」應用程式類型，然後下一步。

選擇應用程式類型 自訂應用程式名稱、設定信箱，完成後下一步。

建立應用程式 選擇使用Facebook登入。

使用Facebook登入 選擇www（網站類型）。

選擇www（網站類型） 輸入自己網站的網域，並進行儲存。

然後，前往設定>基本資料。

WordPress社群登入註冊：設定網站網址 整體欄位輸入，大致上可直接參考下圖，內容記得改成自己的唷。

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

輸入相關內容 應用程式網域：填入你的網站網域。

舉例：必須同時輸入www.demo.com和demo.com這兩種網域版本（demo.com需改為自己的網域）。

隱私政策網址：輸入隱私權頁面網址，如果網站沒有此頁面的話，需自行新增。

服務條款網址：同上。

用戶資料刪除：Facebook新增的審核欄位，填入自己的網域名稱即可。

類別：由於是示範購物網站，所以選「購物」。

應用程式圖示：可放自己的網站Logo。

應用程式用途：網站是自己的選「你自己或你的商家」，幫客戶建立的選「客戶」。

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

輸入網站網域 前往Facebook登入>設定，在「有效的OAuth重新導向URI」輸入https://demo.com/?SuperSocializerAuth=Facebook。

（需把demo.com改為自己的網域） 完成後，就進行儲存。

FB快速登入設定 備註：如果使用SuperSocializer外掛，上圖網域需輸入https://demo.com/?SuperSocializerAuth=Facebook。

如果使用HeateorSocialLogin 外掛，上圖網域需輸入https://demo.com/?HeateorSlAuth=Facebook。

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

功能開啟＆複製憑證 Step3：FB憑證貼上＆瀏覽成果 前往WordPress後台，回到SuperSocializer>SocialLogin社群登入，將Facebook的AppID＆Secret分別填上，然後儲存。

WordPress社群登入註冊：輸入Facebook憑證帳號＆密碼 前往WordPress前台的會員登入＆註冊頁面，就會發現Facebook快速登入功能，已經出現啦！ FB社群登入功能顯示 除此之外，在結帳流程也會出現社群登入功能，這也是許多電商主愛用的功能之一。

好囉，以上是示範SuperSocializer的FB社群登入功能。

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

3.SocialLogin社群登入（Google） 剛剛示範了激活FB社群登入功能，這章節會跟大家分享，如何啟用SuperSocializer的Google快速登入功能（也能參考官方流程）。

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

Step1：開啟Google快速登入功能 前往SuperSocializer>SocialLogin，把Google快速登入打勾。

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

開啟Google快速登入功能 Step2：申請Google快速登入/註冊功能 前往GoogleAPI控制台，點選「建立專案」。

新增Google專案 幫專案取個名字，然後「建立」。

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

Google快速登入/註冊，申請流程 UserType選擇「外部」，然後點「建立」。

Google快速登入/註冊，申請流程 設定應用程式名稱、電子郵件、標誌等..。

Google快速登入/註冊，申請流程 參考下圖輸入自己的網站網址，有關隱私權＆服務條款頁面，如果網站上沒有此頁面，就自行新增然後再來這邊輸入即可。

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

Google應用程式，註冊/申請 前往「憑證」，點選「建立憑證>OAuth用戶端ID」。

Google應用程式，註冊/申請 依照下圖進行輸入（下面有細部說明），完成後「建立」。

Google應用程式，註冊/申請 應用程式類型：選擇「網頁應用程式」。

名稱：可輸入你的網站名稱或是公司名稱。

已授權的重新導向URI：輸入網站網域，需包含http://或https://開頭。

網域尾端不需要尾端斜槓。

輸入網址後，記得直接按Enter，否則不會保存。

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

複製Google登入憑證 Step3：Google憑證貼上＆瀏覽成果 前往WordPress後台，回到SuperSocializer>SocialLogin社群登入，將Google的ClientID＆Secret分別填上，然後儲存。

WordPress社群登入註冊：填上Google憑證帳密 前往WordPress前台的會員登入＆註冊頁面，就會發現Google快速登入功能，已經出現啦！ 這樣訪客就能使用Google，快速註冊會員囉。

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

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

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

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

首先，前往SuperSocializer>SocialSharing（社群分享），將EnableSocialSharing社群分享功能打開。

ThemeSelection樣式設定 這裡有分為Standardinterfacetheme（一般介面）、Floatinginterfacetheme（浮動介面）這兩種的樣式調整。

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

WordPress設定社群分享功能（僅部分截圖） StandardInterface一般介面 Standardinterface（一般介面）的社群分享位置，通常就是在文章、頁面的頭部或尾部，所出現的分享功能。

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

Standardinterfacetheme標準介面，相關設定 EnableStandardsharinginterface：是否開啟社群分享功能（一般介面）。

TargetUrl：點擊分享後，會分享哪一個頁面。

用預設值即可，是分享當前頁面。

Title：是否幫分享功能取個名字。

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

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

WordPress多個社群分享功能 可調整顯示位置、在哪一些頁面顯示、是否顯示分享數量等..。

WordPress社群分享，相關設定 Positionwithrespecttocontent：社群分享的顯示位置，在網站上方or下方（這會搭配下面的Placement動作）。

Placement：設定哪些地方會顯示分享按鈕。

上圖我是勾選Posts（文章）、CategoryArchives（分類列表）、WooCommerceProductPage（單一商品頁），會顯示分享按鈕。

Showsharecounts：顯示單一社群分享數量。

Showtotalshares：顯示全社群加總分享數量。

Enable‘More’icon：顯示更多分享的按鈕。

好囉，來看其中一頁的成果（還有其他上面有勾選的頁面，也會顯示），果然在單一商品頁面，出現了社群分享按鈕！太棒了！ WooCommerce商品分享功能，出現囉！ FloatingInterface浮動介面 FloatingInterface（浮動介面）的社群分享位置，是在網站側邊欄顯示。

這裡比較重要的是，EnableFloatingsharinginterface為是否開啟社群分享功能（浮動介面），如果需要就打勾，反之就關閉。

WordPress社群分享，設定浮動介面 我這邊貼上自己的相關設定，但實際設定還是以個人需求為主（下圖）。

我主要是在Homepage（首頁）、Pages（頁面），這兩個地方顯示浮動式的社群分享。

因為在其他地方，大致都已經使用一般式的社群分享顯示，就不用再重複出現。

更多文章和頁面差別。

FloatingInterface社群分享（浮動介面），相關設定 完成後，記得儲存嘿，就可以到WordPress前台瀏覽成果啦～ 再來，比較特別是社群分享（浮動介面）在電腦版時，會在網站側邊欄顯示，反之在手機版時會出現在網頁底端，這是良好的設計，比較符合使用者習慣。

WooCommerce社群分享，浮動介面（電腦版顯示） 另外看到的是手機版的社群分享介面。

好囉，這樣就大功告成了！ WooCommerce社群分享，浮動介面（手機版顯示） 5.SocialCommenting社群留言 SuperSocializer還提供了一個SocialCommenting社群留言功能，讓訪客不只能用WordPress預設的留言方式，也能使用社群留言方式，像是常看到的Facebook留言。

前往SuperSocializer>SocialCommenting，把EnableSocialCommenting開啟，就能使用社群評論功能了。

設定Social社群評論功能 Orderoftabsincommentinginterface：留言類型排序。

支援WordPress預設留言、FB留言、Disqus留言，要優先顯示的就放前面，用「,」進行區分，也可只輸入單一值。

Commentarealabel：評論區塊的標題。

EnableSocialCommentingat：允許在哪顯示社群留言功能。

支援Posts文章、Page頁面、Product商品等..。

Labels：可設定中文，方便辨認。

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

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

6.社群小工具（含社群追蹤） SuperSocializer有提供多種網站小工具可用，像是社群追蹤、社群登入、社群分享等..，都能放入側邊欄使用。

更多WordPress後台教學。

前往WordPress外觀>小工具，有SuperSocializer開頭的工具都是。

SuperSocializer社群小工具 如此一來，網站的整體社群功能，就變得更加強大啦！ 常見問題 SuperSocializer是什麼？ SuperSocializer是一款優質的社群外掛，主要包含三大功能，分別是「社交登錄」、「社交分享」、「社交評論」，一款外掛就能搞定這些事情，簡單俐落！ SuperSocializer外掛有什麼特色呢？ 1.支援多種社群快速註冊＋登入功能（像是Facebook、Google、Line..）。

更多開啟Line快速登入。

2.可在WordPress登入、註冊、評論表單..，啟用社群登入功能。

更多如何強制訪客導向註冊/登入頁面。

3.可在WooCommerce結帳頁面、客戶登錄表單上，啟用社群登入功能。

4.超過100種社群軟體的分享，且支援計數功能。

5.還有更多.. SuperSocializer有支援WooCommerce電商嗎？ 是的。

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

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

如果你沒有時間自己架站，或是想委託專人服務，那可以參考我們的網站建置服務。

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

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

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

關於作者犬哥我是站長犬哥，長期關注：WordPress網站架設、WordPress後台教學、WordPress佈景主題、WordPress外掛、網路行銷等..：） 13thoughtson“如何WooCommerce會員快速登入/註冊＋社群分享（FB&Google）？” 你好，我想詢問一下 把帳號開至上線中，出現以下訊息，無法開啟 更新隱私政策網址或資料刪除資訊 切換到上線模式之前，你必須提供有效的隱私政策連結和資料刪除資訊。

請在應用程式主控板的「基本設定」中更新此資訊 內容都輸入完畢了，但是還是沒辦法… Reply 嗨，檢查一下「資料刪除資訊」欄位有無填寫上去，這個地方需填入自己的網站網域～ Reply 剛好需要這篇，真的太感謝您了 沒有一個網站的教學向您這麼完整.. Reply 嗨，不客氣唷！多謝鼓勵＾＾ Reply 你好我按造您的教學都完成了使用facebook登入但是出現facebook不提供email的問題該如何解決呢 Reply 嗨，先恭喜你設定成功唷！ 至於你提到的問題，因為光看文字不是很理解，相關問題也能到小犬社團提問唷～ Reply 您好!按照您的方式安裝了外掛,現出現問題: 網址已遭封鎖:這個重新導向失敗了，因為重新導向URI並未列入應用程式用戶端OAuth設定的許可名單中。

請確定已開啟用戶端和網站OAuth登入，並將你所有的應用程式網域新增為有效的OAuth重新導向URI。

請教問題該如何解決? 懇請指導 Reply 嗨，Lucky， 可能要先確認，在FB的應用程式選擇登入模式時，是否選擇的是「www（網站類型）」 是否有輸入自己的網域，也就是： Facebook登入>設定，在「有效的OAuth重新導向URI」輸入https://demo.com/?SuperSocializerAuth=Facebook。

（把demo.com改為自己的網域） 或者是跟著文章，再重新試跑一次流程看看。

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

或者是尋找SuperSocializer客服的協助！ Reply 已經有FD和[email protected]群組粉絲專頁了，只要讓客戶連到我們的群組裡聊聊，要如何設定？ Reply 嗨，陳琪， 可以參考嵌入FB粉絲專頁/社團教學，將你的FB粉絲專頁嵌入WordPress網站。

Line群組嵌入網頁部分，可以使用相關外掛：GetButton.io、FloatingChatWidget或其他小工具外掛，幫助你進行Line的嵌入：） 我們即將推出Line嵌入的詳細教學，若有需求，也可以持續關注我們唷！ Reply 站長您好 ： 我依照上述的fb登入流程跑完後，卻發生一個問題，那就是我的登出後，出現fb登入的部份不是在我的網站，而是在wordpress登入的地方，想請教我是否在哪個環節出現錯誤呢？ Reply 謝謝，我找到問題點也處理好了，感謝您！ Reply 嗨，南景， 恭喜你找到解決方法，若不介意的話，可以留言補充一下你是如何解決這個問題的嗎？ 這樣能幫助到後面也跟你遇到一樣問題的站長唷，感謝你～ Reply LeaveaCommentCancelReply發佈留言必須填寫的電子郵件地址不會公開。

必填欄位標示為*Typehere..Name* Email* Website Δ 我想要找.. 搜尋 訂閱犬哥社群 Youtube Facebook Instagram 文章分類 分類 所有文章 如何架設網站 優質主機 WordPress基礎教學 WooCommerce電商系列 SEO技巧＋網站行銷 優質主題系列 優質外掛系列 WordPress速度性能 WordPress安全性 網站備份＋搬家 最新WordPress教學通知 姓名（暱稱） 電子信箱（Email） Leavethisfieldemptyifyou'rehuman: FB問題解答社團 如何自架網站MenuToggle 建立Blog形象網站架設形象網站架設（Divi主題）電商網站架設銷售漏斗架設線上課程架設預約網站設計多種架站方法 優質主機MenuToggle Bluehost平價主機A2Hosting中階主機Cloudways進階主機各家主機完整比較 部落格服務內容MenuToggle WordPress網站服務形象網站建置購物網站建置客製網站設計快速套版架站 聯絡我 影片教學影片教學 Starttypingandpressentertosearch 搜尋… 回到頂端