วิธีการเปิดใช้งาน FACEBOOK LOGIN/ ระบบ สมัครสมาชิกด้วย FACEBOOK

สำหรับลูกค้าที่ต้องการใช้งาน ฟังก์ชั่น Facebook Login


1. สามารถตั้งค่าการใช้งาน Facebook API บนเว็บไซต์ตามขั้นตอนนี้

  1.1 ไปที่ URL - https://developers.facebook.com/

  1.2 เลือกเมนู "เข้าสู่ระบบ" ที่มุมขวาบน

 

2. ระบบจะแจ้งให้ทำการเข้าสู่ระบบ โดยใช้ Username กับ Password ที่ใช้จัดการเพจ ของ Facebook

 

3. หลังจากเราทำการเข้าสู่ระบบแล้ว เมนู "เข้าสู่ระบบ" จะเปลี่ยนเป็นเมนู "แอพของฉัน" ทำการกดคลิกเมนู "แอพของฉัน"

 

4. เมื่อเข้าสู่ระบบ จะเข้าสู่หน้าการจัดการแอพ ให้กดคลิกที่ปุ่มสีเขียว "สร้างแอพ" (กดปุ่มไหนก็ได้ เหมือนกันทั้งคู่)


 

5. หลังกดปุ่ม "สร้างแอพ" จะแสดงตัวเลือกให้เลือก "อื่น ๆ" 


 

6. เลือกประเภท "ผู้บริโภค" แล้วกดปุ่มต่อไป

 

7. ทำการกรอกข้อมูลเบื้องต้น เฉพาะ ชื่อแอพที่เชื่อมโยงกับ ID ของแอพ ในช่อง "ชื่อที่แสดง" และกรอกอีเมลทำหรับใช้ในการจัดการแอพที่เราสร้างลงในช่อง "อีเมลติดต่อของแอพ" แล้วกดปุ่มสร้างแอพ

    *ไม่จำเป็นต้องเลือก "บัญชีธุรกิจ"

 

8. หลังกดปุ่มสร้างแอพ จะขึ้นหน้าต่างแจ้งให้กรอกพาสเวิร์ดเพื่อยืนยัน

 

9. เมื่อทำการสร้างแอพเสร็จแล้ว จะแสดงหน้าจัดการแอพขึ้นมา ให้ดูหัวข้อ "การเข้าสู่ระบบด้วย Facebook" ด้านขวามือ แล้วกดที่ "ตั้งค่า" ( หากต้องการอ่านรายละเอียดเพิ่มเติมต่าง ๆ ให้คลิกอ่านเอกสาร )

 

10. เลือกแพลตฟอร์มสำหรับแอพ WWW (เว็บ)

 

11. หลังทำการเลือกแพลทฟอร์มแล้ว จะขึ้นหัวข้อ 5 หัวข้อ ให้ดำเนินการทีละข้อดังนี้

  11.1 หัวข้อที่ 1 แจ้งให้เราทราบเกี่ยวกับเว็บไซต์ของคุณ : ทำการกรอกชื่อเว็บไซต์ของคุณในช่อง "URL เว็บไซต์" (เช่น petshopz.com)  แล้วกด "Save" 1 ครั้ง แล้วกดปุ่ม "ดำเนินการต่อ" 

 

  11.2 หัวข้อที่ 2 - 4 ให้กดถัดไป (ในแต่ละหัวข้อจะมีรายละเอียดต่าง ๆ ให้อ่าน)

  11.3 หัวข้อที่ 5 จะแจ้งให้ทราบว่าการเริ่มใช้งานอย่างง่ายเสร็จสิ้นแล้ว ให้กดคลิกเมนูด้านซ้ายมือ "การตั้งค่า" เลือก "ข้อมูลพิ้นฐาน" เพื่อดำเนินการขั้นตอนถัดไป

 

12. หน้าข้อมูลพื้นฐาน ให้ทำการกรอก URL เว็บไซต์ของลูกค้าในช่องด้านล่าง ดังนี้


    1) โดเมนของแอพ: ให้กรอก url 2 แบบ ทั้งแบบมี www กับแบบไม่มี www เช่น animalpetshop.com กับ www.animalpetshop.com
    2) URL นโยบายความเป็นส่วนตัว: กรอกลิงก์ url หน้านโยบายความเป็นส่วนตัว เช่น animalpetshop.com/term/term_privacy
    3) URL ข้อกำหนดของบริการ: กรอกลิงก์ url หน้าข้อกำหนดของบริการ เช่น animalpetshop.com/term/term_condition
    4) การลบข้อมูลผู้ใช้: กรอกลิงก์ url หน้าคำแนะนำการลบข้อมูล เช่น  animalpetshop.com/contact
    5) หมวดหมู่: เลือกหมวดหมู่ที่เกี่ยวข้อง (ม่จำเป็นต้องเลือก)

    เมื่อกรอกเสร็จเรียบร้อยแล้ว ให้กด "บันทึกการเปลี่ยนแปลง" ที่ด้านล่าง
 

