สร้างปุ่ม Facebook login บน WordPress สมัครสมาชิกง่ายๆ ผ่าน Facebook

สร้างปุ่ม Facebook login

บทความนี้ จะมาแนะนำการสร้างปุ่ม Facebook login บน WordPress เพื่อใช้งานร่วมกับ WooCommerce สำหรับเว็บร้านค้าขายของ ด้วยปลั๊กอิน Nextend Social Login

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

สารบัญเนื้อหา

ขั้นตอนการสร้างปุ่ม Facebook login

1. ติดตั้งปลั๊กอิน Nextend Social Login

Nextend Social Login

2.ไปที่ Settings > Nextend Social Login > Getting Started เพื่อเริ่มต้นการตั้งค่าใช้งาน

สมัครสมาชิกด้วย facebook

3. สร้าง Facebook App

ไปที่ developers.facebook.com/apps คลิก เพิ่มแอพใหม่

เพิ่มแอพเฟสบุ๊ค

ตั้งชื่อที่จะให้แสดงบน app ควรตั้งเป็นชื่อเว็บของเรา จะได้ช่วยเพิ่มความน่าเชื่อถือ

name id app

ติ๊กเลือก ผสานการทำงานของการเข้าสู่ระบบด้วย Facebook > คลิก ยืนยัน

wp facebook login for wordpress

ดูที่หัวข้อ สินค้า เลือก การเริ่มใช้งานอย่างง่าย

login with facebook php code

เลือก แพลตฟอร์มที่เราต้องการทำ Facebook Login คลิก เว็บ

ปุ่ม login facebook php

ใส่ URL เว็บไซต์ของคุณลงไป คลิก Save จากนั้นให้คลิก การตั้งค่า

insert url website

กลับไปที่หน้าตั้งค่าปลั๊กอิน Nextend Social บนเว็บของเรา ดูหัวข้อที่ 11 ให้คัดลอก URL นั้น

the following URL

กลับไปที่หน้า Facebook App Settings ดูที่ช่อง URI เปลี่ยนเส้นทาง OAuth ที่ถูกต้อง (Valid OAuth redirect URIs) ให้เราวาง URL ที่เราคัดลอกมาจากหัวข้อด้านบนลงไป คลิก บันทึกการเปลี่ยนแปลงให้เรียบร้อย

Valid OAuth redirect URIs

ไปที่การตั้งค่า > คลิก ข้อมูลพื้นฐาน (Basic)

login ผ่าน facebook android

Facebook บังครับให้เราใส่หน้านโยบายความเป็นส่วนตัว ดังนั้นคุณจำเป็นต้องไปสร้างหน้าเพจนี้ เขียนข้อมูลเบื้องต้น ว่าเราคือใคร เราเก็บข้อมูลอะไรจากคุณบ้าง เราเอาข้อมูลของคุณไปใช้ทำอะไร ฯลฯ

จากนั้นให้นำ URL หน้านั้น มาวางที่ช่อง นโยบายความเป็นส่วนตัว

ใสรูปไอคอนแอพที่ต้องการแสดง และเลือกและเลือกหมวดหมู่ธุรกิจของคุณ คลิก บันทึกการเปลี่ยนแปลง

add icon

ดูด้านบนตรงเลข ID ของแอพ ให้คลิกเปิดใช้งาน APP

public app

คลิก ยืนยัน เพื่อเปิดการใช้งานแอพแบบสาธารณะ

allow public app

เมื่อแอพของเราอยู่ในสถานะพร้อมใช้งาน ให้เรากลับไปที่เว็บ

app ready to used

Setting Facebook Login

กลับที่ส่วน Setting Facebook Login บนเว็บ ให้คลิก I am done setting up my Facebook App

setting facebook app

ใส่ App Id และ App Secret ที่เราได้จาก Facebook ลงไป คลิก Save Changes

app id

acebook api สอน

คลิก Verify Setting

Verify settings

คลิกปุ่ม ดำเนินการต่อ เพื่อทดสอบการใช้งาน

facebook login complete

ถ้าแสดงหน้า The test was successful แบบรูปนี้ แสดงว่าการตั้งค่า Facebook ของคุณเสร็จเรียบร้อย

login finish

กลับไปที่หน้า setting > Nextend Social > คลิก Enable เปิดใช้งานปุ่ม Facebook login

Enablelogin

ลอง log out ออกจากเว็บ แล้วเข้าหน้า login บน WordPress จะแสดงปุ่ม Facebook ขึ้นมาให้เรา

