Cara Terbaru Memasang Video Facebook Responsive di Blog

Cara Terbaru Memasang Video Facebook Responsive di Blog - Video merupakan suatu kelengkapan dari sebuah artikel selain gambar. Dengan adanya video, maka artikel di blog sobat akan semakin menarik dan juga memberikan kenyamanan kepada pembaca untuk lebih mengerti tentang artikel yang sobat buat.

Youtube merupakan salah satu platform video yang banyak digunakan oleh para blogger. Di Youtube, mungkin sobat bisa mencari video dan mengubahnya menjadi artikel, kemudian memasang video tersebut di blog sobat. Pastinya, cara memasang video Youtube responsive di blog sudah banyak bertebaran di Google dan sobat tinggal mengikuti langkah-langkahnya dengan teliti. Namun, apa jadinya jika video yang ingin sobat pasang di blog berada di Sosial Media terbesar saat ini, yaitu Facebook? Memang ada banyak juga tutorial seperti artikel saya ini di Google, tetapi artikel mereka kebanyakan tidak up to date yang berdampak kepada pembacanya, karena ada perubahan tampilan dan sistem di Facebook. Jadi, akan sedikit menyulitkan pembaca, karena tutorial dan prakteknya tidak sama.

Namun, pada artikel kali ini saya ingin memberikan solusi untuk masalah tersebut. Ok, simak tutorial Cara Terbaru Memasang Video Facebook Responsive di Blog berikut ini!

Cara Terbaru Memasang Video Facebook Responsive di Blog

Pergi ke alamat (link) di Facebook yang ingin sobat pasang videonya di blog sobat.
Kemudian, klik tanggalnya (contoh 28 Maret 2017)
Video akan mulai, klik icon 3 titik yang ada di sebelah pojok kanan atas, lalu pilih Benamkan

Akan muncul jendela baru, silahkan sobat klik Pengaturan Lanjut

Setelah itu, sobat akan di arahkan ke Tab baru, yaitu Facebook for Developers. Langsung saja, sobat klik Dapatkan Kode

Kemudian akan muncul kode seperti berikut.

<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/id_ID/sdk.js#xfbml=1&version=v2.8";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Copy kode di atas dan letakkan tepat setelah kode <body>, kemudian klik simpan.
Setelah diklik simpan, akan muncul eror seperti ini: Kesalahan saat mengurai XML, baris 869, kolom 64: The reference to entity "version" must end with the ';' delimiter.
Solusinya, ganti kode yang saya tandai warna hijau di atas dengan kode berikut.

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

Kemudian, coba klik simpan lagi, apabila sudah tidak muncul pesan eror, lanjut ke langkah berikutnya.
Langkah berikutnya adalah silahkan sobat ke Tab Facebook for Developer tadi.
Lalu, Copy kode yang mirip seperti ini (di Tab Facebook For Developer) dan salin di postingan blog sobat:

<div class="fb-video" data-href="https://www.facebook.com/encyclopedia.bebas/videos/1349120321777945/"></div>

Mungkin sobat hanya menemukan kode sampai dengan yang saya tandai warna hijau tersebut. Silahkan tambahkan kode ></div> diakhir kode sehingga menjadi seperti di atas.
Sampai ditahap ini, sobat sudah berhasil memasang video facebook di blog. Tetapi, video tersebut belum responsive.
Untuk membuat video menjadi responsive, silahkan copy kode berikut ini, kemudian letakkan sebelum kode ]]></b:skin> atau sesudah </style>

 .fb-video,.fb-video span,.fb-video iframe{width:100%!important}

Voila, video facebook responsive sudah berhasil dipasang di blog sobat, yang nantinya akan menjadi seperti video di bawah ini.

Itulah Cara Terbaru Memasang Video Facebook Responsive di Blog dari saya. Jika sobat mengalami kesulitan dalam melakukan langkah-langkah di atas, sobat bisa bertanya di kolom komentar, semoga bermanfaat!