如果你有 經營網路商店，可能會需要建置會員註冊的功能，除了方便後續的購物流程，也能進一步留下訪客資料，為後續的行銷做充足準備。
之前我們已經分享過 Super Socializer 外掛三大功能：「 Facebook＋Google 快速登入 」、「 社群分享 」、「 社群評論 」。更多 Super Socializer 外掛教學 。
不過你知道嗎？除了使用 Facebook＋Google 快速登入外， Super Socializer 也有 LINE 登入功能唷（ WordPress Line Login ）！
這篇文章會和大家分享，如何在 WordPress＋WooCommerce 網站上，嵌入免費的 LINE 快速登入功能。更多 網站加入 Line Chat 浮動按鈕教學。
那廢話不多說，我們就開始吧！
使用 LINE login 快速登入 WordPress＋WooCommerce，完整影片學習：
1. Super Socializer 是什麼？
Super Socializer 是一款優質的社群外掛，主要包含三大功能，分別是「 社交登錄 」、「 社交分享 」、「 社交評論 」，一款外掛就能搞定這些事情，簡單俐落。更多 Super Socializer 完整教學。
Super Socializer 有幾個很棒的功能＆特色，挑選出來跟大家分享。
- 支援多種社群快速註冊＋登入功能（像是 Facebook、Google、Line ..）。更多 Line 快速登入功能。
- 可在 WordPress 登入、註冊、評論表單 ..，啟用社群登入功能。
- 可在 WooCommerce 結帳頁面、客戶登錄表單上，啟用社群登入功能。
- 超過 100 種社群軟體的分享，且支援計數功能。
- 社群分享按鈕的樣式調整（像是形狀、大小、顏色、顯示順序、水平或垂直浮動顯示 ..）。
- 可自訂登錄、註冊後的網址重定向。
- 啟用社群留言功能，像是 Facebook、Disqus。
- 多站點兼容。
- 支持啟用 HTTPS 的網站。
下圖就是基本款的使用社群登入到 WordPress 後台（社群登入還能放在很多頁面，這只是其中一種）。
另外的就是社群分享功能（有超過 100 種社群集合），如下圖。
由於 Super Socializer 是個社群集成外掛，你也能依照自己需求，挑選特定功能外掛安裝即可，這樣可降低網站負擔。
- 如果全部功能都要用，就直接安裝 Super Socializer。
- 如果只想用社群登入＆註冊功能，你只需安裝 Heateor Social Login。
- 如果只想用 Facebook 社群留言，你只需安裝 Fancy Comments。
- 如果只想用社群分享功能，你只需安裝 Sassy Social Share。
2. 使用 LINE 社群登入
這個章節，我們會分 4 個步驟，並且示範如何創建 LINE 快速登入（ WordPress Line Login ）。
Step1：下載 Super Socializer＋啟用 LINE 登入鈕
前往 WordPress 外掛 > 安裝外掛，搜尋 Super Socializer 然後安裝＋啟用。
啟用之後，進入「 Social Login 」面板，將「 Enable Social Login 」打勾，選取 LINE 選項，等等還會有步驟要在這塊面板進行，不過我們先儲存設定。
切換到右邊「 Advanced Configuration 」面板，幫社群登入取個標題。
開啟 WooCommerce 登入 / 註冊 / 結帳頁面的社群登入功能，還有可設定登入 / 註冊成功後，網址要導向到哪裡。
- Enable at WooCommerce Customer Login Form：在 WooCommerce 登入表單，開啟社群快速登入。
- Enable at WooCommerce Customer Register Form：在 WooCommerce 註冊表單，開啟社群快速登入。
- Enable at WooCommerce Checkout Page：在 WooCommerce 結帳表單，開啟社群快速登入。
- Email required：開啟 Email 認證。
- Login redirection：登入後導向的位置，可依照自己需求選擇。有提供 4 種選項，分別是 Same page where user logged in（登入後停留在當前頁面）、Homepage（前往首頁）、Account dashboard（會員專區）、Custom Url（客製化網址）。
- Registration redirection：註冊後導向的位置，可依照自己需求選擇，其他同上。
重點小提醒：Email required（ Email 認證）可依站長需求決定是否開啟。開啟後，使用 Line 初次登入會跳出確認 Email 視窗，以便 WordPress 創建使用者帳號。
Super Socializer 社群登入設定完成後，下面就來申請 LINE 官方串接登入功能！
Step2：創建 Line Developer 帳號＋建立頻道
到 Line Developer Portal 並使用個人 Line 帳號登錄，如果沒有帳號，就先要先註冊一個。
登入之後，會來到會員頁面。找到「 Providers 」區塊，按下「 Create 」按鈕，接著輸入網站名稱，點擊「 Create 」進行建立。
創建成功，會進入新建「 Channels 」頁面，選擇「 Create a LINE Login channel 」。
接著便會進入頻道設定，第一個選項選「 LINE Login 」，地區選「 Taiwan 」，剩下的名稱、 LOGO 等 ..，則可自行設定。
接著下面兩項是頻道名稱、頻道說明，輸入四個字以內，方便自己辨識即可。
「 App types 」選擇「 Web app（網站類型）」，然後填入 Email 。
再來隱私權政策（Privacy policy URL）＆服務條款（Terms of use URL）也可輸入網址，完成後勾選「 同意 LINE Developers 條款 」，然後進行建立。
備註：如果電商還沒有隱私權政策＆服務條款頁面，可參考 WordPress 頁面新增，然後再到 WooCommerce 設定內指派即可。更多 WooCommerce 電商教學。
創建完成後，可前往「 LINE Login 」> 打開 「 Web app 」> 變更「 Callback URL（回調網址）」為：你的首頁網址/SuperSocializerAuth/Line 。
設定完成，按下「 Update 」即可。
回到「 Basic settings 」頁面，選擇「 Developing 」> 「 Publish 」公開使用此串接頻道。
那我們就完成 LINE 的串接頻道啦！
Step3：複製 Line 啟用憑證，並貼入到 WordPress 網站
我們到「 Basic Settings 」頁面，下滑找到「 Channel ID 」與「 Channel secret 」這兩項數值，複製下來。
接著回到 WordPress 後台，前往 Super Socializer > Social Login 面板 > 找到「 Line Channel ID 」與「 Line Channel Secret 」兩項數值。
將剛剛複製的數值貼上對應的空格，選擇儲存。
Step4：顯示成果一覽
Line 快速登入的憑證啟用後，前往 WordPress 前台的會員登入＆註冊頁面，就會發現 LINE 快速登入功能，已經出現囉。
我們也可以順利使用 Line Login，進行會員快速註冊＋登入了：）
除此之外，也可以在結帳頁面設定顯示 LINE 登入功能，這也是許多電商都必備的功能唷。
那麼，以上就是完整的「 WordPress Line Login 會員快速登入 / 註冊 」教學：）
常見問題
Super Socializer 是什麼？
Super Socializer 是一款優質的社群外掛，主要有 3 大功能，分別是「 社交登錄 」、「 社交分享 」、「 社交評論 」一款外掛就能搞定這些事情，簡單俐落！
Super Socializer 可以串接除了 LINE 以外的社群軟體嗎？
只要與第三方社群軟體做好設定，即可使用 Super Socializer 系統支援的社群軟體。
Super Socializer 官方網站已有詳細的教學。
想要串接 FB 和 Google 也可以參考：用 Super Socializer 建立 FB 、 Google 快速登入 教學。
WordPress 學習資源
學習 WordPress 網站架設流程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！
接下來，額外分享 3 項架站資源，可有效幫助大家處理網站問題。
資源一：犬哥數位（專業 WordPress 網頁設計公司）
如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位（WordPress 網頁設計公司），請專家製作會更有效率！
資源二：WP 精選模組攻略書
由於 WordPress 主題 / 外掛有非常多種，很多網友私訊我不知道安裝哪一款，才有辦法實現功能。或是已經試了很多款外掛，但始終找不到適合自己的。
對此我整理了 高達 90 多款精選主題＆外掛大全（電子書），這些都是我們團隊協助客戶開發案件時，會搭配使用的。一來外掛品質優良，二來功能性也足夠強！
資源三：官方教學資源（含 FB 社群解答）
如果你偏愛自架網站，也歡迎持續關注 犬哥網站 Blog，我們都持續有發布新的網站架設、網路行銷教學。
或是你比較喜歡看影片學習，也可關注 YouTube 頻道，幫助你更容易進入狀況。
當然，如果你在操作過程中遇到問題，也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ，除了有網友一同幫你解惑外，犬哥團隊也會同步在社團幫助大家。
小犬老師您好 我目前有取得 Channel ID 和 Channel secret 也設定了 Callback URL
https://dental3a.com/SuperSocializerAuth/Line 也 published了 但是網站登入時還是顯示 400 Bad Request 請問我是哪裡沒有輸入對呢? 麻煩老師替我解答 非常感謝
嗨，主淮，
會出現 404 應該是有哪一個環節漏掉了，建議你重新新增一個 LINE Login channel 再跑一次流程試試看。
重跑之後，若還有出現 404 錯誤，可能就是外掛跟主題之間有衝突，可以在後台一一檢查。
或是尋求 Super Socializer 支援論壇的幫助。
您好～
我們目前都照著您的指示都可以登入囉
太感謝了
請問可以讓登入後填寫email的跳出視窗改成中文或是取消這個跳出視窗嗎
嗨，宗鑫，
因為 WordPress 是用電子郵件來判斷登入者是否為 WordPress 使用者，所以取得電子郵件是必要的，可能沒辦法取消唷。
至於改成中文，我不太清楚跳出視窗是由 Super Socializer 提供或是由 LINE 提供，
如果是 Super Socializer ，可嘗試看看 Loco Translate 進行翻譯唷！
小犬大大您好:
想請問一下，我設定好後，可以順利使用LINE登入了，可是用LINE登入後，名字都會變成很長的英文亂碼，信箱也會是英文一長串在加@line.com，是哪裡設定錯誤嗎?
嗨，小麥，
如果登入後 LINE 的用戶名是一長串數字，可能表示登錄的 LINE 帳戶沒有相對應的名稱 / 用戶名，或是該使用者沒有設置 Line ID，可以重新設置看看。
如果電子郵件顯示：英文亂碼@ line.com，可能表示 LINE login 沒有開啟用戶登入時授權 Super Socializer 自動讀取登錄者的電子郵件，
可以到 Line Developer Portal 的登錄頻道，檢查「 OpenID Connect 」是否為「 Applied 」，若沒有則需要申請。
如果登錄者拒絕 Super Socializer 讀取電子郵件，或者登錄者的 LINE 帳號沒有關聯電子郵件地址，
可以前往 Super Socializer 設定 > 「 Advanced Configuration 」面板 > 開啟「 Email required 」。
你好小犬老师
我想做电商平台
想问下有什么WordPress和WooCommerce主题推荐吗？
谢谢
嗨，北檸
如果需要做電商平台，可以直接尋找適合電商使用的主題唷。
我們網站上已經有整理文章，可以參考看看： 10 個 WooCommerce 電商推薦佈景主題 。
您好，我成功讓user可以點選line登入，但是登入過程是到line App點擊確認後，卻跑到瀏覽器要重新在瀏覽器登入line帳號，請問這狀況怎麼解決呢？謝謝。
嗨，gooptions，
如果網頁的瀏覽器有成功登錄，那就表示登入功能是正常的，
有出現類似情況，可以重新將登入頻道刪除再重新建立一次試試看。
小犬好, 謝謝細心教學, 我也成功在測試站安裝line login了, 在電腦上的瀏覽器執行正常, 但用手機的chrome瀏覽器, 點擊line login按鍵, 卻出現”錯誤 無法正常執行”, 請問是哪個地方需要修正呢?
嗨，凱一，
可以嘗試看看重新登入 Line 並建立一個新的登入頻道試試看，
如果還是無法解決，可以嘗試聯繫 Super Socializer 外掛的支援論壇 。
小犬老師，
請問使用Heateor Social Login Callback URL的網址還是用SuperSocializerAuth/Line這一段嗎？
嗨，Edmund，
可以使用這串網址試試看，如果有無法使用等 .. 相關疑問，可以詢問看看外掛開發者，能否協助你進行處理：）
謝謝犬哥分享
出現 404 錯誤的人，
如果安裝的Heateor Social Login
回調網址是 : 你的首頁網址/SuperSocializerAuth/Line
最好是從Line Channel ID旁的問號複製整個網址
嗨，LAI，
不用客氣，也謝謝你的分享唷＾＾～