Memasang Embed Yang Valid Di Blog Amp Html
Assalamu'alaikum warohmatullahi wabarokatuh, diantara teman-teman blogger mungkin sudah ada yang sangat bersahabat dengan AMP HTML. Seiring dengan berkembangnya banyak sekali 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 ketika ini telah banyak dipakai dan diaplikasikan oleh pemilik situs web dan situs blog di seluruh dunia dengan memakai beberapa perubahan hingga memenuhi kriteria AMP Project, atau yang biasa disebut sebagai AMP HTML. AMP HTML yaitu isyarat yang ibarat HTML klasik (HTML biasa) yang apabila dijalankan akan memerlukan waktu loading yang lebih singkat sehingga pembaca/pengunjung mendapat pengalaman surfing yang lebih memuaskan.
Akan tetapi perlu teman-teman perhatikan bahwa untuk menciptakan suatu isyarat HTML menjadi AMP HTML harus memenuhi beberapa syarat dan kriteria. Sebagian besar tag yang dipakai 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 sanggup mempelajarinya lebih lanjut pada AMP HTML Specification.
Mungkin sebagian besar pemilik website atau blog merasa galau dengan cara kerja AMP HTML yang kadang tidak mau jadi valid. Salah satunya yaitu ketika memasang embed di halaman situs, baik itu berupa video, musik, bahkan embed sosial media sanggup menciptakan kesalahan AMP HTML pada halaman situs yang ditempatinya. Oleh lantaran itu saya akan menawarkan tips kepada teman-teman bagaimana cara memasang banyak sekali 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, lantaran beberapa goresan pena memang intinya memerlukan sisipan video untuk mendukung konten dari goresan pena blog tersebut. Youtube yang merupakan situs mengembangkan video yang cukup terkenal menyediakan fitur untuk menyalin embed dari suatu video biar sanggup dipasang pada halaman blog atau situs diluar dari Youtube.Namun biar valid AMP HTML diharapkan sedikit modifikasi terhadap embed yang akan dipasang. Pertama-tama silakan pasang script AMP berikut ini di dalam tag
<head>, dengan kata lain sebelum epilog head (sebelum isyarat </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, sesudah memasang isyarat di atas, kini anda sudah sanggup memasang embed video youtube yang tetap valid AMP HTML, caranya yaitu dengan memasang isyarat berikut ini pada daerah yang diinginkan.
<amp-youtube data-videoid="G17Midoombs" height="315" layout="responsive" width="560"> </amp-youtube>Nah, sesudah itu ganti nilai untuk atribut data-videoid sesuai dengan ID pada video Youtube yang ingin dipasang. Untuk mendapat ID video Youtube cukup perhatikan pada URL video, contohnya pada URL video Youtube berikut ini.
https://youtu.be/G17Midoombs https://www.youtube.com/watch?v=G17MidoombsKemudian, lihatlah akibatnya pada halaman blog anda, akan muncul embed video Youtube yang valid AMP HTML. Teman-teman sanggup melihat apakah suatu halaman telah valid AMP HTML atau tidak pada halaman Pengujian AMP. Berikut ini pola tampilan video yang memakai 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 dipakai yaitu embed Soundcloud untuk memasang lagu pada sebuah halaman web, namun bagi blog dengan AMP HTML tentu tidak sanggup sembarangan ketika memasang embed yang satu ini, sama mirip embed Youtube, embed Soundcloud yang eksklusif dipasang akan mengakibatkan kesalah pada halaman AMP tersebut.Untuk memasang embed Soundcloud pada AMP HTML, cara yang dipakai hampir sama dengan bab diatas, terlebih dahulu perlu dipasang sebuah script untuk embed Soundcloud. Silakan pasang script berikut ini di dalam tag
<head>, dengan kata lain sebelum epilog head (sebelum isyarat </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 isyarat di atas, teman-teman sudah sanggup 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 dipakai untuk memasangnya yaitu 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 mendapat isyarat untukplaylistid dan trackid? Perhatikan bab yang ditandai diatas, bab tersebut merupakan isyarat untuk track maupun playlist dari embed yang dipasang, untuk mendapatkannya sanggup melalui embed umum yang dibentuk eksklusif melalui Soundcloud. Misalnya ketika teman-teman sudah memperoleh isyarat embed track atau playlist Soundcloud yang ingin dipasang, kodenya kurang lebih mirip 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&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&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&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"> </iframe>Nah, teman-teman silakan perhatikan bab yang ditandai dari kedua isyarat di atas, isyarat tersebut merupakan ID untuk track dan playlist masing-masing. Silakan copy ID tersebut kemudian letakkan pada isyarat AMP HTML yang ingin dipakai kemudian lihat akibatnya pada halaman web atau blog masing-masing.
Embed Instagram Valid AMP HTML
Salah satu media umum yang cukup terkenal ketika ini yaitu Instagram. Banyak penghuni dunia maya yang melihat dan memosting banyak sekali hal melalui situs media umum yang satu ini, oleh lantaran itu tidak jarang orang juga membagikan sebuah konten dari Instagram melalui halaman situs lainnya. Sama mirip konten dari banyak sekali situs lain, Instagram juga memungkinkan penggunanya untuk membagikan embed yang sanggup dipasang melalui halaman situs manapun. Untuk memperoleh isyarat embed yang sanggup dibagikan sanggup melalui halaman Instagram kemudian menentukan konten mana yang ingin dibagikan dan menyalin isyarat embednya.Tetapi untuk teman-teman pengguna AMP HTML wacana saja, kalian masih punya impian untuk juga sanggup memasang embed Instagram yang intinya memakai isyarat
<iframe> dan sanggup memicu kesalahan pada isyarat AMP HTML. Untuk sanggup memasang embed Instagram, pertama-tama, silakan teman-teman pasang script berikut ini di dalam tag <head>, dengan kata lain sebelum epilog head (sebelum isyarat </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 sanggup memasang embed Instagram yang valid AMP HTML. Untuk memasangnya tidak memakai isyarat yang mirip biasa, teman-teman sanggup memakai isyarat 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, kini pertanyaannya yaitu bagaimana cara memperoleh isyaratdata-shortcode mirip isyarat di atas? Untuk mendapat isyarat mirip itu pada embed Instagram caranya jauh lebih mudah, cukup perhatikan alamat (URL) sebuah konten di Instagram, contohnya mirip isyarat berikut, bab yang ditandai merupakan shortcode yang dimaksud.https://www.instagram.com/p/BaImP0qBgqy/?taken-by=hadipurnomo23Embed Facebook Valid AMP HTML
Nah untuk yang satu ini mungkin sudah sangat tidak absurd bagi teman-teman. Selain menjadi satu diantara beberapa media umum 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 goresan pena maupun video). Namun yang saya bahas pada posting ini hanyalah embed untuk konten sebuah posting dari Facebook.Sama mirip 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 epilog head (sebelum isyarat </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 sanggup memasang embed posting dari Facebook di halaman situs anda, baik itu berupa posting goresan pena maupun posting video. Untuk memasang embed posting teman-teman sanggup memakai isyarat 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 sanggup dipasang valid AMP HTML yang akan saya bahas pada posting ini yaitu embed posting Twitter. Twitter juga merupakan satu diantara beberapa media umum yang cukup populer, dengan adonan dari beberapa sistem antara Facebook dan Instagram. Meskipun Twitter membatasi jumlah aksara yang sanggup dipakai oleh penggunanya namun hal itu tidak menciptakan orang-orang beralih. Teman-teman bahwasanya juga sanggup menyisipkan salah satu posting Twitter ke halaman situs yang diinginkan dengan menyalin isyarat embed yang sanggup 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 epilog head (sebelum isyarat </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 isyarat berikut ini untuk menyisipkan embed tersebut. Selain itu perlu teman-teman perhatikan bahwa pada isyarat tersebut memerlukan
tweetid, untuk mendapat ID tersebut silakan salin alamat tautan sebuah Tweet misal mirip alamat https://twitter.com/maringngerrang/status/691581544880672768Kode AMP HTML
<amp-twitter width="500" height="583" layout="responsive" data-tweetid="691581544880672768"> </amp-twitter>Mungkin cukup sekian dari saya, semoga sanggup bermanfaat, jikalau ada yang ingin sobat tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau sanggup juga melalui halaman contact blog ini. Terima kasih.
https://www.ampproject.org/docs/guides/third_party_components
