วิธีเพิ่ม Social Login (Google & Facebook) ใน WordPress

Social Login คืออะไร และทำไมถึงจำเป็น?

Social Login คือฟีเจอร์ที่ช่วยให้ผู้เยี่ยมชมเว็บไซต์ของคุณสามารถ สมัครสมาชิกและล็อกอิน โดยใช้บัญชีโซเชียลมีเดียที่มีอยู่แล้ว เช่น Google หรือ Facebook แทนการต้องสร้างบัญชีใหม่และจำรหัสผ่านอีกชุดหนึ่ง

จากสถิติพบว่าผู้ใช้อินเทอร์เน็ตชาวไทยกว่า 73% มีบัญชี Facebook และ 68% ใช้ Gmail เป็นประจำ การเพิ่ม Social Login จึงช่วยลดอุปสรรคในการสมัครสมาชิกได้มากและเพิ่ม Conversion Rate ของเว็บไซต์อย่างเห็นได้ชัด

• ผู้ใช้ไม่ต้องจำรหัสผ่านเพิ่มอีก ลด Friction ในการสมัคร
• ลด Bounce Rate จากหน้า Register ที่ซับซ้อนเกินไป
• เหมาะสำหรับเว็บ WooCommerce, สมาชิก, บล็อก, ฟอรัม
• ข้อมูล Profile เช่น ชื่อ อีเมล รูปโปรไฟล์ ถูกดึงมาโดยอัตโนมัติ

Plugin ที่แนะนำสำหรับ Social Login

มี Plugin หลายตัวในตลาดที่รองรับ Social Login สำหรับ WordPress แต่สำหรับมือใหม่แนะนำ 3 ตัวนี้เป็นพิเศษ:

1. Nextend Social Login — ฟรี, ติดตั้งง่าย, รองรับ Google, Facebook, Apple
2. Super Socializer — ฟรี, รองรับโซเชียลหลายแพลตฟอร์ม, มี Social Share ด้วย
3. WP Social — ฟรี, UI สวย, มี Login Widget พร้อมใช้

บทความนี้จะใช้ Nextend Social Login เป็นตัวอย่าง เพราะตั้งค่าง่ายที่สุดและ Active Installations มากกว่า 90,000 เว็บ

ขั้นตอนที่ 1 — ติดตั้ง Nextend Social Login

เข้าสู่ WordPress Admin ของคุณ แล้วทำตามขั้นตอนนี้:

1. ไปที่เมนู Plugins → Add New Plugin
2. ค้นหา Nextend Social Login ในช่องค้นหา
3. คลิก Install Now แล้วรอสักครู่
4. คลิก Activate เพื่อเปิดใช้งาน Plugin
5. หลัง Activate เมนู Settings → Nextend Social Login จะปรากฏขึ้น

ขั้นตอนที่ 2 — ตั้งค่า Google Login

ก่อนจะตั้งค่าใน WordPress คุณต้องสร้าง Google OAuth Credentials ก่อน ทำตามขั้นตอนนี้:

สร้าง Google OAuth Client ID

1. ไปที่ Google Cloud Console (console.cloud.google.com)
2. สร้าง Project ใหม่หรือเลือก Project ที่มีอยู่แล้ว
3. ไปที่ APIs & Services → Credentials
4. คลิก Create Credentials → OAuth Client ID
5. เลือก Application Type เป็น Web application
6. ตั้งชื่อเช่น WordPress Social Login
7. ใส่ URL ที่อนุญาตใน Authorized redirect URIs:

https://yoursite.com/?oauth=1&provider=google

แทน yoursite.com ด้วยโดเมนของคุณ จากนั้น Copy Client ID และ Client Secret ไว้

ใส่ Credentials ใน WordPress

1. ไปที่ WordPress Admin → Settings → Nextend Social Login
2. คลิกแท็บ Google
3. วาง Client ID และ Client Secret ในช่องที่กำหนด
4. คลิก Save Changes
5. คลิก Test เพื่อทดสอบว่าเชื่อมต่อสำเร็จ

ขั้นตอนที่ 3 — ตั้งค่า Facebook Login

คล้ายกับ Google แต่ต้องสร้าง App ใน Meta for Developers:

สร้าง Facebook App

1. ไปที่ developers.facebook.com และล็อกอินด้วยบัญชี Facebook ของคุณ
2. คลิก My Apps → Create App
3. เลือก Use Case เป็น Authenticate and request data from users with Facebook Login
4. กรอกชื่อ App เช่น My WordPress Site
5. คลิก Create App
6. ไปที่ Use cases → Facebook Login → Settings
7. เพิ่ม Valid OAuth Redirect URI:

https://yoursite.com/?oauth=1&provider=facebook

8. ไปที่ App Settings → Basic แล้ว Copy App ID และ App Secret

ใส่ Facebook App ID ใน WordPress

1. ไปที่ Settings → Nextend Social Login → แท็บ Facebook
2. ใส่ App ID และ App Secret
3. คลิก Save Changes แล้วทดสอบ

ขั้นตอนที่ 4 — ปรับแต่งปุ่มและตำแหน่งการแสดงผล

Nextend Social Login รองรับการแสดงปุ่มในหลายตำแหน่ง:

• Login Form — แสดงปุ่มใต้ฟอร์มล็อกอินของ WordPress
• Register Form — แสดงในหน้าสมัครสมาชิก
• Comment Form — แสดงในหน้าคอมเมนต์
• WooCommerce — รองรับหน้า My Account ของ WooCommerce โดยอัตโนมัติ

ไปที่ Settings → Nextend Social Login → Global Settings เพื่อตั้งค่าตำแหน่ง, ขนาดปุ่ม, ลำดับ และภาษาของปุ่ม

