วิธีเพิ่มการเข้าสู่ระบบโซเชียลในเว็บไซต์ไดเรกทอรีธุรกิจ WordPress ของคุณ

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

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

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

ในบทช่วยสอนสั้นๆ นี้ เราจะแสดงวิธีตั้งค่าส่วนขยายการตรวจสอบสิทธิ์ HivePress เพื่อให้คุณสามารถอนุญาตให้ผู้เยี่ยมชมเว็บไซต์ของคุณลงชื่อเข้าใช้ผ่าน Facebook และ Google เราจะอธิบายทีละขั้นตอนในการรับ Facebook App ID และ Google Client ID และรวมเข้ากับเว็บไซต์ของคุณอย่างถูกต้อง

ก่อนที่เราจะเริ่มต้น สิ่งสำคัญที่ควรทราบคือส่วนขยายการรับรองความถูกต้องนั้นใช้ HivePress ซึ่งเป็นปลั๊กอินไดเรกทอรี WordPress ฟรี และสามารถใช้ได้เฉพาะบนเว็บไซต์ที่ขับเคลื่อนด้วย HivePress ในบทแนะนำนี้ เราจะใช้ปลั๊กอิน HivePress ร่วมกับธีมไดเรกทอรี WordPress เริ่มต้นอย่าง ListingHive

มาเริ่มกันเลย!

การติดตั้งส่วนเสริมการตรวจสอบสิทธิ์

ก่อนอื่น คุณต้องติดตั้งส่วนขยายการตรวจสอบสิทธิ์โดยไปที่ส่วน HivePress > Extensions จากนั้นเลือกโปรแกรมเสริมที่จำเป็น ติดตั้งและดำเนินการต่อโดยเปิดใช้งานส่วนขยาย

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

หลังจากที่คุณเลือกวิธีการรับรองความถูกต้องสำหรับเว็บไซต์ของคุณแล้ว คุณสามารถดำเนินการขั้นตอนต่อไปได้

การเพิ่มปุ่มเข้าสู่ระบบ Facebook

ในการเพิ่มปุ่ม “เข้าสู่ระบบด้วย Facebook” ในเว็บไซต์ของคุณ คุณต้องรับ ID แอพที่ไม่ซ้ำกันจาก Facebook ก่อน ID นี้เชื่อมโยงเว็บไซต์ของคุณกับ Facebook และอนุญาตให้คุณขอรายละเอียดโปรไฟล์ Facebook (เช่น ที่อยู่อีเมล) ที่ จำเป็นสำหรับการเข้าสู่ระบบของผู้ใช้

มาเริ่มกันที่ขั้นตอนแรกกันเลย

การลงทะเบียนบน Facebook

ก่อนสร้างแอพ Facebook คุณต้องลงทะเบียนบัญชีผู้พัฒนา Facebook ในการดำเนินการดังกล่าว ให้ไปที่หน้า Facebook for Developers และคลิกที่ปุ่ม Log In หรือ Get Started จากนั้น คุณต้องลงชื่อเข้าใช้ด้วยบัญชี FB ของคุณเพื่อดำเนินการต่อ เมื่อคุณยืนยันบัญชีของคุณแล้ว คุณสามารถไปยังขั้นตอนถัดไปได้

การสร้างแอพ

เมื่อคุณลงทะเบียนเสร็จแล้ว คุณสามารถไปที่ App Dashboard เพื่อสร้างแอพแรกของคุณ เพียงคลิกที่ปุ่ม สร้างแอป

จากนั้นคุณต้องเลือกประเภทแอปของคุณ ประเภทของแอพเป็นตัวกำหนดว่า Facebook API ใดที่แอพของคุณสามารถใช้ได้ เพียงแค่บอกว่าจะกำหนดคุณสมบัติที่คุณจะเพิ่มได้ใน App Dashboard ของคุณ เนื่องจากคุณต้องการเปิดใช้คุณลักษณะ "การเข้าสู่ระบบโซเชียล" ในกรณีที่เกี่ยวข้อง คุณจึงต้องใช้ประเภทแอป "ผู้บริโภค"

ถัดไป คุณต้องตั้งชื่อแอป (เช่น ชื่อเว็บไซต์ของคุณ) และป้อนอีเมลที่ถูกต้อง เนื่องจากการแจ้งเตือนของนักพัฒนาซอฟต์แวร์ทั้งหมดจะถูกส่งไปที่นั่น คุณไม่จำเป็นต้องพูดถึงบัญชีตัวจัดการธุรกิจหากคุณไม่มี สุดท้ายให้คลิกที่ปุ่ม สร้างแอป

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

จากนั้น คุณจะเห็นแบบฟอร์มการตั้งค่า ซึ่งคุณสามารถป้อนรายละเอียดเว็บไซต์ของคุณได้ เพื่อให้ผู้ใช้สามารถลงชื่อเข้าใช้เว็บไซต์ของคุณผ่าน Facebook ได้ เพียงแค่กรอกข้อมูลในช่อง URL ของไซต์เท่านั้น แต่ถ้าคุณเป็นผู้ใช้ที่มีประสบการณ์มากกว่า คุณก็สามารถกรอกข้อมูลในช่องอื่นๆ ได้เช่นกัน

ขั้นตอนต่อไปคือไปที่ส่วน การ ตั้งค่า > พื้นฐาน ในแถบด้านข้างทางซ้าย

ในหน้าการตั้งค่า คุณต้อง:

• ป้อนโดเมนเว็บไซต์ของคุณ
• ระบุ URL นโยบายความเป็นส่วนตัว เพื่อให้ผู้ใช้สามารถอ่านได้ก่อนเข้าสู่ระบบ
• ระบุคำแนะนำในการลบข้อมูล (หน้าที่มีข้อมูลเกี่ยวกับวิธีที่ผู้เยี่ยมชมเว็บไซต์ของคุณสามารถลบข้อมูลได้)
• สุดท้าย เลือกหมวดหมู่ที่เว็บไซต์ของคุณเป็นสมาชิก

