โพสต์แบบฝัง

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

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

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

การตั้งค่า

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

data-href

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

n/a

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>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</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 src="//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5" 
      async></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 ของโพสต์สามารถทำได้สองวิธี:

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

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

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

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

การตอบกลับสำหรับคำขอของคุณไปยัง /{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 ลงในโพสต์ของคุณ

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

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

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

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v2.11'
    });
  }; 
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</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 และโพสต์ดังกล่าวจะทำให้ผู้คนสามารถติดตามหรือถูกใจเนื้อหา ผู้สร้าง หรือเพจได้โดยตรงจากโพสต์ที่ฝังนั้น