/* ปรับ CSS ของปุ่ม Social Login ใน WordPress Customizer */
.nsl-container .nsl-button {
    border-radius: 8px !important;
    font-size: 14px !important;
    padding: 10px 16px !important;
}
.nsl-container-block .nsl-button {
    width: 100% !important;
    justify-content: center !important;
}

สามารถใส่ CSS ด้านบนใน Appearance → Customize → Additional CSS เพื่อปรับให้เข้ากับ Design ของเว็บไซต์คุณ

ขั้นตอนที่ 5 — ตั้งค่าสิทธิ์และ Role ของผู้ใช้ใหม่

เมื่อมีผู้ใช้ล็อกอินผ่าน Social Login เป็นครั้งแรก ระบบจะสร้างบัญชีใหม่ให้อัตโนมัติ คุณสามารถกำหนด Role ของบัญชีเหล่านี้ได้:

1. ไปที่ Settings → Nextend Social Login → Global Settings
2. หาส่วน Default Role
3. เลือก Role ที่เหมาะสม เช่น Subscriber สำหรับเว็บทั่วไป หรือ Customer สำหรับ WooCommerce
4. ตั้งค่า Login Redirect เพื่อกำหนดว่าจะพาผู้ใช้ไปหน้าไหนหลังล็อกอิน

ตรวจสอบว่า Social Login ทำงานถูกต้อง

หลังตั้งค่าเสร็จแล้ว ทดสอบด้วยขั้นตอนเหล่านี้:

# 1. เปิดหน้า Login ของ WordPress ใน Private/Incognito mode
https://yoursite.com/wp-login.php

# 2. ตรวจสอบว่าปุ่ม "Continue with Google" และ "Continue with Facebook" ปรากฏ

# 3. คลิกปุ่ม Google และ Authorize การเข้าถึง
#    → ควรถูก Redirect กลับมาที่เว็บและล็อกอินสำเร็จ

# 4. ตรวจสอบ Users ใหม่ใน WordPress Admin → Users
#    → ผู้ใช้ใหม่ควรมี Source เป็น "google" หรือ "facebook"

# 5. ตรวจสอบ Error log หากมีปัญหา
# WordPress Admin → Nextend Social Login → Debug

แก้ปัญหาที่พบบ่อย

ปัญหาที่มือใหม่มักเจอเมื่อตั้งค่า Social Login:

Error: "redirect_uri_mismatch"

ข้อผิดพลาดนี้เกิดเมื่อ Redirect URI ที่คุณใส่ใน Google Console ไม่ตรงกับที่ Plugin ส่งไป แก้ไขโดยไปที่ Google Cloud Console → Credentials → แก้ไข OAuth Client แล้วตรวจสอบว่า Redirect URI ตรงกับที่แสดงในหน้า Settings ของ Plugin

Error: "App Not Set Up" หรือ "App in Development Mode"

Facebook App ยังอยู่ใน Development Mode ทำให้ล็อกอินได้เฉพาะ Admin เท่านั้น แก้ไขโดยไปที่ Meta for Developers → App Dashboard → คลิก Go Live แล้วทำตามขั้นตอน Review ซึ่งอาจใช้เวลา 1-3 วัน

Error: "This app has exceeded its development rate limit"

เกิดจาก Facebook API Rate Limit ใน Development Mode ซึ่งจำกัดจำนวน Login Request แก้ไขโดยเปลี่ยน App เป็น Live Mode หรือเพิ่ม Test Users ใน Facebook App Dashboard

ปุ่ม Social Login ไม่ปรากฏในหน้า Login

ตรวจสอบว่าเปิดใช้งาน Provider ในหน้า Settings แล้วหรือยัง และตรวจสอบว่าไม่มี Plugin อื่นที่แก้ไข Login Form Conflict กัน เช่น Membership Plugin หรือ Security Plugin บางตัว ลอง Deactivate ทีละตัวเพื่อหาตัวที่ขัดแย้ง

ผู้ใช้ล็อกอินด้วย Social แต่ไม่ได้ Role ที่ถูกต้อง

ไปที่ Settings → Nextend Social Login → Global Settings แล้วตรวจสอบค่า Default Role อีกครั้ง นอกจากนี้ให้ตรวจสอบว่า Plugin Membership หรือ WooCommerce ไม่ได้ Override Role Setting

คำถามที่พบบ่อย (FAQ)

ผู้ใช้ที่ล็อกอินผ่าน Social Login จะมีรหัสผ่านหรือเปล่า?

โดยค่าเริ่มต้น WordPress จะสร้างรหัสผ่านแบบสุ่มให้กับบัญชีที่สร้างผ่าน Social Login ผู้ใช้สามารถ Reset Password ผ่านอีเมลในภายหลังได้หากต้องการล็อกอินแบบปกติ ข้อมูลทั้งหมดจะถูกเชื่อมกันเพราะใช้อีเมลเดียวกัน

ต้องจ่ายเงินเพื่อใช้ Google Login API หรือไม่?

ไม่ต้องจ่ายเงิน Google OAuth สำหรับ Social Login นั้นฟรีโดยสมบูรณ์ ไม่มีค่าใช้จ่าย ไม่ว่าจะมีผู้ใช้กี่คนก็ตาม Facebook Login ก็เช่นเดียวกัน ฟรีทั้งคู่

Social Login รองรับ WooCommerce ได้หรือเปล่า?

รองรับครับ Nextend Social Login รองรับ WooCommerce อย่างสมบูรณ์ ปุ่ม Social Login จะปรากฏในหน้า My Account ของ WooCommerce โดยอัตโนมัติ ไม่ต้องตั้งค่าเพิ่มเติม และข้อมูลสมาชิกจะถูกเชื่อมโยงกับ Customer Profile ของ WooCommerce ด้วย