Sematan Pemutar Video & Video Siaran Langsung

Dengan sematan pemutar video, Anda dapat menambahkan video Facebook dan video siaran langsung Facebook ke situs web Anda secara mudah. Anda dapat menggunakan postingan video publik yang diposting oleh Halaman atau seseorang sebagai sumber video atau video siaran langsung.

Konfigurator Sematan Pemutar Video Contoh Kode Pengaturan Menambahkan Kode Secara Manual

Langkah demi Langkah

1. Pilih URL atau Halaman

Pilih URL dari video Facebook yang ingin Anda sematkan.

2. Konfigurator Kode

Tempelkan URL ke Konfigurator Kode dan klik tombol "Dapatkan Kode" untuk membuat kode sematan pemutar video Anda.

3. Salin & Tempelkan snippet HTML

Salin dan tempelkan snippet ke dalam HTML situs web destinasi.

Konfigurator Sematan Pemutar Video

URL video

Lebar pixel dari video

Sertakan postingan lengkap

Dapatkan Kode

Contoh Kode Lengkap

Salin & tempelkan contoh kode ke situs web Anda. Sesuaikan nilai data-href ke URL video Anda. Kontrol ukuran pemutar menggunakan atribut 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>

Pengaturan

Konfigurator di atas tidak menyertakan semua pengaturan yang memungkinkan untuk sematan pemutar video. Anda juga dapat mengubah pengaturan berikut:

Pengaturan	Deskripsi	Default
`data-href`	URL absolut video.	`n/a`
`data-allowfullscreen`	Izinkan video diputar dalam mode layar penuh. Dapat berupa `false` atau `true`.	`false`
`data-autoplay`	Mulai putar video secara otomatis ketika halaman dimuat. Video akan diputar tanpa suara (disenyapkan). Orang dapat menyalakan suara melalui kontrol pemutar video. Pengaturan ini tidak berlaku untuk perangkat seluler. Dapat berupa `false` atau `true`.	`false`
`data-lazy`	`true` berarti menggunakan mekanisme pemuatan lazy-loading untuk browser dengan mengatur atribut iframe `loading="lazy"`. Efeknya adalah browser tidak me-render plugin jika tidak dekat dengan viewport dan mungkin tidak pernah terlihat. Dapat berupa salah satu dari `true` atau `false` (default).	`false`
`data-width`	Lebar kontainer video. Min. `220px`.	`auto`
`data-show-text`	Atur ke `true` untuk menyertakan teks dari postingan Facebook yang terkait dengan video, jika ada. Hanya tersedia untuk situs desktop.	`false`
`data-show-captions`	Atur ke `true` untuk menampilkan keterangan (jika tersedia) secara default. Keterangan hanya tersedia di desktop.	`false`

Contoh Konfigurasi

<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>

Mendapatkan Kode Anda dari Postingan Video

1. Arahkan ke Postingan Video Anda

Jika Anda mengirimkan video publik (lihat Pertanyaan Umum), Anda dapat memperoleh kode sematan secara langsung dari postingan video itu sendiri.

Pilih Embed Video dari menu opsi:

Atau ketika melihat video dalam tayangan halaman penuh, pilih tombol Embed Video di kanan bawah:

Untuk Halaman saja

Ketika mem-posting video publik di Halaman (lihat Pertanyaan Umum), Anda dapat memperoleh kode sematan secara langsung dari Linimasa. Klik ikon yang muncul di pojok kanan atas postingan di Facebook.

Pilih Embed Video dari menu pilihan: (Untuk Halaman saja)

2. Salin dan Tempelkan Kode

Anda akan melihat dialog yang muncul beserta kode untuk menyematkan postingan video Anda di dalamnya. Salin dan tempel kode ini ke halaman web Anda di tempat yang Anda inginkan.

Untuk detail teknis, baca bagian Menambahkan Kode Secara Manual

Menambahkan Kode Secara Manual

Selain Generator Kode, Anda juga dapat menyematkan kode secara manual.

1. Mendapatkan URL Postingan Video

Pertama, Anda harus mendapatkan URL postingan video yang ingin Anda bagikan. Postingan video harus bersifat publik (lihat Pertanyaan Umum), yang ditunjukkan oleh ikon globe berwarna abu-abu, tepat di samping waktu penerbitan postingan:

Untuk pengujian, Anda bisa menggunakan contoh URL ini:

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

2. Muat JavaScript SDK

Untuk menggunakan Plugin Sematan Pemutar Video atau Plugin Sosial lain, Anda harus menambahkan Facebook SDK untuk JavaScript ke situs web Anda. Anda perlu memuat SDK hanya sekali pada halaman, idealnya tepat setelah tanda <body> pembukaan:

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

Bantuan implementasi JavaScript SDK selengkapnya ada di JavaScript SDK - Mulai Cepat.

3. Tempatkan Tanda Sematan Pemutar Video