facebook login ตัวอย่าง

แต่ปุ่ม facebook นี้ยังไม่สามารถทำงานร่วมกับ Woocommerce ได้ ดูการใช้งานปุ่มบน WooCommerce ในหัวข้อถัดไปครับ

happy beautiful Asian young woman

บทความพิเศษ

50 เทคนิคทำ SEO ที่คุณอาจยังไม่เคยรู้มาก่อน ใครรู้ก่อนทำก่อนได้เปรียบ

อ่านบทความนี้

4. การทำปุ่ม Facebook Login บน WooCommerce

woocommerce login

เนื่องจากปลั๊กอิน 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 plugin

สำหรับคนที่ยังใช้งาน WooCommerce ไม่เป็น ผมแนะนำให้คุณศึกษาจากบทความนี้ก่อนครับ: คู่มือการใช้งาน Woocommerce อัพเดท 2019 สำหรับผู้เริ่มต้น

2) ตั้งค่าระบบสมาชิกบน WooCommerce

ไปที่ WooCommerce > Setting > Account & Policy แล้วตั้งค่าตามรูป

สมาชิก Woocommerce

3) คัดลอก Facebook Login Shortcode

FB Login ShortCode

4) นำ Shortcode ไปวางที่หน้า My Account กับหน้า Checkout

paste shortcode

5) ทดสอบผลลัพธ์

เมื่อคลิกไปยังหน้า My Account ก็จะปรากฏปุ่ม Facebook มาให้เราเรียบร้อย

My account

ปุ่ม Facebook login บนหน้า Checkout

checkout page facebook login

4.2 การทำ Facebook Login บนธีม Flatsome ทั่วไป

ธีม Flatsome คือ ธีมที่เหมาะสำหรับสร้างเว็บร้านค้าออนไลน์ด้วย Woocommerce โดยเฉพาะ หรือนำไปสร้างเว็บไซต์บริษัทของคุณ หรือหากคุณเป็นฟรีแลนซ์ หรือเป็น Agency ธีมนี้ก็เหมาะมากที่จะนำไปสร้างเว็บให้ลูกค้าของคุณด้วยเช่นกัน ธีม Flatsome มีเครื่องมือที่จำเป็นสำหรับการสร้างเว็บที่หลากหลายไอเดีย ใช้งานง่าย เป็นธีมที่เบา ช่วยให้เว็บของคุณเปิดได้เร็วขึ้นอีกด้วย

theme flatsome

2) ตั้งค่าระบบสมาชิกบน WooCommerce

ไปที่ WooCommerce > Setting > Account & Policy แล้วตั้งค่าตามรูป

สมาชิก Woocommerce

3) ตั้งค่า Theme Option เพื่อเปิดใช้งาน Social Login Buttons

ไปที่ Theme option > Shop > Checkout > ติ๊กเปิดใช้งาน Social Login Buttons

Social Login Buttons

4) ตั้งค่า Redirect หน้า Checkout

จากการทดสอบทำ Facebook Login ในส่วนของหน้า Checkout เมื่อลูกค้ากดที่ปุ่ม Social Login Buttons ตัวระบบมัน Redirect ไปเป็นหน้า 404 Error ดังนั้นเราต้องแก้ไขปัญหานี้กันสักเล็กน้อย

checkout error

เมื่อกดปุ่ม Login Facebook ระบบจะพาไปหน้าที่เป็น 404 Error ให้คุณคัดลอก URL ของหน้านั้นเก็บเอาไว้ก่อน

404 error

จากนั้นกลับไปหลังบ้าน ติดตั้งปลั๊กอิน Redirection

redirection plugin

ตั้งค่า Redirect 301 เพื่อแก้ปัญหา 404 Error ตามรูปภาพได้เลยครับ

redirection 301

5) ทดสอบผลลัพธ์

เมื่อคลิกไปยังหน้า My Account ก็จะปรากฏปุ่ม Facebook มาให้เราเรียบร้อย

flatsome account

ปุ่ม Facebook login บนหน้า Checkout

flatsome checkout

คลิปสอนใช้งาน

สรุป

