Friday, November 24, 2017

Memasang Embed yang Valid di Blog AMP HTML


Assalamu'alaikum warohmatullahi wabarokatuh, diantara teman-teman blogger mungkin sudah ada yang sangat akrab dengan AMP HTML. Seiring dengan berkembangnya berbagai bidang dalam dunia maya yang disebut internet, Google, salah satu perusahaan besar yang bergelut pada bidang mesin pencari situs internet merilis salah satu projek yang memungkinkan pengguna smartphone membuka situs dengan kecepatan lebih tinggi dan spesifikasi loading yang lebih cepat dan canggih yang dikenal dengan sebutan AMP Project (Accelerated Mobile Pages Project).

AMP Project saat ini telah banyak digunakan dan diaplikasikan oleh pemilik situs web dan situs blog di seluruh dunia dengan menggunakan beberapa perubahan hingga memenuhi kriteria AMP Project, atau yang biasa disebut sebagai AMP HTML. AMP HTML adalah kode yang menyerupai HTML klasik (HTML biasa) yang apabila dijalankan akan memerlukan waktu loading yang lebih singkat sehingga pembaca/pengunjung mendapatkan pengalaman surfing yang lebih memuaskan.

Akan tetapi perlu teman-teman perhatikan bahwa untuk membuat suatu kode HTML menjadi AMP HTML harus memenuhi beberapa syarat dan kriteria. Sebagian besar tag yang digunakan dalam AMP HTML merupakan tag HTML biasa, beberapa tag HTML umum diganti dengan tag khusus AMP yang biasa disebut sebagai komponen AMP HTML, teman-teman bisa mempelajarinya lebih lanjut pada AMP HTML Specification.

Mungkin sebagian besar pemilik website atau blog merasa bingung dengan cara kerja AMP HTML yang kadang tidak mau jadi valid. Salah satunya adalah ketika memasang embed di halaman situs, baik itu berupa video, musik, bahkan embed sosial media dapat membuat kesalahan AMP HTML pada halaman situs yang ditempatinya. Oleh karena itu saya akan memberikan tips kepada teman-teman bagaimana cara memasang berbagai embed yang sesuai dengan AMP HTML pada halaman blog di Blogger. Berikut ini liputannya.

Embed Youtube Valid AMP HTML

Memasang embed video di blog tentunya hal yang banyak dilakukan oleh penulis-penulis blog, sebab beberapa tulisan memang pada dasarnya memerlukan sisipan video untuk mendukung konten dari tulisan blog tersebut. Youtube yang merupakan situs berbagi video yang cukup populer menyediakan fitur untuk menyalin embed dari suatu video agar dapat dipasang pada halaman blog atau situs diluar dari Youtube.

Namun agar valid AMP HTML diperlukan sedikit modifikasi terhadap embed yang akan dipasang. Pertama-tama silakan pasang script AMP berikut ini di dalam tag <head>, dengan kata lain sebelum penutup head (sebelum kode </head>) pada Edit HTML blog anda.

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

Nah, setelah memasang kode di atas, sekarang anda sudah bisa memasang embed video youtube yang tetap valid AMP HTML, caranya adalah dengan memasang kode berikut ini pada tempat yang diinginkan.

<amp-youtube
   data-videoid="G17Midoombs"
   height="315"
   layout="responsive"
   width="560">
</amp-youtube>

Nah, setelah itu ganti nilai untuk atribut data-videoid sesuai dengan ID pada video Youtube yang ingin dipasang. Untuk mendapatkan ID video Youtube cukup perhatikan pada URL video, misalnya pada URL video Youtube berikut ini.

https://youtu.be/G17Midoombs
https://www.youtube.com/watch?v=G17Midoombs

Kemudian, lihatlah hasilnya pada halaman blog anda, akan muncul embed video Youtube yang valid AMP HTML. Teman-teman bisa melihat apakah suatu halaman telah valid AMP HTML atau tidak pada halaman Pengujian AMP. Berikut ini contoh tampilan video yang menggunakan embed AMP HTML.

Contoh:



Embed Soundcloud Valid AMP HTML

Instalasi

