Membuat Responsive Facebook Video Di Blog

Ternyata untuk menyimpan embed video dari Facebook tidak hanya copy paste kode embed video facebook, namun harus diedit lagi terlebih dahu...

Membuat Responsive Facebook Video Di Blog
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.

Responsive Facebook Video Di Blog

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 yang berwarna hijau, HTML embed video yang berwarna cyan, dan blockquote video tersebut yang berwarna orange.

Jika di blog sudah terdapat javascript Facebook SDK seperti kode yang berwarna hijau, maka hapus kode yang berwarna hijau di atas tersebut, jika belum ada silahkan pindahkan kode yng berwarna hijau tersebut ke edit HTML blog dan simpan di atas kode </body>.

Kemudian silahkan hapus kode yang berwarna orange, sehingga hanya tinggal kode yang berwarna cyan 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.

dari : http://www.kompiajaib.com/

COMMENTS

BLOGGER: 3
Loading...
DISQUS
Name

((((- Link Exchange -)))) A. info hp about Me accer admin cantik adriancell. adriancellular adsense Cari Dollar advan alpukat Alysa Soebandono FAM amalan amalan islam Android ANEKA RESEP CAPCAY LEZAT Aneka Resep Olahan Kepiting Aneka Resep Rumahan aplikasi paytren artikel agama Artikel Hiburan ARTIKEL Tips Agar Cepat Diterima di Google Adsense Indonesia Ayam Potong MASTER AYAM ayat alQuran tentang amar maruf nahi munkar B. SITEMAP BAJU ONLINE MURAH Barang Milik daerah (BMD) Batik Tasik ::::::: H & R ::::::: Ciroyom Kelurahan nagarasari Kecamatan Cipedes Belajar Piano Belajar Tenaga dalam Beranda berita artis Berita Kontroversi Bisnis paytren bisnis rumahan BITCOIN ANTI GALAU Blog Sukses Blog Terbaik Blog Terkenal Blogger Blogging dan ber-tag Blog Terbagus Bukti Transfer Bunda cara Pendaftaran Paytren Cari Jodoh Catatan Cellular hp ceramah agama cerita Chat free Cilok Cinta Nabi Cinta Rasul Contact Me cyrus DAMAS damas - Daya Mahasiswa Sunda Pupuh Data laporan Kependudukan Data Suket - Surat keterangan Telah melakukan Perekaman KTP-el Disclaimer doa Doa Islami Keluarga Muslimah dalam Pernikahan DOKUMEN - PUNYA PAPAHQIQI (OWNER) download aplikasi Download Game Horor 2015 download peraturan Evercoss facebook.com female free Streaming G A M E'S G TV Streaming gallery hamil hiburan Hiburan Film Hijab - Cantik dengan kerudung HP APPLE HTC HUAWEI I NEWS Free Streaming imo Indonesia Indosiar Streaming Informasi kesehatan instagram Instagram profile Jual Beli Online Jual Beli Tasikmalaya Jualan Kue Kelontong kantor dan Intansi Kecamatan Cipedes Kelontongan KeluargaKu Kewajiban Atasan Langsung Penyimpan BMD KLIP Sehat Komentar berhadiah Pulsa Kuliner Tasikmalaya Kuliners Tasikmalaya Komunitas WISATA KULINER TASIKMALAYA KWKT Kumpulan Wanita Lagi Viral di medsos lagu aku LALAGUAN Laporan Learn Office lenovo LG like dan share Lucah Tasikmalaya MASAKAN ASLI INDONESIA mia MNC TV Streaming Motifasi on google Motifasi on instagram My Family nasihat Niat Nikita Mirzani Olah Kebatinan on the spot 7 One piece Pahlawan Revolusi Panitia Pemeriksa Barang Daerah (PPBD) pelanggan perempuan Persatuan Orang Tua Murid Kelas C SDN Perumnas Cisalak Pramugari printer Privacy Policy Profile Artis puasa Pulsa Gratis pupuh Rahasia Kecantikam Rahasia Pengobatan RCTI STREAMING Recent Post - postingan Paling Baru resep ayam RESEP DAGING SAPI Resep IKAN resep kue Resep Mie Resep Sate resep sehat resep TELOR resep tempe rumah tangga Samsung SCTV Streaming Seks Wanita selfie Server simple simple chating SITEMAP SMARTFREN SOFTWARE Sport Girls Streaming TV submit url to google tahukah kamu Tanya Jawab Seputar Pengurus Barang Template terbaru2017 terkini Tips dan Trik Tips dan Trik english TransTV Tutorial TV ONE Streaming TVRI STREAMING WANITA weton XL-AXIS
false
ltr
item
Chat Online | AdrianCELL Master Pulsa: Membuat Responsive Facebook Video Di Blog
Membuat Responsive Facebook Video Di Blog
http://2.bp.blogspot.com/-K07nmNMdWtA/VZIny0Wis_I/AAAAAAAAhaI/hG0fovS5z0I/s400/responsive-facebook-video.jpg
http://2.bp.blogspot.com/-K07nmNMdWtA/VZIny0Wis_I/AAAAAAAAhaI/hG0fovS5z0I/s72-c/responsive-facebook-video.jpg
Chat Online | AdrianCELL Master Pulsa
http://www.miablog.web.id/2015/08/membuat-responsive-facebook-video-di.html
http://www.miablog.web.id/
http://www.miablog.web.id/
http://www.miablog.web.id/2015/08/membuat-responsive-facebook-video-di.html
true
8686416091357778467
UTF-8
Not found any posts VIEW ALL Selengkapnya Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy