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

โปรแกรมเล่นวิดีโอถ่ายทอดสดและวิดีโอแบบฝัง

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

ตัวกำหนดค่าโปรแกรมเล่นวิดีโอแบบฝังตัวอย่างโค้ดการตั้งค่าเพิ่มโค้ดด้วยตนเอง

วิธีการทีละขั้นตอน

1. เลือก URL หรือเพจ

เลือก URL ของวิดีโอบน Facebook ที่คุณต้องการฝัง

2. ตัวกำหนดค่าโค้ด

วาง URL ดังกล่าวไปยังตัวกำหนดค่าโค้ด แล้วคลิกปุ่ม “รับโค้ด” เพื่อสร้างโค้ดสำหรับโปรแกรมเล่นวิดีโอแบบฝังของคุณ

3. คัดลอกและวางส่วนย่อย HTML

คัดลอกและวางส่วนย่อยลงใน HTML ของเว็บไซต์ปลายทาง

ตัวกำหนดค่าโปรแกรมเล่นวิดีโอแบบฝัง

URL ของวิดีโอ
ความกว้างของวิดีโอในหน่วยพิกเซล
รับรหัส

ตัวอย่างโค้ดแบบเต็ม

คัดลอกและวางตัวอย่างโค้ดลงในเว็บไซต์ของคุณ ปรับค่า data-href ให้เป็น URL วิดีโอของคุณ ควบคุมขนาดของโปรแกรมเล่นโดยใช้แอตทริบิวต์ data-width

<html>
<head>
  <title>Your Website Title</title> 
</head>
<body>

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

  <!-- Your embedded video player code -->
  <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false">
    <div class="fb-xfbml-parse-ignore">
      <blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/">
        <a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a>
        <p>How to share with just friends.</p>
        Posted by <a href="https://www.facebook.com/facebook/">Facebook</a> on Friday, December 5, 2014
      </blockquote>
    </div>
  </div>

</body>
</html>

การตั้งค่า

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

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

data-href

URL ที่สมบูรณ์ของวิดีโอ

n/a

data-allowfullscreen

อนุญาตให้เล่นวิดีโอในโหมดเต็มหน้าจอ สามารถเป็น false หรือ true ก็ได้

false

data-autoplay

เริ่มเล่นวิดีโอโดยอัตโนมัติเมื่อเพจโหลด ระบบจะเล่นวิดีโอโดยไม่มีเสียง (ปิดเสียงไว้) ผู้ใช้สามารถเปิดเสียงผ่านตัวควบคุมในโปรแกรมเล่นวิดีโอได้ การตั้งค่านี้จะไม่มีผลกับอุปกรณ์มือถือ สามารถเป็น false หรือ true ก็ได้

false

data-lazy

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

false

data-width

ความกว้างของคอนเทนเนอร์วิดีโอ ต่ำสุด 220px

auto

data-show-text

ตั้งค่าเป็น true เพื่อรวมข้อความจากโพสต์บน Facebook ที่เชื่อมโยงกับวิดีโอดังกล่าว (หากมี) ใช้งานได้กับเว็บไซต์บนเดสก์ท็อปเท่านั้น

false

data-show-captions

ตั้งค่าเป็น true เพื่อแสดงคำบรรยาย (หากมี) โดยค่าเริ่มต้น คำบรรยายจะใช้งานได้บนเดสก์ท็อปเท่านั้น

false

ตัวอย่างการกำหนดค่า

<div class="fb-video"
  data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
  data-width="500"
  data-allowfullscreen="true"
  data-autoplay="true"
  data-show-captions="true"></div>

การขอรับโค้ดของคุณจากโพสต์แบบวิดีโอ

1. ไปยังโพสต์แบบวิดีโอของคุณ

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

เลือก Embed Video จากเมนูตัวเลือก

หรือเมื่อรับชมวิดีโอในมุมมองแบบเต็มหน้า ให้เลือกปุ่ม Embed Video ที่ทางด้านขวาล่าง

สำหรับเพจเท่านั้น

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

เลือก Embed Video จากเมนูดร็อปดาวน์ (สำหรับเพจเท่านั้น)

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

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

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

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

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

1. ขอรับ URL ของโพสต์แบบวิดีโอ

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

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

"https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/"

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-video-post-url} ด้วย URL ของโพสต์ของคุณ

<div class="fb-video" data-href="{your-video-post-url}"  
  data-allowfullscreen="true" data-width="500"></div>

4. การทดสอบ

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

<html>
  <title>My Website</title>
<body>
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
  <h1>My Video Player</h1>
  <div class="fb-video"
    data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
    data-width="500"
    data-allowfullscreen="true"></div>
</body>
</html>

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

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

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

การขอรับ URL ของโพสต์แบบวิดีโอ

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

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

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

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

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

{
  "data": [
    {
      "id": "1234567890",
      "created_time": "2015-02-25T23:22:06+0000",
      "description": "My Video Caption",
      "embed_html": "<iframe src=\"https://www.facebook.com/video/embed?video_id=1234567890\" width=\"1280\" height=\"720\" frameborder=\"0\"></iframe>",
      "format": []
    }
   ]
}

วิธีการขอรับ URL ของวิดีโอ

ใช้ค่า id เพื่อสร้าง URL ตามโครงสร้างต่อไปนี้

"https://www.facebook.com/video.php?v={id}"

อย่าใช้คุณสมบัติ embed_html ในการฝังวิดีโอ โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อนี้ที่ส่วนคำถามที่พบบ่อย

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

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

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

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

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

เต็มหน้าจอ

คุณสามารถเพิ่มคุณสมบัติ data-allowfullscreen="true" เพื่ออนุญาตให้เล่นวิดีโอในโหมดเต็มหน้าจอได้

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

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

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

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

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

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

WordPress

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

<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" 
  data-width="500" data-allowfullscreen="true"></div>

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

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

<script>window.fbAsyncInit = function() {
  FB.init({
    xfbml      : true,
    version    : 'v3.2'
  });
  }; (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-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" data-width="500" data-allowfullscreen="true"></div>

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

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

ฉันจะใช้ embed_html ซึ่งเป็นคุณสมบัติ video ของ API กราฟได้หรือไม่

ไม่ได้ คุณไม่ควรใช้คุณสมบัติ embed_html ให้ใช้ปลั๊กอินโปรแกรมเล่นวิดีโอแบบฝังแทน

ข้อมูลเกี่ยวกับคุณสมบัติ embed_html:

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

คุณไม่ควรสับสนระหว่างค่านี้กับปลั๊กอินโปรแกรมเล่นวิดีโอแบบฝัง เราขอแนะนำอย่างยิ่งว่าอย่าใช้คุณสมบัตินี้อีกต่อไป โดยให้ใช้ปลั๊กอินโปรแกรมเล่นวิดีโอแบบฝังแทน

หากคุณใช้ค่าของคุณสมบัติ embed_html โปรแกรมเล่นวิดีโอจะเกิดสิ่งต่อไปนี้ขึ้น

  • ไม่ทำงานบนอุปกรณ์มือถือและแท็บเล็ต
  • ไม่มีข้อมูลใดๆ เพิ่มเติม เช่น ยอดดู ชื่อวิดีโอ ฯลฯ

ตัวอย่างสำหรับคุณสมบัติ embed_html (เลิกใช้แล้ว):

{
  "embed_html": 
    "<iframe 
      src=\"https://www.facebook.com/video/embed?video_id=1234567890\"
      width=\"1280\" 
      height=\"720\"
      frameborder=\"0\">
    </iframe>"
}