読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

amp-instagram | AMPにInstagramの埋め込みを挿入する

f:id:mochizuki_p:20170107174707p:plain

AMPでInstagramの埋め込みを表示するための専用タグです。

AMPでJavaScriptやiframeが禁止されているために特別に用意されています。

特徴

  • 専用のJavaScriptを読み込む必要がある
  • サイズを指定する必要がある。
  • 各画像に対応したショートコードを入れる必要がある

専用のJavaScript

以下をhead内に追記してください。

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

HTMLでTwitterの埋め込みを利用する場合、以下のようにJavaScriptを利用します。


<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/tsxp1hhQTG/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">We’re putting the Weekend Hashtag Project on hold this weekend. Instead, we’re challenging people around the world to participate in the 10th Worldwide InstaMeet! Grab a few good friends or meet up with a larger group in your area and share your best photos and videos from the InstaMeet with the #WWIM10 hashtag for a chance to be featured on our blog Monday morning. Be sure to include the name of the location where your event took place along with the unique hashtag you&#39;ve chosen for your InstaMeet in your caption. Photo by @sun_shinealight</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Instagramさん(@instagram)が投稿した写真 - <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2014-10-03T18:00:13+00:00">2014 10月 3 11:00午前 PDT</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

一方でAMPの場合は以下のような形式になります。

<amp-instagram
    data-shortcode="tsxp1hhQTG"
    width="400"
    height="400"
    layout="responsive">
</amp-instagram>

つまり、通常の埋め込みコードからリンクに記載されているショートコードの部分を抜粋して、amp-instagramでレイアウトを指定した上で中に挟めばよいわけです。

わかりにくいですが、Instagramの埋め込みコードには、以下のようにリンクの部分があります。

<a href="https://www.instagram.com/p/tsxp1hhQTG/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">We’re putting the Weekend Hashtag Project on hold this weekend. Instead, we’re challenging people around the world to participate in the 10th Worldwide InstaMeet! Grab a few good friends or meet up with a larger group in your area and share your best photos and videos from the InstaMeet with the #WWIM10 hashtag for a chance to be featured on our blog Monday morning. Be sure to include the name of the location where your event took place along with the unique hashtag you&#39;ve chosen for your InstaMeet in your caption. Photo by @sun_shinealight</a>

この箇所ですが

"https://www.instagram.com/p/tsxp1hhQTG/" 

ここのp/の後の部分 - tsxp1hhQTG - ですね。

これをdata-shortcodeで指定します。

この場合は必須となる要素は、

要素名 説明
width ツィートの埋め込み枠の幅 486
height ツィートの埋め込み枠の高さ 657
data-shortcode 画像のショートコード data-shortcode=“tsxp1hhQTG”

width, height

レンダリングの計算コストを削減するために事前にサイズを指定しておきます。

data-tweetid

各ツィートの固有ID

つまり、ツィートの埋め込みコードのリンクの部分ですね。

その中のstatus/のあとの数字が羅列された部分をここに記します。

<a href="https://twitter.com/chomado/status/800494112839331840">November 21, 2016</a>

これからhrefの値である https://twitter.com/chomado/status/800494112839331840

太字で示された数字の部分がIDになります。

任意の要素

要素名 説明
layout レイアウトの指定 responsive