サードパーティコンテンツを含める

ページにサードパーティコンテンツを含める方法について説明します。

ツイートの埋め込み

ページに Twitter のツイートを埋め込むには、amp-twitter 要素を使用します。

ページにツイートを埋め込むには、最初に次のスクリプトを <head> に含めます。

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

現在、ツイートは自動的に、用意されたサイズに合わせて均等に拡大縮小されますが、そのために標準の外観から少し外れる場合があります。用意された幅と高さを手動で調整するか、または、media 属性を使用して、画面の幅に基づくアスペクト比を選択してください。

<amp-twitter
  width="500"
  height="583"
  layout="responsive"
  data-tweetid="638793490521001985"
>
</amp-twitter>

このスニペットを Playground で開く

ヒント: その他の amp-twitter の例については、AMP By Example をご覧ください。

Instagram の埋め込み

ページに Instagram を埋め込むには、amp-instagram 要素を使用します。

Instagram を埋め込むには、最初に次のスクリプトを <head> に追加します。

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

Instagram の写真 URL にある data-shortcode を指定します。たとえば、https://instagram.com/p/fBwFP の場合、fBwFP が data-shortcode です。また、Instagram ではレスポンシブレイアウトに対して固定のアスペクト比を使用しているため、幅と高さの値は共通になります。

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

このスニペットを Playground で開く

ヒント: その他の amp-instagram の例については、AMP By Example をご覧ください。

Facebook の投稿や動画の表示

Facebook の投稿や動画をページに表示するには、amp-facebook 要素を使用します。

<head> に次のスクリプトを追加する必要があります。

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

例 - 投稿を埋め込む

ソースコード:

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

プレビュー:

例 - 動画を埋め込む

ソースコード:

<amp-facebook
  width="476"
  height="316"
  layout="responsive"
  data-embed-as="video"
  data-href="https://www.facebook.com/nasaearth/videos/10155187938052139"
>
</amp-facebook>

プレビュー:

ヒント: その他の amp-facebook の例については、AMP By Example をご覧ください。

YouTube 動画の埋め込み

YouTube 動画をページに埋め込むには、amp-youtube 要素を使用します。

<head> に次のスクリプトを追加する必要があります。

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

YouTube の data-videoid は YouTube 動画ページの URL で見つかります。たとえば、https://www.youtube.com/watch?v=Z1q71gFeRqM の場合、Z1q71gFeRqM が動画 ID です。

layout="responsive" を使用すると、アスペクト比 16:9 の動画に対する正しいレイアウトが生成されます。

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

このスニペットを Playground で開く

ヒント: その他の amp-youtube の例については、AMP By Example をご覧ください。

広告の表示

ページに広告を表示するには、amp-ad 要素を使用します。HTTPS 経由で配信される広告のみがサポートされています。

広告ネットワークから提供される JavaScript を AMP ドキュメント内で実行することはできません。代わりに、AMP ランタイムは（iframe サンドボックス経由で）別の場所から iframe を読み込んで、広告ネットワークの JS をその iframe サンドボックス内で実行します。

広告の幅と高さ、広告ネットワークのタイプを指定する必要があります。type では広告ネットワークのテンプレートを指定します。広告のタイプごとに別々の data-* 属性が必要です。

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"
>
</amp-ad>

このスニペットを Playground で開く

広告ネットワークでサポートされている場合は、使用できる広告がない場合に表示される placeholder を追加します。

Have a great day!

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"
>
  <div placeholder>Have a great day!</div>
</amp-ad>

このスニペットを Playground で開く

AMP はさまざまな広告ネットワークに対応しています。詳細なリストについては、amp-ad をご覧ください。

参考情報: 広告について詳しくは、AMP での広告の配信に関するガイドをご覧ください。

Written by @Meggin
with contributions from @pbakaus and @bpaduch