Theme & Plugin, WooCommerce
สร้างปุ่ม Facebook login บน WordPress สมัครสมาชิกง่ายๆ ผ่าน Facebook
บทความนี้ จะมาแนะนำการสร้างปุ่ม Facebook login บน WordPress เพื่อใช้งานร่วมกับ WooCommerce สำหรับเว็บร้านค้าขายของ ด้วยปลั๊กอิน Nextend Social Login
เพื่ออำนวยความสะดวกให้ลูกค้าของคุณ ไม่ต้องเสียเวลากรอกแบบฟอร์ม สามารถสมัครสมาชิก หรือ Login เข้าระบบบนเว็บ ผ่าน Facebook ของตัวเองได้เลย
สารบัญเนื้อหา
ขั้นตอนการสร้างปุ่ม Facebook login
1. ติดตั้งปลั๊กอิน Nextend Social Login
2.ไปที่ Settings > Nextend Social Login > Getting Started เพื่อเริ่มต้นการตั้งค่าใช้งาน
3. สร้าง Facebook App
ไปที่ developers.facebook.com/apps คลิก เพิ่มแอพใหม่
ตั้งชื่อที่จะให้แสดงบน app ควรตั้งเป็นชื่อเว็บของเรา จะได้ช่วยเพิ่มความน่าเชื่อถือ
ติ๊กเลือก ผสานการทำงานของการเข้าสู่ระบบด้วย Facebook > คลิก ยืนยัน
ดูที่หัวข้อ สินค้า เลือก การเริ่มใช้งานอย่างง่าย
เลือก แพลตฟอร์มที่เราต้องการทำ Facebook Login คลิก เว็บ
ใส่ URL เว็บไซต์ของคุณลงไป คลิก Save จากนั้นให้คลิก การตั้งค่า
กลับไปที่หน้าตั้งค่าปลั๊กอิน Nextend Social บนเว็บของเรา ดูหัวข้อที่ 11 ให้คัดลอก URL นั้น
กลับไปที่หน้า Facebook App Settings ดูที่ช่อง URI เปลี่ยนเส้นทาง OAuth ที่ถูกต้อง (Valid OAuth redirect URIs) ให้เราวาง URL ที่เราคัดลอกมาจากหัวข้อด้านบนลงไป คลิก บันทึกการเปลี่ยนแปลงให้เรียบร้อย
ไปที่การตั้งค่า > คลิก ข้อมูลพื้นฐาน (Basic)
Facebook บังครับให้เราใส่หน้านโยบายความเป็นส่วนตัว ดังนั้นคุณจำเป็นต้องไปสร้างหน้าเพจนี้ เขียนข้อมูลเบื้องต้น ว่าเราคือใคร เราเก็บข้อมูลอะไรจากคุณบ้าง เราเอาข้อมูลของคุณไปใช้ทำอะไร ฯลฯ
จากนั้นให้นำ URL หน้านั้น มาวางที่ช่อง นโยบายความเป็นส่วนตัว
ใสรูปไอคอนแอพที่ต้องการแสดง และเลือกและเลือกหมวดหมู่ธุรกิจของคุณ คลิก บันทึกการเปลี่ยนแปลง
ดูด้านบนตรงเลข ID ของแอพ ให้คลิกเปิดใช้งาน APP
คลิก ยืนยัน เพื่อเปิดการใช้งานแอพแบบสาธารณะ
เมื่อแอพของเราอยู่ในสถานะพร้อมใช้งาน ให้เรากลับไปที่เว็บ
Setting Facebook Login
กลับที่ส่วน Setting Facebook Login บนเว็บ ให้คลิก I am done setting up my Facebook App
ใส่ App Id และ App Secret ที่เราได้จาก Facebook ลงไป คลิก Save Changes
คลิก Verify Setting
คลิกปุ่ม ดำเนินการต่อ เพื่อทดสอบการใช้งาน
ถ้าแสดงหน้า The test was successful แบบรูปนี้ แสดงว่าการตั้งค่า Facebook ของคุณเสร็จเรียบร้อย
กลับไปที่หน้า setting > Nextend Social > คลิก Enable เปิดใช้งานปุ่ม Facebook login
ลอง log out ออกจากเว็บ แล้วเข้าหน้า login บน WordPress จะแสดงปุ่ม Facebook ขึ้นมาให้เรา
แต่ปุ่ม facebook นี้ยังไม่สามารถทำงานร่วมกับ Woocommerce ได้ ดูการใช้งานปุ่มบน WooCommerce ในหัวข้อถัดไปครับ
4. การทำปุ่ม Facebook Login บน WooCommerce
เนื่องจากปลั๊กอิน Nextend Social ที่เป็นตัวฟรี สามารถสร้างหน้า Facebook Login ได้เฉพาะหน้า Admin Login เท่านั้น หากคุณต้องการให้มี Facebook Login ที่หน้า Customer Login และบนหน้า Checkout เราต้องทำการปรับแต่งเองอีกนิดหน่อยครับ
ซึ่งการทำ Facebook Login บน WooCommerce จะมีอยู่ 2 หัวข้อ คือทำบนธีม WooCommerce ทั่วไป กับทำบนธีม Flatsome
4.1การทำ Facebook Login บนธีม WooCommerce ทั่วไป
1) อันดับแรกเว็บไซต์ของคุณต้องลงปลั๊กอิน WooCommerce เพื่อทำระบบตระกร้าสินค้าให้เรียบร้อยก่อน
สำหรับคนที่ยังใช้งาน WooCommerce ไม่เป็น ผมแนะนำให้คุณศึกษาจากบทความนี้ก่อนครับ: คู่มือการใช้งาน Woocommerce อัพเดท 2019 สำหรับผู้เริ่มต้น
2) ตั้งค่าระบบสมาชิกบน WooCommerce
ไปที่ WooCommerce > Setting > Account & Policy แล้วตั้งค่าตามรูป
3) คัดลอก Facebook Login Shortcode
4) นำ Shortcode ไปวางที่หน้า My Account กับหน้า Checkout
5) ทดสอบผลลัพธ์
เมื่อคลิกไปยังหน้า My Account ก็จะปรากฏปุ่ม Facebook มาให้เราเรียบร้อย
ปุ่ม Facebook login บนหน้า Checkout
4.2 การทำ Facebook Login บนธีม Flatsome ทั่วไป
ธีม Flatsome คือ ธีมที่เหมาะสำหรับสร้างเว็บร้านค้าออนไลน์ด้วย Woocommerce โดยเฉพาะ หรือนำไปสร้างเว็บไซต์บริษัทของคุณ หรือหากคุณเป็นฟรีแลนซ์ หรือเป็น Agency ธีมนี้ก็เหมาะมากที่จะนำไปสร้างเว็บให้ลูกค้าของคุณด้วยเช่นกัน ธีม Flatsome มีเครื่องมือที่จำเป็นสำหรับการสร้างเว็บที่หลากหลายไอเดีย ใช้งานง่าย เป็นธีมที่เบา ช่วยให้เว็บของคุณเปิดได้เร็วขึ้นอีกด้วย
2) ตั้งค่าระบบสมาชิกบน WooCommerce
ไปที่ WooCommerce > Setting > Account & Policy แล้วตั้งค่าตามรูป
3) ตั้งค่า Theme Option เพื่อเปิดใช้งาน Social Login Buttons
ไปที่ Theme option > Shop > Checkout > ติ๊กเปิดใช้งาน Social Login Buttons
หัวข้อที่ 4 นี้ไม่ต้องทำตามแล้ว ธีมเวอร์ชั่นล่าสุดแก้ Error 404 มาให้เรียบร้อยแล้ว
4) ตั้งค่า Redirect หน้า Checkout
จากการทดสอบทำ Facebook Login ในส่วนของหน้า Checkout เมื่อลูกค้ากดที่ปุ่ม Social Login Buttons ตัวระบบมัน Redirect ไปเป็นหน้า 404 Error ดังนั้นเราต้องแก้ไขปัญหานี้กันสักเล็กน้อย
เมื่อกดปุ่ม Login Facebook ระบบจะพาไปหน้าที่เป็น 404 Error ให้คุณคัดลอก URL ของหน้านั้นเก็บเอาไว้ก่อน
จากนั้นกลับไปหลังบ้าน ติดตั้งปลั๊กอิน Redirection
ตั้งค่า Redirect 301 เพื่อแก้ปัญหา 404 Error ตามรูปภาพได้เลยครับ
5) ทดสอบผลลัพธ์
เมื่อคลิกไปยังหน้า My Account ก็จะปรากฏปุ่ม Facebook มาให้เราเรียบร้อย
ปุ่ม Facebook login บนหน้า Checkout
คลิปสอนใช้งาน
หากให้เจอปัญหา Error ตามรูปนี้
ให้ไปติ๊กเปิดใช้งานจุดนี้ก่อนครับ
สรุป
การทำปุ่ม Facebook Login อาจจะยากตรงขั้นตอนการสร้าง App ID ซึ่งตรงจุดมีการอัพเดทขั้นตอนการสร้างจาก Facebook อยู่ตลอด ทำให้หลายๆ คนทำตามแล้วไม่ผ่าน แต่หากเราทำตรงจุดนี้ผ่าน การทำปุ่มล็อคอิน บนเว็บ WordPress หรือ WooCommerce ก็ไม่ใช้เรื่องยาก ซึ่งปุ่มเข้าระบบสมาชิกด้วย Facebook ช่วยให้ลูกค้าของเราซื้อของได้สะดวกยิ่งขึ้นนั้นเอง
ประชาสัมพันธ์
สำหรับท่านใดที่อ่านบทความนี้แล้ว สนใจการสร้างเว็บร้านค้าออนไลน์ด้วย WordPress + Woocommerce แบบมืออาชีพ ในวันที่ 21 - 22 สิงหาคม 2564 นี้ ผมได้เปิดคอร์สสอน Woocommerce Expert แบบกลุ่มเล็กๆ 1 รอบ สอนสดรอบละ 6 คน เพื่อให้ผู้เรียนได้ประโยชน์สูงสุด เรียนรู้และทำตามไปพร้อมๆ กันได้
รายละเอียดคอร์สเรียน
สร้างเว็บร้านค้าออนไลน์ Woocommerce expert
- ค่าเรียน 9,500 บาท 21 - 22 สิงหาคม 2564
- เวลาเรียน 10.00- 16.00 น.
- เรียนกลุ่มเล็กรอบละ 6 คนเท่านั้น (ว่าง)
- เราสอนด้วยธีม Flatsome Theme
(No.1 Best selling Woocommerce Theme 2020) - สถานที่เรียน Seatz Station
- ปากซอยงามวงศ์วาน 44 ก่อนถึง รพ.วิภาวดี ฝั่งตรงข้าม ม.เกษตรประตูงามวงศ์วาน 3
- จองที่นั่งเรียนผ่าน Lind ID : padveewebschool ได้เลยครับ
ทุกคอร์สเรียนรอบสอนสด
ได้คอร์สเรียนออนไลน์แถมฟรีครับ
คอร์สเรียนนี้เหมาะกับใคร ?
- เนื่องจากคอร์สเรียนนี้เราสอนเป็นกลุ่ม จึงไม่เหมาะกับทุกคน
- คอร์สนี้เหมาะสำหรับผู้ที่เคยใช้งาน WordPress มาบ้าง รู้พื้นฐานแบบงูๆปลาๆ หากคุณเคยลง WordPress เอง ลงปลั๊กอินได้ เคยสร้าง page หรือ post แบบนี้เรียนได้
- หรือหากคุณไม่เคยใช้งาน WordPress มาก่อนเลย แต่คุณมีทักษะไอที เช่น เคยใช้พวกโปรแกรมกราฟฟิค Photoshop, illustrator เคยใช้พวกโปรแกรมตัดต่อวีดีโอ อะไรก็ได้มาบ้าง
- ถ้าคุณเคยใช้โปรแกรมดังกล่าวข้างต้น แสดงว่าคุณมีทักษะไอที สามารถลงเรียนคอร์สนี้ได้
- เนื่องจากเราเรียนกันหลายคน หากผู้เรียนไม่มีทักษะไอทีเลยจะทำให้เรียนรู้ตามเพื่อนไม่ทันนั้นเอง
คอร์สเรียนนี้ไม่เหมาะกับใครบ้าง ?
- ผู้ที่ไม่มีทักษะด้านไอทีต่างๆ
- ผู้สูงวัยที่ใช้คอมพิวเตอร์ยังไม่คล่อง หรือหากรู้สึกว่าตัวเองเรียนรู้ได้ช้า คุณไม่เหมาะกับคอร์สเรียนนี้
- สำหรับคนที่ไม่มีทักษะด้านไอที หรือคิดว่าตนเองเรียนรู้ได้ช้า และชอบความเป็นส่วนตัว แต่ต้องการที่จะสร้างเว็บด้วยตนเอง
- ผมแนะนำให้ลงเรียนรอบสอนแบบตัวต่อตัวจะดีที่สุดครับ
แผนที่สถานที่เรียน (รอบสอนกลุ่ม)
สถานที่เรียน Seatz Station
ปากซอยงามวงศ์วาน 44 ก่อนถึง รพ.วิภาวดี
ฝั่งตรงข้าม ม.เกษตรประตูงามวงศ์วาน 3
บรรยากาศคลาสเรียน
กำลังหัดทำเวปไซต์ด้วย Wordpess อยู่ ได้ความรู้มากๆเลยครับ ช่วยได้เยอะเลย