如何使用 LINE login 快速登入 WordPress+WooCommerce?(免費外掛)

如何使用 LINE login 快速登入 WordPress+WooCommerce?(免費外掛)

如果你有 經營網路商店,可能會需要建置會員註冊的功能,除了方便後續的購物流程,也能進一步留下訪客資料,為後續的行銷做充足準備。

之前我們已經分享過 Super Socializer 外掛三大功能:「 Facebook+Google 快速登入 」、「 社群分享 」、「 社群評論 」。更多 Super Socializer 外掛教學

不過你知道嗎?除了使用 Facebook+Google 快速登入外, Super Socializer 也有 LINE 登入功能唷( WordPress Line Login )!

這篇文章會和大家分享,如何在 WordPress+WooCommerce 網站上,嵌入免費的 LINE 快速登入功能。更多 網站加入 Line Chat 浮動按鈕教學

那廢話不多說,我們就開始吧!

使用 LINE login 快速登入 WordPress+WooCommerce,完整影片學習:

如何使用 LINE login 快速登入 WordPress+WooCommerce 完整影片學習

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. 使用 LINE 社群登入

這個章節,我們會分 4 個步驟,並且示範如何創建 LINE 快速登入( WordPress Line Login )。

Step1:下載 Super Socializer+啟用 LINE 登入鈕

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

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

啟用之後,進入「 Social Login 」面板,將「 Enable Social Login 」打勾,選取 LINE 選項,等等還會有步驟要在這塊面板進行,不過我們先儲存設定。

WordPress 社群登入註冊:開啟 LINE 社群登入

切換到右邊「 Advanced Configuration 」面板,幫社群登入取個標題。

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

Super Socializer 社群登入,進階設定
  • 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 」進行建立。

WordPress Line Login :新增 LINE Providers

創建成功,會進入新建「 Channels 」頁面,選擇「 Create a LINE Login channel 」。

WordPress Line Login :Create a LINE Login channel 創建 LINE 登錄頻道
Create a LINE Login channel 創建 LINE 登錄頻道

接著便會進入頻道設定,第一個選項選「 LINE Login 」,地區選「 Taiwan 」,剩下的名稱、 LOGO 等 ..,則可自行設定。

WordPress Line Login :頻道設定細項

接著下面兩項是頻道名稱、頻道說明,輸入四個字以內,方便自己辨識即可。

WordPress Line Login :頻道名稱及說明設定

「 App types 」選擇「 Web app(網站類型)」,然後填入 Email 。

再來隱私權政策(Privacy policy URL)&服務條款(Terms of use URL)也可輸入網址,完成後勾選「 同意 LINE Developers 條款 」,然後進行建立。

設定 web app 、 設定整體完成

備註:如果電商還沒有隱私權政策&服務條款頁面,可參考 WordPress 頁面新增,然後再到 WooCommerce 設定內指派即可。更多 WooCommerce 電商教學

創建完成後,可前往「 LINE Login 」> 打開 「 Web app 」> 變更「 Callback URL(回調網址)」為:你的首頁網址/SuperSocializerAuth/Line

設定完成,按下「 Update 」即可。

開啟「 Web app 」、設定「 Callback URL 」為首頁網址

回到「 Basic settings 」頁面,選擇「 Developing 」> 「 Publish 」公開使用此串接頻道。

公開 LINE channel

那我們就完成 LINE 的串接頻道啦!

Step3:複製 Line 啟用憑證,並貼入到 WordPress 網站

我們到「 Basic Settings 」頁面,下滑找到「 Channel ID 」與「 Channel secret 」這兩項數值,複製下來。

WordPress Line Login :複製「 Channel ID 」、「 Channel secret 」兩數值
複製「 Channel ID 」、「 Channel secret 」兩數值

接著回到 WordPress 後台,前往 Super Socializer > Social Login 面板 > 找到「 Line Channel ID 」與「 Line Channel Secret 」兩項數值。

將剛剛複製的數值貼上對應的空格,選擇儲存。

到後台貼上「 Channel ID 」、「 Channel secret 」兩數值

Step4:顯示成果一覽

Line 快速登入的憑證啟用後,前往 WordPress 前台的會員登入&註冊頁面,就會發現 LINE 快速登入功能,已經出現囉。

我們也可以順利使用 Line Login,進行會員快速註冊+登入了:)