13. ไปที่เมนู "การตรวจพิจารณาแอพ" เลือกเมนูย่อยเป็น "สิทธิ์การอนุญาตและฟีเจอร์"
      ให้ตรวจสอบระดับการเข้าถึงของ "public_profile" กับ "email" ว่าเป็น "Advanced Access" หรือไม่ ถ้าไม่ให้ดูที่คอลัมน์ดำเนินการแล้วกด "ขอสิทธิ์การเข้าถึงระดับสูง"

 

14. คลิกที่เมนู "การเข้าสู่ระบบ Facebook" เลือกเมนูย่อยเป็น "การตั้งค่า" แล้วนำลิงค์ https://ชื่อโดเมนเนม/social/callback/facebook (เปลี่ยนตรงชื่อโดเมนเนม เป็นชื่อโดเมนเนมของลูกค้า
      *ให้กรอก url 2 แบบ ทั้งแบบมี www กับแบบไม่มี www

       เช่น https://petshopz.com/social/callback/facebook) ไปใส่ในช่อง "URI เปลี่ยนเส้นทาง OAuth ที่ถูกต้อง" เสร็จแล้วกดบันทึกการเปลี่ยนแปลง

 

 

15. กลับไปที่เมนู "การตั้งค่า" เลือก "ข้อมูลพื้นฐาน" แล้วทำการคัดลอกข้อมูล "ID ของแอพ" กับ "ข้อมูลลับของแอพ" เพื่อใช้ในขั้นตอนถัดไป

 

16. ไปที่ backoffice ของเว็บไซต์ เลือกเมนู "ปรับแต่ง" แล้วกดแถบ "การเชื่อมต่อ" นำข้อมูลที่คัดลอกจากข้อ 14 ไปใส่ในช่องต่อไปนี้

  16.1 นำข้อมูล "ID ของแอพ" มากรอกในช่อง Facebook Client Id

  16.2 นำข้อมูล "ข้อมูลลับของแอพ" มากรอกในช่อง Facebook Client Secret

หลังทำการกรอกครบทั้ง 2 ช่องแล้ว ให้กดคลิกที่บันทึกการเปลี่ยนแปลง 

 

17. กลับไปที่ https://developers.facebook.com/ เลือกเมนูการเข้าสู่ระบบ Facebook -> การตั้งค่า เพื่อดำเนินการต่อดังนี้
  17.1 กดปรับตรง "เข้าสู่ระบบด้วย JavaScript SDK" เป็นใช่
  17.2 กรอกชื่อเว็บไซต์ของคุณลงในช่อง "โดเมนที่อนุญาตสำหรับ JavaScript SDK" เช่น https://petshopz.com
          *ให้กรอก url 2 แบบ ทั้งแบบมี www กับแบบไม่มี www


​​​​​​​18. กดคลิกที่ "เปิดใช้งาน" ตรง "โหมดแอพ: การพัฒนา"


19. หลังกด "เปิดใช้งาน" จะแสดงหน้าต่าง "ตรวจสอบการใช้งานข้อมูลให้เสร็จสมบูรณ์" ให้กดปุ่ม "เริ่มการตรวจสอบ"


 

20. เสร็จแล้วให้กดติ๊กถูกตามช่องแล้วกดปุ่ม "ดำเนินการต่อ" จนจบขั้นตอน แล้วกดปุ่ม "ส่ง"




21. รอการตรวจสอบซักครู่ หากไม่พบปัญหาหรือไม่ต้องการการยืนยันเพิ่มเติม จะแสดงหน้าต่าง "การตรวจสอบการใช้งานเสร็จสมบูรณ์แล้ว"

​​​​​​​


22. ให้กดคลิกที่ "เปิดใช้งาน" ตรง "โหมดแอพ: การพัฒนา" อีกครั้ง จะแสดงเป็นปุ่มสีฟ้า
​​​​​​​

​​​​​​​