Seperti yang kita ketahui, selain memasang video, lagu juga seringkali disisipkan pada sebuah konten blog untuk mendukung isi tulisannya atau menambah kesan artistik pada sebuah tulisan. Salah satu yang sering digunakan adalah embed Soundcloud untuk memasang lagu pada sebuah halaman web, namun bagi blog dengan AMP HTML tentu tidak bisa sembarangan ketika memasang embed yang satu ini, sama seperti embed Youtube, embed Soundcloud yang langsung dipasang akan mengakibatkan kesalah pada halaman AMP tersebut.

Untuk memasang embed Soundcloud pada AMP HTML, cara yang digunakan hampir sama dengan bagian diatas, terlebih dahulu perlu dipasang sebuah script untuk embed Soundcloud. Silakan pasang script berikut ini di dalam tag <head>, dengan kata lain sebelum penutup head (sebelum kode </head>) pada Edit HTML blog anda.

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

Penggunaan

Setelah memasang kode di atas, teman-teman sudah bisa memasang embed soundcloud di halaman situs atau blog yang valid AMP HTML. Berbeda dari sebelumnya, untuk embed yang satu ini ada satu hal yang perlu teman-teman perhatikan bahwa embed Soundcloud ada dua jenis, yaitu embed untuk sebuah track dan embed untuk sebuah playlist. Kode yang digunakan untuk memasangnya adalah sebagai berikut:


Kode AMP HTML
<amp-soundcloud
   data-color="ff5500"
   data-trackid="286290347"
   height="100"
   layout="fixed-height">
</amp-soundcloud>


Kode AMP HTML
<amp-soundcloud
   data-trackid="286290347"
   data-visual="true"
   height="150"
   layout="fixed-height">
</amp-soundcloud>


Kode AMP HTML
<amp-soundcloud
   data-color="ff5500"
   data-playlistid="265086492"
   height="280"
   layout="fixed-height">
</amp-soundcloud>


Kode AMP HTML
<amp-soundcloud
   data-playlistid="265086492"
   data-visual="true"
   height="250" layout="fixed-height">
</amp-soundcloud>

Sumber Kode

Lalu bagaimana cara mendapatkan kode untuk playlistid dan trackid? Perhatikan bagian yang ditandai diatas, bagian tersebut merupakan kode untuk track maupun playlist dari embed yang dipasang, untuk mendapatkannya bisa melalui embed umum yang dibuat langsung melalui Soundcloud. Misalnya saat teman-teman sudah memperoleh kode embed track atau playlist Soundcloud yang ingin dipasang, kodenya kurang lebih seperti berikut ini:

Track

<iframe
  width="100%"
  height="300"
  scrolling="no"
  frameborder="no"
  src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/286290347&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true&amp;visual=true">
</iframe>

Playlist

<iframe
  width="100%"
  height="300"
  scrolling="no"
  frameborder="no"
  src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/265086492&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true&amp;visual=true">
</iframe>

Nah, teman-teman silakan perhatikan bagian yang ditandai dari kedua kode di atas, kode tersebut merupakan ID untuk track dan playlist masing-masing. Silakan copy ID tersebut lalu letakkan pada kode AMP HTML yang ingin digunakan kemudian lihat hasilnya pada halaman web atau blog masing-masing.

Embed Instagram Valid AMP HTML

Salah satu media sosial yang cukup populer saat ini adalah Instagram. Banyak penghuni dunia maya yang melihat dan memosting berbagai hal melalui situs media sosial yang satu ini, oleh karena itu tidak jarang orang juga membagikan sebuah konten dari Instagram melalui halaman situs lainnya. Sama seperti konten dari berbagai situs lain, Instagram juga memungkinkan penggunanya untuk membagikan embed yang bisa dipasang melalui halaman situs manapun. Untuk memperoleh kode embed yang dapat dibagikan bisa melalui halaman Instagram kemudian memilih konten mana yang ingin dibagikan dan menyalin kode embednya.

Tetapi untuk teman-teman pengguna AMP HTML tentang saja, kalian masih punya harapan untuk juga bisa memasang embed Instagram yang pada dasarnya menggunakan kode <iframe> dan dapat memicu kesalahan pada kode AMP HTML. Untuk bisa memasang embed Instagram, pertama-tama, silakan teman-teman pasang script berikut ini di dalam tag <head>, dengan kata lain sebelum penutup head (sebelum kode </head>) pada Edit HTML blog anda.

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

