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

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

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

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

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

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

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

การติดตั้งส่วนเสริมการเข้าสู่ระบบโซเชียล

ก่อนอื่น คุณต้องติดตั้งส่วนขยาย Social Login โดยไปที่ส่วน WP Dashboard > Plugins > Add New > Upload Plugin จากนั้นเลือกนามสกุลไฟล์ ZIP ติดตั้งและดำเนินการต่อโดยเปิดใช้งานนามสกุล

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

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

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

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

ไปที่ขั้นตอนแรกกันเถอะ

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

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

การสร้างแอพ

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

จากนั้นคุณต้องเลือกประเภทแอพของคุณ ประเภทของแอพจะกำหนดว่า Facebook API ใดที่แอพของคุณสามารถใช้ได้ เพียงแค่บอกว่าเป็นการกำหนดคุณสมบัติที่คุณจะสามารถเพิ่มใน App Dashboard ของคุณ เนื่องจากคุณต้องการเปิดใช้ฟีเจอร์ “Social Login” ในกรณีนี้ คุณจึงต้องใช้แอปประเภท “Consumer”

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

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

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

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

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

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

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

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

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

สุดท้าย ไปที่เว็บไซต์ของคุณ ไปที่ส่วน 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 เหมือนกันในแบบฟอร์มการเข้าสู่ระบบ ดังที่แสดงในภาพหน้าจอด้านล่าง

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

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

คุณอาจต้องการตรวจสอบบทความอื่นๆ ของเรา:

• รายการปลั๊กอินไดเรกทอรี WordPress ที่ดีที่สุด
• รายชื่อธีมไดเร็กทอรี WordPress ฟรียอดนิยม