Accessibility Tools

ใช้ Facebook Connect Login กับ Joomla 2.5 และ joomla 3.x

Facebook Connect Login joomla

การสมัครสมาชิกในยุคของเว็บ 2.0 ตอนนี้ มีการเชื่อมต่อกับ social network เป็นหลักเพื่อให้ง่ายต่อสมาชิกที่สนใจเว็บเราไม่ต้องมากรอกข้อมูลให้ยุ่งยาก  คนไทยใช้ Facebook 18 ล้านคน  หรือ 85% จาก social network ทั้งหมด Facebook Connect Login คงเป็นตัวเลือกแรกที่น่าสนใจที่สุด

 เนื่องจากผมพยายามหาอะไรที่ง่ายๆ สำหรับคนที่เริ่มต้นทำเว็บ และที่สำคัญพยายามหาที่ไม่ต้องเสียเงิน เลยไปเจอ JLV Facebook Login Module โหลดไมาใช้งานได้ฟรี มีให้ใช้ทั้ง Joomla 2.5 และ joomla 3.x

Facebook Login Joomla 2.5

เริ่มต้นด้วยการไป โหลด โมดูลที่ http://jlvextension.com/facebook-login-module/

จากนั้นนำมาติดตั้ง 

facebook connect install

 

ติดตั้งแล้วให้ไปที่ Extension >> Module Manager จะเจอ โมดูล JLV Facebook Login คลิ๊กเข้าไปจัดการเลย

facebook connect install 2

 

สิ่งที่ต้องแก้ไขให้ดูตามหมายเลข

facebook connect install 3

  1. ชื่อโดมูล สามารถเปลี่ยนได้
  2. Position : เป็นตำแหน่งที่ต้องการให้โมดูลนี้แสดง แต่ละแทมเพลตไม่เหมือนกัน
  3. Status : เลือกเป็น Published

ต่อมาให้เลือนลงมาดูตรง Menu Assignment เป็นการเลือกว่าโมดูลนี้แสดงที่ไหนหน้าไหนบ้าง ในที่นี้ผมเลือกแสดงทุกหน้า 

facebook connect install 4

ต่อไปมาดู ในส่วนของการตั้งค่า Facebook App Settings ทั้งสองช่อง เราจะได้ก็ต่อเมื่อเราไปเปิดใช้งาน Facebook App


*อ่านวิธีการสมัครได้ที่ Tap การสมัคร facebook app

facebook connect 5

 

บันทึกข้อมูลในโมดูล แล้วหน้าเว็บจะมี Facebook  login แล้ว

 

facebook connect 13

 

โมดูลตัวนี้มี ระบบ login ของ joomla มาด้วย สามารถเลือกเปิดปิดได้เลย

facebook connect 15

โมดูล JLV Facebook Login สามารถปรับแต่งได้ โดยเฉพาะ รูปปุ่ม Login ให้เปลี่ยนที่ FB Login Image

facebook connect 16

Facebook Login Joomla 3.x

เริ่มต้นด้วยการไป โหลด โมดูลที่ http://jlvextension.com/facebook-login-module/

จากนั้นนำมาติดตั้ง 

facebook connect install joomla3 1

ติดตั้งแล้วให้ไปที่ Extension >> Module Manager จะเจอ โมดูล JLV Facebook Login คลิ๊กเข้าไปจัดการเลย

facebook connect install joomla3 2

สิ่งที่ต้องแก้ไขให้ดูตามหมายเลข

facebook connect install joomla3 3

  1. ชื่อโดมูล สามารถเปลี่ยนได้
  2. Position : เป็นตำแหน่งที่ต้องการให้โมดูลนี้แสดง แต่ละแทมเพลตไม่เหมือนกัน
  3. Status : เลือกเป็น Published

ต่อมาให้เลือนลงมาดูตรง Menu Assignment เป็นการเลือกว่าโมดูลนี้แสดงที่ไหนหน้าไหนบ้าง ในที่นี้ผมเลือกแสดงทุกหน้า 

facebook connect install joomla3 4

ต่อไปมาดู ในส่วนของการตั้งค่า Facebook App Settings ทั้งสองช่อง เราจะได้ก็ต่อเมื่อเราไปเปิดใช้งาน Facebook App

*อ่านวิธีการสมัครได้ที่ Tap การสมัคร facebook app

facebook connect install joomla3 5

 

จากนั้นให้เรากลับไปบันทึกข้อมูลในโมดูล แล้วหน้าเว็บจะมี Facebook  login แล้ว

facebook connect install joomla3 8

 

โมดูลตัวนี้มี ระบบ login ของ joomla มาด้วย สามารถเลือกเปิดปิดได้เลย

facebook connect install joomla3 6

โมดูล JLV Facebook Login สามารถปรับแต่งได้ โดยเฉพาะ รูปปุ่ม Login ให้เปลี่ยนที่ FB Login Image

facebook connect install joomla3 7

การสมัคร Facebook App

การสมัคร Facebook App เพื่อขอ App ID และ App Secret

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

facebook connect 6

กรอกข้อมูล ตามฟอร์ม

  1. ชื่อที่ต้องการแสดง อาจใส่เป็นชื่อเว็บ ใช้ภาษาไทยได้
  2. เลือกหมวดหมู่ให้ตรงกับเว็บ
  3. คลิ๊กสร้าง

facebook connect 7

ระบบจะให้กรอก CAPTCHA Code ก็หรอกให้ตรง

facebook connect 8

ได้มาแล้ว 

  1. App ID  คัดลอกไปหรอกในโมดูลได้เลย
  2. App Secret  มันจะซ่อนอยู่ให้ คลิ๊ก Show จะมีหน้าให้กรอกรหัสผ่าน Facebook ของเรา กรอกเสร็จมันจะแสดง App Secret มา

facebook connect 9

เมื่อเราได้ App ID และ App Secret แล้ว ให้ไปที่เมนู Setings คลิ๊ก +Add Platform เพื่อเลือกว่าเราจะเอาไปใช้กับอะไร

facebook connect 10

เมื่อเราคลิ๊ก +Add Platform ให้เลือก WebSite

facebook connect 11

จากนั้นให้กรอกที่อยู่เว็บของเราลงไป

 facebook connect 12

หากต้องการเปลี่ยนโลโก้ของ Facebook App ให้ไปที่เมนู App Details แล้วใส่รูป Logo ขนาด 1024x1024 ลงไป ขยายเลยครับ แตกช่างมัน

facebook connect 14