ปลั๊กอินของเพจ

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

หัวข้อที่เกี่ยวข้อง: คำถามที่พบบ่อยเกี่ยวกับโซเชียลปลั๊กอิน | โซเชียลปลั๊กอินอื่นๆ

URL เพจ Facebook

แท็บ

ความกว้าง

ความสูง

ใช้ส่วนหัวขนาดเล็ก

ปรับให้เข้ากับความกว้างคอนเทนเนอร์ของปลั๊กอิน

ซ่อนรูปภาพหน้าปก

แสดงใบหน้าของเพื่อน

รับรหัส

การตั้งค่า

นอกเหนือจากการตั้งค่าข้างต้นแล้ว คุณยังสามารถเปลี่ยนรายการต่อไปนี้ได้

การตั้งค่า	แอตทริบิวต์ HTML5	คำอธิบาย	ค่าเริ่มต้น
`href`	`data-href`	URL ของเพจ Facebook	ไม่มี
`width`	`data-width`	ความกว้างเป็นพิกเซลของปลั๊กอิน ค่าต่ำสุดคือ `180` และค่าสูงสุดคือ `500`	`340`
`height`	`data-height`	ความสูงของปลั๊กอินเป็นพิกเซล ค่าต่ำสุดคือ `70`	`500`
`tabs`	`data-tabs`	แท็บที่จะเรนเดอร์ ได้แก่ `timeline`, `events`, `messages` ให้ใช้รายการที่คั่นด้วยเครื่องหมายจุลภาคเพื่อเพิ่มหลายๆ แท็บ ได้แก่ `timeline, events`	`timeline`
`hide_cover`	`data-hide-cover`	ซ่อนรูปภาพหน้าปกในส่วนหัว	`false`
`show_facepile`	`data-show-facepile`	แสดงรูปภาพโปรไฟล์เมื่อเพื่อนถูกใจสิ่งนี้	`true`
`hide_cta`	`data-hide-cta`	ซ่อนปุ่มการกระตุ้นให้ดำเนินการที่กำหนดเอง (ถ้ามี)	`false`
`small_header`	`data-small-header`	ใช้ส่วนหัวเล็กแทน	`false`
`adapt_container_width`	`data-adapt-container-width`	พยายามให้พอดีกับความกว้างของคอนเทนเนอร์	`true`
`lazy`	`data-lazy`	`true` หมายถึงการใช้กลไก lazy-loading ของเบราว์เซอร์โดยการตั้งค่าแอตทริบิวต์ iframe `loading="lazy"` ผลที่ได้คือเบราว์เซอร์จะไม่เรนเดอร์ปลั๊กอิน หากไม่อยู่ใกล้กับวิวพอร์ต และอาจไม่เห็นเลย โดยสามารถเป็น `true` หรือ `false` (ค่าเริ่มต้น) ก็ได้	`false`

แอตทริบิวต์ที่เลิกใช้

เราได้เลิกใช้แอตทริบิวต์ data-show-posts แล้ว โปรดใช้แอตทริบิวต์ tabs/data-tabs และใช้ค่า timeline เพื่อแสดงโพสต์จากไทม์ไลน์ของเพจ

การเพิ่มปลั๊กอินของเพจไปยังเว็บไซต์

การกำหนดค่ามาตรฐานสำหรับปลั๊กอินของเพจจะมีเฉพาะส่วนหัวและรูปภาพหน้าปกเท่านั้น ขนาดนี้เหมาะอย่างยิ่งสำหรับการโปรโมทเพจของคุณในพื้นที่ขนาดเล็ก เช่น ส่วนบนของแถบด้านข้าง

<div class="fb-page" 
data-href="https://www.facebook.com/facebook"
data-width="380" 
data-hide-cover="false"
data-show-facepile="false"></div>

การกระตุ้นให้ดำเนินการ

หากเพจของคุณมีปุ่มกระตุ้นให้ดำเนินการแบบกำหนดเอง สิ่งนี้จะแสดงขึ้นมาแทนที่ปุ่มกระตุ้นให้ดำเนินการแบบค่าเริ่มต้น ซึ่งก็คือ ปุ่มแชร์

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

แท็บในเพจ: ไทม์ไลน์ งานกิจกรรม และข้อความ

ในตอนนี้ คุณจะมีแท็บไทม์ไลน์งานกิจกรรม และข้อความบนปลั๊กอิน ดังนี้

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

การเปิดใช้งานการส่งข้อความบนเพจของคุณ