Berikutnya, tempatkan tanda Sematan Pemutar Video di situs web Anda. Ganti {your-video-post-url} dengan URL postingan Anda.

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

4. Pengujian

Setelah menyelesaikan langkah ini, Anda dapat menguji Sematan Pemutar Video Anda. Integrasi yang lengkap akan terlihat seperti ini:

<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>

Hasil dari contoh pengujian kami ditunjukkan pada gambar di bawah.

5. Menyesuaikan

Ikuti petunjuk di bagian bawah halaman ini untuk menyesuaikan ukuran, bahasa, dan pengaturan lainnya.

Mendapatkan URL postingan video

Mungkin ada skenario di mana kode sematan Anda dibuat oleh CMS dan Anda hanya perlu URL postingan mentah. Ada dua cara untuk mendapatkan URL postingan:

Salin URL tautan permanen dari bilah alamat browser.
Klik kanan waktu penerbitan postingan dan salin alamat tautan.

Kedua metode disorot dengan warna merah pada cuplikan layar di bawah.

Melalui Graph API

Jika Anda ingin mengintegrasikan sematan pemutar video secara otomatis ke dalam situs web, Anda dapat menggunakan Graph API untuk menggabungkan video. Contoh: Anda dapat menggunakan endpoint API Video Halaman, yang akan mengirimkan tanggapan atas permintaan Anda untuk /{page-id}/videos dalam format berikut (diperpendek):

{
  "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": []
    }
   ]
}

Untuk mendapatkan URL video:

Gunakan nilai id untuk membuat URL yang mengikuti struktur:

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

Jangan gunakan properti embed_html untuk menyematkan video. Untuk informasi selengkapnya tentang topik ini, harap lihat bagian Pertanyaan Umum

Tata Letak di Desktop

Anda dapat menyesuaikan lebar Sematan Pemutar Video di desktop melalui atribut data-width pada tanda Sematan Pemutar Video seperti contoh di bawah. Nilai minimal harus sebesar 220. Tidak ada batas atas, namun pemutar tidak akan melebihi elemen induknya.

Jangan menggunakan label gaya CSS untuk menyesuaikan ukuran plugin. Ini dapat mengakibatkan kesalahan tampilan.

<!-- 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>

Layar Penuh

Anda dapat menambahkan properti data-allowfullscreen="true" untuk mengizinkan video diputar dalam mode layar penuh.

Tata Letak di Web Seluler

Di web seluler, Sematan Pemutar Video secara otomatis menyesuaikan skala dengan lebar elemen induknya.

Mengubah Bahasa

Anda dapat mengubah bahasa plugin Sematan Pemutar Video dengan memuat Facebook SDK untuk JavaScript versi yang sudah dilokalkan. Ketika memuat SDK, ubah nilai src untuk menggunakan bahasa Anda. Ganti en_US dengan bahasa Anda, contoh: fr_FR untuk bahasa Prancis (Prancis):

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

Anda mungkin harus menyesuaikan lebar Plugin Sosial untuk mengakomodasi berbagai bahasa. Anda dapat menemukan informasi selengkapnya di halaman Pelokalan & Terjemahan kami.

WordPress

Jika Anda sudah menggunakan Facebook SDK untuk JavaScript di situs WordPress, Anda dapat menggunakan plugin Sematan Pemutar Video hanya dengan menambahkan tanda fb-video ke postingan Anda:

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

Jika Anda tidak menggunakan Facebook SDK untuk JavaScript dan menyematkan video melalui snippet salin&tempel, yang dapat Anda peroleh dari setiap postingan video, plugin Sematan Pemutar Video kemungkinan besar tidak akan me-render karena WordPress akan mengonversi semua karakter & menjadi #038; dan menjeda sejenak pemutar.

Sebagai gantinya, gunakan kode berikut untuk menambahkan plugin:

<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>

Integrasi WordPress baru yang mudah akan dirilis dalam waktu dekat.

Pertanyaan Umum

Dapatkah saya menggunakan properti `video` Graph API`embed_html`?

Tidak, Anda tidak boleh menggunakan properti embed_html. Gunakan plugin Sematan Pemutar Video!

Tentang properti `embed_html`:

Endpoint Graph API video akan menyajikan properti yang bernama embed_html. Nilainya akan berisi elemen HTML yang mungkin disematkan di halaman Web untuk memutar video yang diminta.

Nilai ini jangan dikelirukan dengan plugin Sematan Pemutar Video. Kami sangat merekomendasikan untuk tidak menggunakan properti ini lagi - sebagai gantinya, gunakan plugin Sematan Pemutar Video!

Jika menggunakan nilai properti embed_html, maka pemutar video Anda akan:

Tidak berfungsi pada perangkat seluler dan tablet
Tidak berisi informasi tambahan seperti tayangan, judul video, dll.

Contoh properti `embed_html` (tidak digunakan lagi):

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