โซเชียลปลั๊กอิน

โพสต์แบบฝัง

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

ตัวสร้างโค้ด

URL ของโพสต์
ความกว้างของโพสต์ในหน่วยพิกเซล (ระหว่าง 350 ถึง 750)
รับรหัส

การตั้งค่า

การตั้งค่า คำอธิบาย ค่าเริ่มต้น

data-href

URL ที่สมบูรณ์ของโพสต์

n/a

data-lazy

true หมายถึงการใช้กลไก lazy-loading ของเบราว์เซอร์โดยการตั้งค่าแอตทริบิวต์ iframe loading="lazy" ผลที่ได้คือเบราว์เซอร์จะไม่เรนเดอร์ปลั๊กอิน หากไม่อยู่ใกล้กับวิวพอร์ท และอาจไม่เห็นเลย โดยสามารถเป็น true หรือ false (ค่าเริ่มต้น) ก็ได้

false

data-width

ความกว้างของโพสต์ ต่ำสุด 350 พิกเซล สูงสุด 750 พิกเซล เว้นว่างไว้หากต้องการใช้ความกว้างแบบไม่ตายตัว

ความกว้างแบบไม่ตายตัว

data-show-text

ใช้กับโพสต์แบบรูปภาพ ตั้งค่าเป็น true เพื่อรวมข้อความจากโพสต์บน Facebook (หากมี)

false

การขอรับโค้ดจากโพสต์

1. ไปยังโพสต์ของคุณ

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

เลือก Embed Post จากเมนูดร็อปดาวน์

สำหรับโพสต์แบบรูปภาพ ให้เลือกปุ่ม Embed Post ที่ด้านล่างขวา

2. คัดลอกและวางโค้ด

คุณจะเห็นกล่องโต้ตอบปรากฏขึ้นพร้อมโค้ดที่จะใช้ฝังโพสต์ของคุณลงไป ให้คัดลอกและวางโค้ดนี้ลงในเว็บเพจของคุณในตำแหน่งที่คุณต้องการให้ปรากฏ

โปรดดูรายละเอียดทางเทคนิคที่ส่วนเพิ่มโค้ดด้วยตนเอง

เพิ่มโค้ดด้วยตนเอง

นอกจากการใช้ตัวสร้างโค้ดแล้ว คุณยังสามารถฝังโค้ดด้วยตนเองได้อีกด้วย

1. ขอรับ URL ของโพสต์

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

คุณสามารถใช้ URL ตัวอย่างนี้เพื่อการทดสอบได้

"https://www.facebook.com/20531316728/posts/10154009990506729/"

2. โหลด JavaScript SDK

หากต้องการใช้ปลั๊กอินโพสต์แบบฝังหรือโซเชียลปลั๊กอินอื่นใด คุณจำเป็นต้องเพิ่ม Facebook JavaScript SDK ลงในเว็บไซต์ของคุณ คุณจำเป็นต้องโหลด SDK เพียงครั้งเดียวในเพจ โดยขอแนะนำให้โหลดทันทีหลังจากแท็กเปิด <body> ดังนี้

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

คุณสามารถดูข้อมูลช่วยเหลือเพิ่มเติมเกี่ยวกับการใช้ JavaScript SDK ได้ใน JavaScript SDK - การเริ่มต้นใช้งานอย่างง่าย

3. ติดแท็กโพสต์แบบฝัง

ถัดมาให้ติดแท็กโพสต์แบบฝังลงในตำแหน่งใดก็ได้บนเว็บไซต์ของคุณ ให้แทนที่ {your-post-url} ด้วย URL ของโพสต์ของคุณ

<div class="fb-post" data-href="{your-post-url}"></div>

4. การทดสอบ

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

<html>
  <title>My Website</title>
<body>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>  
  <div class="fb-post" 
      data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
      data-width="500"></div>
</body>
</html>

ผลลัพธ์ของตัวอย่างทดสอบจะแสดงอยู่ในภาพหน้าจอด้านล่าง

5. การปรับแต่ง

ปฏิบัติตามคำแนะนำด้านล่างที่จะได้เห็นต่อไปในหน้านี้เพื่อปรับเปลี่ยนขนาด ภาษา และการตั้งค่าอื่นๆ

