Type something and hit enter

author photo
By
Bagi blogger pengguna AMP Template atau blog AMP, pasti tahulah bahwa penggunaan blog AMP cukup rumit dan ribet. Apa-apa yang hendak di-posting ke dalam postingan AMP, baik gambar dan video semuanya harus sesuai prosedur dan wajib support terhadap amp template, sehingga postingan blog bisa valid terhadap AMP di penelusuran google.

Begitupun ketika hendak memasang video facebook di dalam postingan blog amp. Jika pada blog-blog yang menggunakan template HTML biasa maka cukup mengambil embed facebook lalu dimasukan ke dalam postingan blog semuanya beres.

Beda dengan amp blog, untuk memasang video facebook di dalam postingan blog harus melalui prosedur yang benar dan setting amp-facebook di blog wajib diaktifkan.

Baiklah, kita langsung saja ke tutorialnya!

Langkah 1
Pastikan kode 'amp-facebook' di bawah ini telah terpasang di amp template anda, jika belum silakan tambahkan kode berikut di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

 <script async='async' custom-element='amp-facebook' src='https://cdn.ampproject.org/v0/amp-facebook-0.1.js'/>  

Lalu save template anda

Langkah 2
Login ke akun facebook anda, carilah video yang akan anda ambil untuk di-posting ke blog amp anda.


Sehingga kode URL video facebook yang didapatkan adalah seperti ini:

 https://www.facebook.com/fans.kmpbastrasia/videos/2133058270069775/   

Langkah 3
Silakan masukkan seluruh URL Facebook tersebut ke dalam kode AMP HTML, seperti berikut:

 <amp-facebook   
  data-embed-as="video"   
  data-href="https://www.facebook.com/fans.kmpbastrasia/videos/2133058270069775/"   
  height="316"   
  width="476"   
  layout="responsive">   
  </amp-facebook>   

Silakan untuk sesuaikan sendiri ukuran height dan width video facebook yang diambil.
Untuk mengubah ukuran height dan width video facebook, kita bisa menggunakan ukuran asli dari video. 
Cara mengetahuinya, kita harus mengambil kode embed facebook! Caranya sebagai berikut:

Langkah 1
Silakan memilih icon 'tiga titik' di bagian video kanan bawah. Lalu pilih benamkan atau sematkan (embed). Lihat seperti gambar!

Langkah 2
Silakan salin kode embed dari video facebook yang diambil.


Sehingga anda akan mendapatkan kode seperti ini:

 <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Ffans.kmpbastrasia%2Fvideos%2F2133058270069775%2F&show_text  
 =0&width=560" width="560" height="315" style="border:none;overflow:hidden"   
 scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>  

Pada kode tersebut kita bisa melihat ukuran asli height dan width dari video yang kita ambil. Silakan ubah width dan height video dalam postingan blog amp anda mengikuti ukuran video aslinya atau silakan anda menyesuaikannya sendiri sesuai keinginan.

Sebelum publish artikel anda di blog AMP, silakan di-preview terlebih dahulu untuk melihat apakah penerapannya sudah benar atau belum.

Hasil penerapan kode di atas dalam postingan blog AMP, kira-kira akan tampak seperti ini:

Demikian panduan blogging kita pada kesempatan ini mengenai cara memosting video facebook di postingan blog amp. Semoga bermanfaat, selamat mencoba...

0 komentar

Mohon tidak berkomentar dengan link aktif, termasuk berpromosi jasa dan lain-lain. Karena akan langsung dihapus