WebサイトのAMP（Accelerated Mobile Pages Project）対応について、勉強したことをいくつかページにして公開しています。
今回はAMP対応ページにInstagram（インスタグラム）の投稿（写真・動画）を埋め込む方法について書きました。興味がある方はご参考ください。対応については、AMPのドキュメント「amp-instagram.md」を参考にしています。
スクリプトを読み込もう
まず、Instagramの投稿（写真・動画）をAMP対応させるためには「<head></head>」内に以下のスクリプトを読み込みます。
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
読み込み順はドキュメントを参考にして「<meta charset=”utf-8″>」以降に読み込み「<style amp-boilerplate>」の前に読み込みました。スクリプトを読み込んだら、次はInstagramの投稿（写真・動画）の埋め込みコードについて見ていきましょう。
埋め込みコードを変更しよう
ではさっそくやります。今回はGoogleの公式Instagramの以下の動画を例にします。
投稿（写真・動画）URLは
https://www.instagram.com/p/oLzid1Qr_W
です。
Instagramの投稿（写真・動画）の埋め込み方法についてちょっとおさらいしよう
「Instagramの投稿（写真・動画）を自分のWebサイトに埋め込みたい！」と思ったら、投稿（写真・動画）のURLにアクセスして「埋め込みコード」を取得して、そのコードをWebサイト（ブログの本文などに）貼り付けるとできます。これが基本的な埋め込み方法です。
埋め込みコードが取得できます
WordPressを使っている方なら、投稿（写真・動画）のURLを本文に貼り付けるだけで自動で埋め込みコードが作られます。
Instagramの投稿（写真・動画）をAMPに対応してみよう
Instagramの投稿（写真・動画）をAMPに対応させるには「<amp-instagram></amp-instagram>」というAMP専用の要素を使って下のように書く必要があります。
<amp-instagram data-shortcode="oLzid1Qr_W" layout="responsive" width="400" height="400"></amp-instagram>
要素内にある属性と、その説明を以下にまとめました。
| data-shortcode | 短縮コード(文字列) |
|---|---|
| layout | レスポンシブ対応させる場合は「responsive」 |
| width | 動画の幅 |
| height | 動画の高さ |
「data-shortcode」属性には短縮コードを入れるのですが、短縮コードは投稿のURLから判別することができます。今回例にした投稿（写真・動画）のURLは
https://www.instagram.com/p/oLzid1Qr_W
なので、短縮コードは
oLzid1Qr_W
です。
「layout」属性のレスポンシブ対応は、AMP対応のYouTube動画を埋め込んだ例と同じく、昨今のWebサイトのトレンドからすると、必ず入れておいてもいいんじゃないかと思います。（閲覧する端末によって、動画のサイズを比率を保持したまま拡大・縮小してくれます）
まとめ
Instagramの投稿（写真・動画）をバンバンWebサイトに埋め込んでいる方もいらっしゃると思いますので、AMP対応の際にはご参考くださいますと嬉しいです。
このページを共有する