如何使用 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 好用外掛 & 佈景主題?

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


聯絡犬哥網站

在網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 2 個實用資源,可有效幫助大家解決問題。

資源一:犬哥網站(專業 WordPress 網頁設計&SEO 行銷公司)

如果你沒時間自己架站,或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站(WordPress 網頁設計&SEO 行銷公司),請專家協助你會更容易!

我們有多年網頁設計、SEO 網站排名經驗,加上上百個高質感作品、SEO 實戰案例,絕對能滿足您的需求!

犬哥網站|台北網頁設計&SEO 行銷公司
犬哥網站|台北網頁設計&SEO 行銷公司

資源二:WordPress+SEO 超強線上課程

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等豐富內容,一次教會你。

課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!

WordPress 高手架站課|一堂課讓你變架站高手!
WordPress 高手架站課|一堂課讓你變架站高手!

網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?

這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等,大幅提升行銷能力。

帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!

SEO 排名飆升課|帶你衝上 Google 第一頁!
SEO 排名飆升課|帶你衝上 Google 第一頁!

關於作者

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

犬哥網站

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

返回頂端