การทำปุ่ม Facebook Login อาจจะยากตรงขั้นตอนการสร้าง App ID ซึ่งตรงจุดมีการอัพเดทขั้นตอนการสร้างจาก Facebook อยู่ตลอด ทำให้หลายๆ คนทำตามแล้วไม่ผ่าน แต่หากเราทำตรงจุดนี้ผ่าน การทำปุ่มล็อคอิน บนเว็บ WordPress หรือ WooCommerce ก็ไม่ใช้เรื่องยาก ซึ่งปุ่มเข้าระบบสมาชิกด้วย Facebook ช่วยให้ลูกค้าของเราซื้อของได้สะดวกยิ่งขึ้นนั้นเอง

ประชาสัมพันธ์

สำหรับท่านใดที่อ่านบทความนี้แล้ว สนใจการสร้างเว็บร้านค้าออนไลน์ด้วย WordPress + Woocommerce แบบมืออาชีพ ในวันที่ 25 - 26 กุมภาพันธ์  2563 นี้ ผมได้เปิดคอร์สสอน Woocommerce Expert  แบบกลุ่มเล็กๆ 1 รอบ สอนสดรอบละ 6 คน เพื่อให้ผู้เรียนได้ประโยชน์สูงสุด เรียนรู้และทำตามไปพร้อมๆ กันได้ 

รายละเอียดคอร์สเรียน

สร้างเว็บร้านค้าออนไลน์ Woocommerce expert

สอน Woocommerce

  • ค่าเรียน 9,500 บาท 25 - 26 กุมภาพันธ์ 2563
  • เวลาเรียน 10.00- 16.00 น.
  • เรียนกลุ่มเล็กรอบละ 6 คนเท่านั้น (ว่าง)
  • เราสอนด้วยธีม Flatsome Theme
    (No.1 Best selling Woocommerce Theme 2019)
  • สถานที่เรียน Seatz Station
  • ปากซอยงามวงศ์วาน 44 ก่อนถึง รพ.วิภาวดี ฝั่งตรงข้าม ม.เกษตรประตูงามวงศ์วาน 3
  • จองที่นั่งเรียนผ่าน Lind ID : padveewebschool ได้เลยครับ
สอบถามเพิ่มเติม

คอร์สเรียนนี้เหมาะกับใคร ?

  • เนื่องจากคอร์สเรียนนี้เราสอนเป็นกลุ่ม จึงไม่เหมาะกับทุกคน
  • คอร์สนี้เหมาะสำหรับผู้ที่เคยใช้งาน WordPress มาบ้าง รู้พื้นฐานแบบงูๆปลาๆ หากคุณเคยลง WordPress เอง ลงปลั๊กอินได้ เคยสร้าง page หรือ post แบบนี้เรียนได้
  • หรือหากคุณไม่เคยใช้งาน WordPress มาก่อนเลย แต่คุณมีทักษะไอที เช่น เคยใช้พวกโปรแกรมกราฟฟิค Photoshop, illustrator เคยใช้พวกโปรแกรมตัดต่อวีดีโอ อะไรก็ได้มาบ้าง
  • ถ้าคุณเคยใช้โปรแกรมดังกล่าวข้างต้น แสดงว่าคุณมีทักษะไอที สามารถลงเรียนคอร์สนี้ได้
  • เนื่องจากเราเรียนกันหลายคน หากผู้เรียนไม่มีทักษะไอทีเลยจะทำให้เรียนรู้ตามเพื่อนไม่ทันนั้นเอง

คอร์สเรียนนี้ไม่เหมาะกับใครบ้าง ?

  • ผู้ที่ไม่มีทักษะด้านไอทีต่างๆ
  • ผู้สูงวัยที่ใช้คอมพิวเตอร์ยังไม่คล่อง หรือหากรู้สึกว่าตัวเองเรียนรู้ได้ช้า คุณไม่เหมาะกับคอร์สเรียนนี้
  • สำหรับคนที่ไม่มีทักษะด้านไอที หรือคิดว่าตนเองเรียนรู้ได้ช้า และชอบความเป็นส่วนตัว แต่ต้องการที่จะสร้างเว็บด้วยตนเอง
  • ผมแนะนำให้ลงเรียนรอบสอนแบบตัวต่อตัวจะดีที่สุดครับ
เรียนแบบตัวต่อตัว

แผนที่สถานที่เรียน (รอบสอนกลุ่ม)

สถานที่เรียน Seatz Station

ปากซอยงามวงศ์วาน 44 ก่อนถึง รพ.วิภาวดี
ฝั่งตรงข้าม ม.เกษตรประตูงามวงศ์วาน 3

seat-station

บรรยากาศคลาสเรียน

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *