การติดตั้ง Facebook Page Plugin (Like Box) ในระบบ VelaEasy


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

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

โดยวิธีการสร้าง Like Box และนำไปติดตั้งในเว็บไซต์สำเร็จรูป ReadyPlanet ระบบ VelaEasy มีวิธีการทำที่ไม่ยาก ดังนี้ค่ะ

(สำหรับท่านที่ยังไม่ได้สร้าง Facebook Page สามารถดูวิธีการสร้าง คลิกที่นี่ ค่ะ)


1. Copy URL ของ Facebook Fan Page ของคุณ ตัวอย่าง Fan Page ของ ReadyPlanet มี URL คือ www.facebook.com/readyplanet เป็นต้น


ในกรณีที่คุณยังไม่ตั้งชื่อ URL หน้า Facebook Fan Page อย่างเป็นทางการ
ทำให้ไม่สามารถนำ URL ที่เป็น www.facebook.com/ชื่อเพจ มาใช้งานได้ ก็สามารถ Copy URL Page แบบชั่วคราว โดยเปิดหน้า Page Facebook ที่คุณสร้างไว้ตามปกติ แล้วคัดลอก URL ของ Page ที่ปรากฎ ดังรูปค่ะ (หากต้องการตั้งชื่อ URL Page ก่อน สามารถตั้งได้ที่ http://www.facebook.com/username ค่ะ)

 

2. จากนั้นไปที่ url  https://developers.facebook.com/docs/plugins/page-plugin  จะเข้าสู่หน้า Page Plugin เพื่อสร้างโค้ด Like box โดยเลือกรูปแบบการแสดงผลของ Like Box ตามหัวข้อที่ปรากฎ โดยจะมีการแสดงตัวอย่าง Like Box ปรากฎให้เห็นด้วย

 Facebook Page URL ให้วาง URL ของ Facebook Page ที่คุณคัดลอกมาจากขั้นตอนในข้อที่ 1

 Tab พิมพ์ข้อความเพื่อเลือกการแสดงผลข้อมูลจากแท็บต่าง ๆ ที่อยู่ใน Page ของคุณ ใน Like Box เช่น Timeline เพื่อแสดงโพสต์ต่าง ๆ, Messages จะทำให้ Like Box มีช่องให้ผู้ชมส่งข้อความ Inbox ถึงเพจได้ทันที หรือ Events จะแสดงผลกำหนดการที่เพจได้สร้างไว้ เป็นต้น

 Width คือ ขนาดความกว้างของ Like Box (ความกว้างเริ่มต้นที่ Facebook กำหนดให้คือ 180 pixels กว้างสูงสุดไม่เกิน 500 pixels)

 Height คือ  ขนาดความสูงของ Like Box (ความสูงเริ่มต้นที่ 70 pixels)

 ตัวเลือก Use Small Header แสดงผลข้อมูลเพจเป็นส่วนหัว เฉพาะ รูปโปรไฟล์เพจ, ชื่อเพจ, ปุ่ม Like, และจำนวนคนที่กด Like แล้ว

 ตัวเลือก Adapt to plugin container width เลือกเพื่อให้ Like Box ปรับขนาดให้พอดีกับพื้นที่ติดตั้ง plug in โดยอัตโนมัติ

 ตัวเลือก Hide Cover Photo คลิกเลือกเพื่อไม่ให้ภาพ Cover ของ Page แสดงผลใน Like Box

 ตัวเลือก Show Friend's Faces คลิกเลือกแสดงหรือไม่แสดงรูปโปรไฟล์ของสมาชิกใน Page ใน Like Box

เมื่อตั้งค่าการแสดงผลของ Like Box ตามต้องการแล้ว คลิกปุ่ม Get Code
 


 

3. จะปรากฎหน้าต่างสำหรับรับ Code ให้คลิกที่แท็บ IFrame และคัดลอกโค้ดที่ปรากฎ 

 

4. วิธีการติดตั้งโค้ด Like Box ในเว็บไซต์ VelaEasy ที่เมนูด้านข้าง คลิกเมนู "เพิ่ม  Widget" ปรากฎหน้าต่าง "เลือกประเภท Widget" ให้คลิกปุ่ม "HTML"


 

5. จะปรากฎหน้าต่าง "พิมพ์ HTML Code ลงในช่องด้านล่างนี้" ให้วางโค้ดที่คัดลอกมาในช่องว่าง และคลิก "บันทึก"



 

แสดงผล Facebook Page Plugin บนหน้าเว็บไซต์ในพื้นที่ Widget ด้านข้าง

 

กรณีต้องการวางโค้ด Facebook Page Plugin ที่พื้นที่ด้านล่างเว็บไซต์ระบบ VelaEasy

6. ไปที่บริเวณ Footer พื้นที่ด้านล่างของเว็บไซต์ เมื่อปรากฎสัญลักษณ์  ให้คลิก "แก้ไขด้วย Text Editor"

 

7. ระบบแสดงหน้า Text Editor ให้คลิกที่ไอคอน "Edit HTML Source" ใน Text Editor Version 3 หรือคลิกที่แถบเมนู Tools > "Source Code" สำหรับเว็บไซต์ที่เลือกใช้เครื่องมือ Text Editor Version 4 ค่ะ


9. ระบบแสดงหน้าต่าง Source Code ให้วางโค้ด IFrame และคลิก OK

 

10. ระบบจะแสดงหน้า Text Editor อีกครั้ง ให้คลิก บันทึก

 

 

แสดงผล Facebook Page Plugin บนหน้าเว็บไซต์ในพื้นที่ Footer ด้านล่างของเว็บไซต์

นอกจากนี้ เครื่องมือ HTML Widget ยังรองรับการตกแต่งเว็บไซต์ด้วยโค้ด HTML อื่น ๆ ได้อีกหลายชนิด เช่น โค้ด Slide , โค้ดอัตราแลกเปลี่ยน, โค้ดราคาน้ำมัน, โค้ดพยากรณ์อากาศ ฯลฯ แต่อย่างไรก็ตาม ReadyPlanet ไม่แนะนำให้นำ code จากเว็บไซต์ต่าง ๆ ที่เสถียรภาพของเว็บไซต์ไม่ดี หรือมี server อยู่ต่างประเทศ เนื่องจากการเปิดหน้าเว็บไซต์ของคุณ จะขึ้นอยู่กับความเร็ว และเสถียรภาพของระบบของเว็บไซต์ที่คุณนำ code มาติดตั้งด้วย เช่น หาก server ของ code ที่นำมาติดล่ม หรือโหลดช้า จะทำให้เว็บของคุณเปิดไม่ได้หรือโหลดช้าด้วย 

หากพบปัญหาเกิดขึ้น วิธีการแก้ไขคือ เข้าไปลบ code ต่าง ๆ เหล่านี้ออก เว็บไซต์ของคุณก็จะทำงานได้ตามปกติค่ะ


 




VelaEasy Tips

เตรียมข้อมูลทำเว็บไซต์อย่างไรดี
เริ่มต้นใส่ข้อมูลในระบบเว็บไซต์พร้อมใช้ VelaEasy
แนะนำขนาดรูปภาพสำหรับใส่ในเว็บไซต์ VelaEasy
วิธีใส่รูปภาพในเนื้อหาของเว็บไซต์
วิธีอัพโหลดไฟล์เอกสารและสร้างลิงก์สำหรับดาวน์โหลด
วิธีสร้างลิงก์ให้กับข้อความและรูปภาพ
เทคนิคการจัดการเมนูด้านบนที่สวยและดี
จัดการข้อมูลเมนูด้านข้างอย่างไรดี?
เลือกใช้สีในหน้าเว็บไซต์อย่างไรให้เหมาะสม?
วิธีใส่คีย์เวิร์ดในเว็บไซต์เพื่อให้ Google จัดเว็บไซต์ในอันดับที่ดี
4 วิธี เคลียร์เนื้อหายาวๆ ในเว็บไซต์ ให้น่าอ่าน
5 องค์ประกอบของเว็บไซต์ที่ดี
5 สิ่งที่ต้องมี บนโฮมเพจเว็บไซต์
เทคนิคการสร้างลิงก์ไปยังตำแหน่งที่ต้องการ ด้วยเครื่องมือ Anchor
แนะนำวิธีหากลืมรหัสผ่านเข้าสู่หน้าแก้ไขเว็บไซต์สำเร็จรูป VelaEasy
วิธีติดตั้งโค้ดนับจำนวนผู้เข้าชมเว็บไซต์
วิธีแสดงผล VDO ในเว็บไซต์ VelaEasy
แนะนำโปรแกรมตกแต่งและใส่กรอบรูปภาพฟรี! ใช้ง่าย นำไปแต่งเว็บให้โดดเด่นได้เลย
ใช้ระบบ Chat บนหน้าเว็บไซต์ ช่วยถามตอบทุกข้อสงสัย พร้อมเพิ่มโอกาสปิดการขายได้มากกว่า
โชว์เส้นทาง สร้างแผนที่บนเว็บไซต์ง่ายๆ ใช้ Google Map
Google Verification (วิธียืนยันการเป็นเจ้าของเว็บไซต์กับทาง Google)
วิธีการสร้างและยืนยัน Sitemap ของเว็บไซต์ระบบ VelaEasy กับทาง Google
วิธีติดตั้งโค้ด Google Analytics ในระบบ VelaEasy
ติดตั้งเครืองมือแปลภาษา Google Translate บนหน้าเว็บไซต์
ไขข้อข้องใจ "การทำเว็บไซต์ภาษาที่สอง"
สร้างฐานลูกค้าออนไลน์อย่างง่ายแต่มั่นคง ด้วยระบบสมาชิก
เทคนิคสร้างลิงก์และปุ่มโทรบนเว็บไซต์ เพื่อการติดต่อที่ง่าย แค่คลิก แล้วโทร
วิธีเพิ่มลิงก์ Add LINE และปุ่ม LINE it! บนหน้าเว็บไซต์ ช่วยผู้ชมแชทง่าย แชร์ข้อมูลได้สะดวก
เทคนิคแสดงผลแบนเนอร์กิจกรรม ด้วยรูปภาพที่คุณออกแบบเอง
วิธีการแก้ปัญหา hotmail ไม่ได้รับอีเมลแจ้งรหัสผ่าน article