Ditulis oleh: Ditulis pada: 6/30/2015
Ternyata untuk menyimpan embed video dari Facebook tidak hanya copy paste kode embed video facebook, namun harus diedit lagi terlebih dahulu, jika tidak maka videonya tidak akan tampil.Dan kebetulan, video dari Facebook tersebut tidak responsive sehingga kurang bagus jika di simpan di blog yang menggunakan template responsive. Untuk itu kini selain sharing cara menyimpan embed video Facebook, juga cara membuat video Facebook menjadi responive.
Yang ingin mencoba menyimpan video responsive dari Facebook untuk disimpan di postingan blog, silahkan ikuti langkahnya di bawah ini.
Langkah Pertama
Untuk mengambil kode embed video dari Facebook silahkan lihat pada gambar animasi gif di bawah ini.
Dan kode embed yang didapat akan tampak seperti di bawah ini.
<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.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-video" data-allowfullscreen="1" data-href="/FacebookIndonesia/videos/vb.249443538526027/568758073261237/?type=1">
<div class="fb-xfbml-parse-ignore"><blockquote cite="/FacebookIndonesia/videos/568758073261237/"><a href="/FacebookIndonesia/videos/568758073261237/"></a><p>Hari ini adalah Safer Internet Day- sebuah hari yang didedikasikan untuk menginformasikan ke masyarakat cara aman dalam menggunakan internet dan teknologi mobile. Sebagai bagian dari perayaan global, Facebook bermitra dengan organisasi keamanan berinternet untuk menunjukkan sejumlah cara agar banyak pihak bisa bersama-sama membangun internet yang aman. Untuk tahu lebih lanjut, lihat video dari Sheryl Sandberg, Chief Operating Officer.</p>Posted by <a href="https://www.facebook.com/FacebookIndonesia">Facebook</a> on Monday, February 9, 2015</blockquote></div>
</div>
Langkah Kedua
Dari kode embed yang didapat dari langkah pertama, kita mendapatkan 3 jenis kode yaitu kode javascript Facebook SDK, HTML embed video, dan blockquote video tersebut.
Jika di blog sudah terdapat javascript Facebook SDK, maka hapus kode Facebook SDK dari kode di atas tersebut, jika belum ada silahkan pindahkan kodenya ke edit HTML blog dan simpan di atas kode
</body>.Kemudian kode yang seperti di bawah ini.
<div class="fb-video" data-allowfullscreen="1" data-href="/FacebookIndonesia/videos/vb.249443538526027/568758073261237/?type=1"></div>
Nah kode HTML tersebutlah yang disimpan di postingan. Namun sebelumnya tambahkan dulu kode
https://www.facebook.com di depan url video-nya, jika tidak maka video-nya tidak akan tampil, sehingga menjadi seperti di bawah ini
<div class="fb-video" data-allowfullscreen="1" data-href="https://www.facebook.com/FacebookIndonesia/videos/vb.249443538526027/568758073261237/?type=1"></div>
Langkah Ketiga
Untuk membuat video Facebook tersebut menjadi responsive, silahkan simpan kode CSS di bawah ini di atas kode
]]></b:skin> atau </style>
.fb-video,.fb-video span,.fb-video iframe{width:100%!important}
Selesai....maka sekarang video Facebook akan tampil responsive di postingan Anda seperti video di bawah ini yang saya ambil dari halaman Facebook Indonesia.