เมื่อคุณเพิ่มรายละเอียดที่จำเป็นทั้งหมดแล้ว ให้บันทึกการเปลี่ยนแปลง

การเปิดใช้งานการเข้าสู่ระบบโซเชียล

ตกลง คุณเพิ่งสร้างแอป ตอนนี้ คุณต้องเปลี่ยนโหมดแอปเป็น "Live" และคัดลอก App ID

สุดท้าย ไปที่เว็บไซต์ของคุณ ไปที่ WP Dashboard > HivePress > Settings > Integrations วาง Facebook App ID ของคุณในฟิลด์ App ID และบันทึกการเปลี่ยนแปลง

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

ตอนนี้ ไปที่ส่วนถัดไปของบทช่วยสอนนี้เพื่อสร้างและเพิ่มปุ่มเข้าสู่ระบบ Google

การเพิ่มปุ่มเข้าสู่ระบบ Google

หากคุณต้องการเพิ่มปุ่ม “เข้าสู่ระบบด้วย Google” ลงในเว็บไซต์ที่ขับเคลื่อนโดย HivePress คุณต้องได้รับรหัสไคลเอ็นต์เฉพาะจาก Google ที่จะเชื่อมโยงเว็บไซต์ของคุณกับ API การตรวจสอบสิทธิ์ของ Google มาทำกัน!

การสร้างโครงการใหม่

ขั้นตอนแรกคือการสร้างโครงการ Google API ใหม่ (คุณอาจใช้โครงการที่มีอยู่ถ้าคุณมีอยู่แล้ว) โดยไปที่คอนโซล Google API และคลิกที่ปุ่ม สร้างโครงการ จากนั้นคุณต้องป้อนชื่อโครงการของคุณและคลิกที่ปุ่ม สร้าง

ตอนนี้คุณต้องไปที่ส่วน หน้าจอคำยินยอม OAuth และเลือกตัวเลือกหน้าจอคำยินยอม OAuth (ภายในหรือภายนอก) ตามความต้องการเว็บไซต์ของคุณ เพื่อประโยชน์ของบทช่วยสอนนี้ เราจะเลือกตัวเลือก ภายนอก

จากนั้นคุณจะถูกเปลี่ยนเส้นทางไปยังแบบฟอร์มการลงทะเบียนแอป ภายในแบบฟอร์มนี้ คุณต้อง:

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

เมื่อเสร็จแล้วให้คลิกที่ปุ่ม บันทึก คุณสามารถข้ามขั้นตอนอื่นๆ ภายในแบบฟอร์มลงทะเบียนและกลับมาที่แดชบอร์ดของคุณได้

ขั้นตอนต่อไปคือการสร้างข้อมูลรับรอง API กล่าวคือ – OAuth Client ID คุณสามารถทำได้โดยไปที่ส่วน ข้อมูลรับรอง > สร้างข้อมูลรับรอง > รหัสไคลเอ็นต์ OAuth

ภายในส่วนนี้ คุณต้องกรอกข้อมูลในฟิลด์ชื่อ และป้อน URL ของเว็บไซต์ของคุณในช่อง “ต้นกำเนิด JavaScript ที่ได้รับอนุญาต” หรือคุณสามารถกรอกข้อมูลในช่อง “URL เปลี่ยนเส้นทางที่ได้รับอนุญาต” หากคุณต้องการระบุเส้นทางที่ผู้ใช้จะถูกเปลี่ยนเส้นทางหลังจากที่พวกเขาเข้าสู่ระบบด้วย Google

เมื่อเสร็จแล้วให้คลิกที่ปุ่ม บันทึก

การเปิดใช้งานการเข้าสู่ระบบโซเชียล

สุดท้าย คุณได้รับรหัสลูกค้าที่ไม่ซ้ำ ตอนนี้คุณต้องคัดลอกและวางลงใน WP Dashboard > HivePress > Settings > Integrations > Client ID อย่าลืมบันทึกการเปลี่ยนแปลง

บทสรุป

แค่นั้นแหละ! เมื่อทำตามขั้นตอนข้างต้น คุณจะตั้งค่าส่วนขยายการตรวจสอบสิทธิ์ได้ง่ายๆ และอนุญาตให้ผู้ใช้เข้าสู่ระบบผ่านบริการของบุคคลที่สาม เช่น Facebook และ Google เมื่อคุณทำตามขั้นตอนทั้งหมดเสร็จแล้ว คุณจะมีปุ่ม Facebook และ Google เดียวกันในแบบฟอร์มการเข้าสู่ระบบ ดังที่แสดงในภาพหน้าจอด้านล่าง

หากคุณมีปัญหาใดๆ ในการเพิ่มปุ่มเข้าสู่ระบบโซเชียล โปรดลองปิดการใช้งานปลั๊กอินของบุคคลที่สาม (อาจมีปัญหาในการแคชหรือมีข้อขัดแย้งกับปลั๊กอินของบุคคลที่สาม) นอกจากนี้ โปรดตรวจสอบให้แน่ใจว่าคุณได้เปิดใช้งานวิธีการรับรองความถูกต้องในส่วน HivePress > การตั้งค่า > ผู้ใช้ และบันทึกการเปลี่ยนแปลง

นอกจากนี้ หากคุณต้องการเพิ่มประสิทธิภาพเว็บไซต์ของคุณ เราแนะนำให้ตรวจสอบบทช่วยสอนของเราเกี่ยวกับวิธีเพิ่มความเร็วให้กับเว็บไซต์ที่สร้างโดย HivePress