Sematan Video dan Pemutar 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 kiriman video publik yang dikirimkan oleh Halaman atau seseorang sebagai sumber video atau video siaran langsung.

Konfigurator Sematan Pemutar VideoContoh KodePengaturanMenambah 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 menghasilkan kode sematan pemutar video Anda.

3. Salin & Tempelkan snippet HTML

Salin dan tempelkan snippet ke dalam HTML situs web tujuan.

Konfigurator Sematan Pemutar Video

URL video
Lebar piksel dari video

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>(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</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 pemutar video sematan. Anda juga dapat mengubah pengaturan berikut:

Pengaturan Keterangan 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-width

Lebar bidang video. Min. 220px.

auto

data-show-text

Atur ke true untuk menyertakan teks dari kiriman 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

Konfigurasi Contoh

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

1. Arahkan ke Kiriman Video Anda

Jika Anda mengirimkan video publik (lihat Pertanyaan Umum), Anda dapat memperoleh kode sematan secara langsung dari kiriman 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 mengirimkan video publik di Halaman (lihat Pertanyaan Umum), Anda dapat memperoleh kode sematan secara langsung dari Kronologi. Klik ikon yang muncul di sudut kanan atas kiriman 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 kiriman video Anda di dalamnya. Salin dan tempelkan kode ini ke halaman situs web Anda di tempat yang Anda inginkan untuk muncul.

Untuk penjelasan teknis selengkapnya, harap lihat bagian Menambahkan Kode Secara Manual

Menambah Kode Secara Manual

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

1. Dapatkan URL Kiriman Video

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

Untuk pengujian, Anda dapat menggunakan URL contoh ini:

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

2. Muat SDK JavaScript

Untuk menggunakan Plugin Sematan Pemutar Video atau Plugin Sosial lain, Anda harus menambahkan SDK JavaScript Facebook ke situs web Anda. Anda harus memuat SDK hanya sekali di sebuah halaman, idealnya tepat setelah tag pembukaan <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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Anda dapat menemukan bantuan selengkapnya tentang implementasi SDK JavaScript di Sekilas tentang SDK JavaScript.

3. Tempatkan Tag Sematan Pemutar Video

Berikutnya, tempatkan tag Sematan Pemutar Video di situs web Anda. Ganti {your-video-post-url} dengan URL kiriman 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 sudah diselesaikan akan terlihat seperti ini:

<html>
  <title>My Website</title>
<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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</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 contoh pengujian kami ditampilkan dalam cuplikan layar di bawah.

5. Penyesuaian

Ikuti instruksi lebih lanjut di halaman ini untuk menyesuaikan pengaturan ukuran, bahasa, dan lainnya.

Mendapatkan URL kiriman video

Mungkin terdapat skenario ketika kode sematan Anda dibuat dengan CMS dan Anda hanya memerlukan URL kiriman mentah. Ada dua cara untuk mendapatkan URL kiriman:

  1. Salin URL permalink dari bilah alamat browser Anda.
  2. Klik kanan waktu penerbitan kiriman dan salin alamat tautan.

Kedua metode tersebut disorot dengan warna merah dalam cuplikan layar di bawah.

Melalui API Graf

Jika Anda ingin mengintegrasikan sematan pemutar video secara otomatis ke dalam situs web, Anda dapat menggunakan API Graf untuk menggabungkan video. Misalnya Anda dapat menggunakan endpoint API Video Halaman, yang akan mengirim 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 tag Sematan Pemutar Video seperti contoh di bawah. Nilai minimal harus sebesar 220. Tidak ada batas atas, namun pemutar tidak akan melebihi elemen utamanya.

Jangan menggunakan tag gaya CSS untuk menyesuaikan ukuran plugin. Penggunaan tag gaya CSS 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 bagian dalam elemen utamanya.

Menyesuaikan Bahasa

Anda dapat menyesuaikan bahasa plugin Sematan Pemutar Video dengan memuat SDK JavaScript Facebook versi lokal. Ketika memuat SDK, sesuaikan nilai js.src untuk menggunakan lokale Anda: Cukup ganti en_US dengan lokale Anda, mis. fr_FR untuk bahasa Prancis (Prancis):

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

Lokale yang didukung tercantum di file XML Lokale Facebook. Anda mungkin harus menyesuaikan lebar Plugin Sosial untuk menampung bahasa yang berbeda. Anda dapat menemukan informasi selengkapnya di halaman Pelokalan & Terjemahan kami.

Wordpress

Jika Anda sudah menggunakan SDK Facebook untuk JavaScript di situs Wordpress, Anda dapat menggunakan plugin Sematan Pemutar Video hanya dengan menambahkan tag fb-video ke kiriman 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 SDK Facebook untuk JavaScript dan menyematkan video melalui snippet salin&tempel, yang dapat Anda peroleh dari setiap kiriman video, plugin Sematan Pemutar Video kemungkinan besar tidak akan merender karena Wordpress akan mengonversi semua karakter & menjadi #038; dan menjeda sejenak pemutar.

Gunakan kode berikut untuk menambahkan plugin:

<script>window.fbAsyncInit = function() {
  FB.init({
    xfbml      : true,
    version    : 'v2.5'
  });
  }; (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 = "//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 baru Wordpress yang mudah akan dirilis dalam waktu dekat ini.

Pertanyaan Umum

Dapatkah saya menggunakan properti video API Graf embed_html?

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

Tentang properti embed_html:

video endpoint API Graf 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 menyarankan untuk tidak menggunakan properti ini lagi - namun 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>"
}