การขอรับ URL ของโพสต์

อาจมีบางกรณีที่โค้ดสำหรับฝังของคุณจะสร้างขึ้นโดย CMS และคุณจำเป็นต้องใช้เพียง URL ของโพสต์แบบดิบ การขอรับ URL ของโพสต์สามารถทำได้ 2 วิธีดังนี้

  1. คัดลอก URL ของลิงก์ถาวรจากแถบที่อยู่ของเบราว์เซอร์
  2. คลิกขวาที่เวลาที่เผยแพร่ของโพสต์และคัดลอกที่อยู่ลิงก์

ทั้ง 2 วิธีนี้จะเน้นด้วยสีแดงในภาพหน้าจอด้านล่างนี้

ผ่านทาง API กราฟ

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

การตอบกลับคำขอของคุณต่อ /{page-id}/feed?fields=permalink_url จะส่งการตอบกลับลักษณะนี้ให้กับคุณ

{
  "data": [
    {
      "id": "1234567890_3456789012", 
      "permalink_url": "https://www.facebook.com/1234567890/posts/3456789012"
    }
  ]
}

เลย์เอาท์บนเดสก์ท็อป

คุณสามารถปรับความกว้างของโพสต์แบบฝังบนเดสก์ท็อปผ่านแอตทริบิวต์ data-width ในแท็กโพสต์แบบฝังดังที่แสดงในตัวอย่างด้านล่างได้ เลือกค่าระหว่าง 350 ถึง 750 พิกเซล

อย่าใช้แท็กลักษณะ CSS ในการปรับขนาดของปลั๊กอิน การทำเช่นนี้อาจส่งผลให้เกิดข้อผิดพลาดในการแสดงผลได้

<!-- WRONG! -->
<style type="text/css">
.fb-post {
  width: 500px;
}
</style>
<div 
  class="fb-post"
  data-href="{your-post-url}">
</div>

<!-- CORRECT -->
<div 
  class="fb-post" 
  data-width="500"
  data-href="{your-post-url}">
</div>

เลย์เอาท์บนเว็บบนมือถือ

ในกรณีที่เป็นเว็บบนมือถือ ระบบจะปรับขนาดของโพสต์แบบฝังให้เข้ากับความกว้างของคอนเทนเนอร์โดยอัตโนมัติ

WordPress

หากคุณใช้ Facebook SDK สำหรับ JavaScript ในเว็บไซต์ WordPress ของคุณอยู่แล้ว คุณสามารถใช้ปลั๊กอินโพสต์แบบฝังได้เพียงเพิ่มแท็ก fb-post ลงในโพสต์บน WordPress ของคุณดังนี้

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>

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

ให้ใช้โค้ดต่อไปนี้เพื่อเพิ่มปลั๊กอินแทน

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v21.0'
    });
  }; 
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
  
<div 
  class="fb-post" 
  data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" 
  data-width="500"></div>

เราจะเปิดตัวการผสานการทำงาน WordPress รูปแบบใหม่ที่ใช้งานง่ายเร็วๆ นี้

คำถามที่พบบ่อย

หากคุณใช้เวอร์ชั่น HTML5 หรือ XFBML คุณควรใส่รหัสภาษาในตอนที่สร้างอินสแตนซ์ของไลบรารี

เมื่อคุณโหลด SDK ให้เปลี่ยนค่าของ js.src เพื่อใช้รูปแบบภาษาของคุณ โดยให้แทนที่ en_US ด้วยรูปแบบภาษาของคุณ เช่น fr_FR สำหรับภาษาฝรั่งเศส (ประเทศฝรั่งเศส):

// Example 1:
'https://connect.facebook.net/fr_FR/sdk.js';

// Example 2:
js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.6";

รูปแบบภาษาที่รองรับจะได้รับการอ้างอิงถึงในไฟล์ XML รูปแบบภาษาของ Facebook

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

ลิงก์ถาวร

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

ลิงก์ถาวร

ข้อความดังต่อไปนี้จะแสดงในตำแหน่งของโพสต์แบบฝัง:

ลิงก์ถาวร