WordPress Line Login :LINE 社群登入功能顯示
LINE 社群登入功能顯示

除此之外,也可以在結帳頁面設定顯示 LINE 登入功能,這也是許多電商都必備的功能唷。

那麼,以上就是完整的「 WordPress Line Login 會員快速登入 / 註冊 」教學:)


常見問題

Super Socializer 是什麼?

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

Super Socializer 可以串接除了 LINE 以外的社群軟體嗎?

只要與第三方社群軟體做好設定,即可使用 Super Socializer 系統支援的社群軟體。

Super Socializer 官方網站已有詳細的教學。

想要串接 FB 和 Google 也可以參考:用 Super Socializer 建立 FB 、 Google 快速登入 教學。

除了 Super Socializer ,還想知道別的 WooCommerce 好用外掛 & 佈景主題?

可以參考 電商優質外掛推薦電商優質主題推薦,歡迎新手電商平台站長參考使用~


WordPress 學習資源

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

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源二:WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題&外掛大全(電子書),這些都是我們團隊協助客戶開發案件時,會搭配使用的。一來外掛品質優良,二來功能性也足夠強!

WordPress 模組指南書
WordPress 模組指南書

資源三:官方教學資源(含 FB 社群解答)

如果你偏愛自架網站,也歡迎持續關注 犬哥網站 Blog,我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習,也可關注 YouTube 頻道,幫助你更容易進入狀況。

當然,如果你在操作過程中遇到問題,也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ,除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

犬哥網站|交流社團
犬哥網站交流社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

在〈如何使用 LINE login 快速登入 WordPress+WooCommerce?(免費外掛)〉中有 17 則留言

    1. 犬哥網站

      嗨,主淮,

      會出現 404 應該是有哪一個環節漏掉了,建議你重新新增一個 LINE Login channel 再跑一次流程試試看。

      重跑之後,若還有出現 404 錯誤,可能就是外掛跟主題之間有衝突,可以在後台一一檢查。

      或是尋求 Super Socializer 支援論壇的幫助。

  1. 您好~
    我們目前都照著您的指示都可以登入囉
    太感謝了
    請問可以讓登入後填寫email的跳出視窗改成中文或是取消這個跳出視窗嗎

    1. 犬哥網站

      嗨,宗鑫,

      因為 WordPress 是用電子郵件來判斷登入者是否為 WordPress 使用者,所以取得電子郵件是必要的,可能沒辦法取消唷。

      至於改成中文,我不太清楚跳出視窗是由 Super Socializer 提供或是由 LINE 提供,

      如果是 Super Socializer ,可嘗試看看 Loco Translate 進行翻譯唷!

  2. 小犬大大您好:
    想請問一下,我設定好後,可以順利使用LINE登入了,可是用LINE登入後,名字都會變成很長的英文亂碼,信箱也會是英文一長串在加@line.com,是哪裡設定錯誤嗎?

    1. 犬哥網站

      嗨,小麥,

      如果登入後 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 」。

  3. 你好小犬老师
    我想做电商平台
    想问下有什么WordPress和WooCommerce主题推荐吗?
    谢谢

  4. 您好,我成功讓user可以點選line登入,但是登入過程是到line App點擊確認後,卻跑到瀏覽器要重新在瀏覽器登入line帳號,請問這狀況怎麼解決呢?謝謝。

    1. 犬哥網站

      嗨,gooptions,

      如果網頁的瀏覽器有成功登錄,那就表示登入功能是正常的,

      有出現類似情況,可以重新將登入頻道刪除再重新建立一次試試看。

  5. 小犬好, 謝謝細心教學, 我也成功在測試站安裝line login了, 在電腦上的瀏覽器執行正常, 但用手機的chrome瀏覽器, 點擊line login按鍵, 卻出現”錯誤 無法正常執行”, 請問是哪個地方需要修正呢?

  6. 小犬老師,
    請問使用Heateor Social Login Callback URL的網址還是用SuperSocializerAuth/Line這一段嗎?

    1. 嗨,Edmund,

      可以使用這串網址試試看,如果有無法使用等 .. 相關疑問,可以詢問看看外掛開發者,能否協助你進行處理:)

  7. 謝謝犬哥分享
    出現 404 錯誤的人,
    如果安裝的Heateor Social Login
    回調網址是 : 你的首頁網址/SuperSocializerAuth/Line

發佈留言

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

返回頂端