หากต้องการเปิดใช้งานการส่งข้อความบนเพจ Facebook ของคุณ ให้ไปที่ Settings ของเพจ ให้ทำเครื่องหมายที่อนุญาตให้ผู้คนติดต่อเพจของฉันได้เป็นการส่วนตัว โดยการแสดงปุ่ม “ส่งข้อความ” ในแถว Messages (ลิงก์โดยตรง: https://www.facebook.com/{your-page-name}/settings/?tab=settings&section=messages&view)

การเพิ่มแท็บหลายรายการ

ให้ใช้รายการที่คั่นด้วยเครื่องหมายจุลภาคภายในแอตทริบิวต์ data-tabs เพื่อเพิ่มแท็บหลายรายการดังนี้

<div class="fb-page" 
data-tabs="timeline,events,messages"
data-href="https://www.facebook.com/YoloBookStore"
data-width="380" 
data-hide-cover="false"></div>

แท็บเดียว

คุณยังสามารถเพิ่มเพียงแท็บเดียวได้โดยแสดง timeline, events หรือ messages อย่างใดอย่างหนึ่ง

<div class="fb-page" 
data-tabs="events"
data-href="https://www.facebook.com/YoloBookStore"
data-width="380"></div>

ความกว้างที่ปรับเปลี่ยนได้

โดยค่าเริ่มต้น ปลั๊กอินจะปรับให้เข้ากับ width ของคอนเทนเนอร์หลักเมื่อโหลดเพจ (ต่ำสุด 180px / สูงสุด 500px) ซึ่งมีประโยชน์ในการเปลี่ยนแปลงเลย์เอาท์

<div style="width: 190px;">
<!-- Page plugin's width will be 190px -->
<div class="fb-page" data-href="{url}" data-width="420"></div>
</div>

หาก width ขององค์ประกอบหลักมีขนาดใหญ่กว่า width ของปลั๊กอินของเพจ ปลั๊กอินจะคงค่าที่ระบุไว้ใน data-width ดังนี้

<div style="width: 600px;">
<!-- Page plugin's width will be 500px -->
<div class="fb-page" data-href="{url}" data-width="500"></div>
</div>

ปลั๊กอินจะต้องมีขนาดไม่เล็กไปกว่า 180px

<div style="width: 100px;">
<!-- Page plugin's width will be 180px -->
<div class="fb-page" data-href="{url}" data-width="320"></div>
</div>

คุณสามารถปิดความกว้างที่ปรับเปลี่ยนได้โดยการเลิกทำเครื่องหมายที่ “ปรับให้เข้ากับความกว้างคอนเทนเนอร์ของปลั๊กอิน” และปลั๊กอินจะเรนเดอร์ที่ความกว้างตามที่ระบุไว้โดยไม่คำนึงถึงคอนเทนเนอร์หลัก

ไม่มีการปรับขนาดแบบไดนามิก

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

ปลั๊กอินจะกำหนด width ของตัวเองเมื่อโหลดเพจ
ระบบจะไม่ตอบสนองต่อการเปลี่ยนแปลงที่เกิดขึ้นกับรูปแบบกล่องหลังจากโหลดเพจ

หากคุณต้องการปรับ width ของปลั๊กอินเมื่อมีการปรับขนาดหน้าต่าง คุณจำเป็นต้องเรนเดอร์ปลั๊กอินอีกครั้งด้วยตนเอง

แสดงใบหน้าของเพื่อน

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

คุณสามารถเปิดใช้งานตัวเลือกนี้ได้โดยการทำเครื่องหมายที่ Show Friend's Faces ในตัวกำหนดค่า

<div class="fb-page"
data-href="https://www.facebook.com/imdb" 
data-width="340"
data-hide-cover="false"
data-show-facepile="true"></div>

เพจที่จำกัดความเป็นส่วนตัว

เพจ Facebook กับการจำกัดความเป็นส่วนตัวไม่สามารถฝังได้

การเปลี่ยนภาษา

คุณสามารถเปลี่ยนภาษาของปลั๊กอินของเพจได้โดยการโหลด Facebook JavaScript SDK เวอร์ชั่นที่แปลเป็นภาษาท้องถิ่น เมื่อคุณโหลด SDK ดังกล่าว ให้เปลี่ยนค่าของ js.src เพื่อใช้รูปแบบภาษาของคุณ ให้แทนที่ en_US ด้วยรูปแบบภาษาของคุณ เช่น ru_RU สำหรับภาษารัสเซีย (รัสเซีย) ดังนี้

ตัวอย่าง

js.src = "https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&amp;version=v2.5";

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