Instagramの投稿(写真・動画)の埋め込みをAMP対応させる方法

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サイト(ブログの本文などに)貼り付けるとできます。これが基本的な埋め込み方法です。

埋め込みコードが取得できます

ampinstagram02

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対応の際にはご参考くださいますと嬉しいです。

著者:bouya Imamura