Like Box ใน Facebook

[การทำเว็บเพื่อการตลาดออนไลน์] วิธีการทำปุ่ม Like Box ใน Facebook และติดตั้งในเว็บไซต์

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

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

1. ไปที่ url http://developers.facebook.com/docs/reference/plugins/like-box จะเข้าสู่หน้าบริการ Social Plugin เพื่อสร้างโค้ด Like box

2. Copy URL ของ Facebook Fan Page ที่เราสร้างมาใส่ไว้ในช่อง Facebook Page URL (ตัวอย่าง Fan Page ของ ReadyPlanet มี URL คือ www.facebook.com/readyplanetเป็นต้น) จากนั้น เลือกรูปแบบการแสดงผลของ Like Box ตามหัวข้อที่ปรากฎ โดยจะมีการแสดงตัวอย่างทางด้านขวา

Width คือความกว้างของกล่อง (ขนาดที่เหมาะสมคือ 200 pixels ค่ะ)

Color Scheme มีให้เลือกมืดกับสว่าง หรือ ขาวกับดำ

Connections เลือกได้ว่าจะให้แสดงผู้ที่กด Like Page เป็นตัวอย่างจำนวนกี่คน

Stream เลือกแสดงหรือไม่แสดงการโพสต์ล่าสุดจาก Page

Header เลือกแสดงหรือไม่แสดงแถบหัวข้อด้านบนสุดของ Like box

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

จากนั้น นำ URL Page ชั่วคราว ไปวางในช่อง Facebook Page URL และปรับแต่งรูปแบบการแสดงผลได้ตามปกติค่ะ

3. เมื่อตั้งค่าการแสดงผลเสร็จแล้ว คลิกปุ่ม Get Code

4. จากนั้น Copy Code ที่ปรากฎในช่อง iframe

5. วิธีการติดตั้งโค้ด Like Box ในเว็บไซต์ โดยล็อกอินเข้าส่วนสมาชิก ที่เมนู "จัดการเว็บไซต์" คลิกเมนู "พื้นที่แบนเนอร์" จากนั้นคลิก "เพิ่มแบนเนอร์" และเลือกรูปแบบของแบนเนอร์เป็น "ใช้ HTML Code" ทำการวางโค้ดที่คัดลอกมาในช่อง HTML Code และคลิก "ตกลง" เพื่อบันทึกค่ะ

แสดงผล Like Box จาก Facebook Fan Page บนหน้าเว็บไซต์

ข้อแนะนำเพิ่มเติม

ในการ Get Code จาก Facebook ที่เลือก ไม่แสดง Stream ความสูงของ Like Box จะถูกกำหนดให้สูงเพียง 62 pixels ซึ่งจะทำให้การแสดงผล Like box บนหน้าเว็บไซต์มีขนาดเล็ก

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%

2Freadyplanet&amp;width=200&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;

stream=false&amp;header=true&amp;height=62" scrolling="no" frameborder="0" style="border:none;

overflow:hidden; width:200px; height:62px;" allowTransparency="true"></iframe>

ในส่วนนี้ ท่านสามารถแก้ไขขนาดความสูงของ Like box ให้มากขึ้น โดยการคลิกแก้ไขพื้นที่แบนเนอร์ที่ใส่โค้ด Like box อยู่ แล้วพิมพ์ตัวเลขขนาดความสูงที่ต้องการแทนที่เลข 62 ซึ่งมี 2 ตำแหน่ง ดังตัวอย่างโค้ดด้านล่าง (ส่วนที่ตัวอักษรสีแดงค่ะ)

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%

2Freadyplanet&amp;width=200&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;

stream=false&amp;header=true&amp;height=300" scrolling="no" frameborder="0" style="border:none;

overflow:hidden; width:200px; height:300px;" allowTransparency="true"></iframe>

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

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

แม้ว่าทางทีมงาน ReadyPlanet จะไม่สามารถ Support โปรแกรมตกแต่งเว็บไซต์อื่น ๆ หรือโปรแกรมตกแต่งรูปภาพต่าง ๆ ให้ท่านได้โดยตรง แต่ท่านสามารถดูรายละเอียด เทคนิคการตกแต่งเว็บไซต์เพิ่มเติมได้ที่ ReadyPlanet-HowTo ค่ะ

08 July 2011

www.ReadyPlanet.com