Setelah itu anda sudah resmi bisa memasang embed Instagram yang valid AMP HTML. Untuk memasangnya tidak menggunakan kode yang seperti biasa, teman-teman bisa menggunakan kode berikut ini untuk dipasang melalui halaman situs anda.

<amp-instagram data-shortcode="BaImP0qBgqy"
  width="320"
  height="392"
  layout="responsive">
</amp-instagram>

Contoh



Sumber Kode

Nah, sekarang pertanyaannya adalah bagaimana cara memperoleh kode data-shortcode seperti kode di atas? Untuk mendapatkan kode seperti itu pada embed Instagram caranya jauh lebih mudah, cukup perhatikan alamat (URL) sebuah konten di Instagram, misalnya seperti kode berikut, bagian yang ditandai merupakan shortcode yang dimaksud.

https://www.instagram.com/p/BaImP0qBgqy/?taken-by=hadipurnomo23

Embed Facebook Valid AMP HTML

Nah untuk yang satu ini mungkin sudah sangat tidak asing bagi teman-teman. Selain menjadi satu diantara beberapa media sosial yang cukup populer, Facebook juga banyak dibagikan dalam bentuk embed oleh pemilik blog maupun website. Baik itu embed dari link menuju sebuah fanpage maupun embed untuk menampilkan sebuah posting (baik tulisan maupun video). Namun yang saya bahas pada posting ini hanyalah embed untuk konten sebuah posting dari Facebook.

Sama seperti sebelumnya sebelum mencoba memasang sebuah embed di sebuah halaman situs yang tentunya valid AMP HTML, teman-teman perlu memasang script berikut ini di dalam tag <head>, dengan kata lain sebelum penutup head (sebelum kode </head>) pada Edit HTML blog anda.

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

Setelah itu, anda sudah bisa memasang embed posting dari Facebook di halaman situs anda, baik itu berupa posting tulisan maupun posting video. Untuk memasang embed posting teman-teman bisa menggunakan kode AMP HTML berikut ini untuk memasangnya pada halaman situs yang diinginkan.


Kode AMP HTML
<amp-facebook
  width="486" 
  height="657" 
  layout="responsive" 
  data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>


Kode AMP HTML
<amp-facebook
  width="486"
  height="657"
  layout="responsive"
  data-embed-as="video"
  data-href="https://www.facebook.com/nasaearth/videos/10155187938052139">
</amp-facebook>

Embed Twitter Valid AMP HTML

Kemudian untuk embed terakhir yang dapat dipasang valid AMP HTML yang akan saya bahas pada posting ini adalah embed posting Twitter. Twitter juga merupakan satu diantara beberapa media sosial yang cukup populer, dengan gabungan dari beberapa sistem antara Facebook dan Instagram. Meskipun Twitter membatasi jumlah karakter yang dapat digunakan oleh penggunanya namun hal itu tidak membuat orang-orang beralih. Teman-teman sebenarnya juga bisa menyisipkan salah satu posting Twitter ke halaman situs yang diinginkan dengan menyalin kode embed yang dapat diperoleh melalui Twitter. Untuk pengguna AMP HTML, untuk memasang embed posting Twitter, pertama-tama silakan pasang script berikut ini di dalam tag <head>, dengan kata lain sebelum penutup head (sebelum kode </head>) pada Edit HTML blog anda.

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

Setelah itu silakan teman-teman pasang embed posting Twitter yang ingin dibagikan pada halaman situs yang diinginkan. Gunakan kode berikut ini untuk menyisipkan embed tersebut. Selain itu perlu teman-teman perhatikan bahwa pada kode tersebut memerlukan tweetid, untuk mendapatkan ID tersebut silakan salin alamat tautan sebuah Tweet misal seperti alamat https://twitter.com/maringngerrang/status/691581544880672768


Kode AMP HTML
<amp-twitter width="500"
  height="583"
  layout="responsive"
  data-tweetid="691581544880672768">
</amp-twitter>

Mungkin cukup sekian dari saya, semoga bisa bermanfaat, kalau ada yang ingin sobat tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau bisa juga melalui halaman contact blog ini. Terima kasih, assalamu'alaikum warohmatullahi wabarokatuh.

https://www.ampproject.org/docs/guides/third_party_components
Disqus Comments