AMP
JA
English Deutsch Français العربية Español Italiano Indonesia 한국어 Português Русский Türkçe 中文

サードパーティ コンテンツを追加する

Important: this documentation is not applicable to your currently selected format email!

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

ツイートを埋め込む

ページに 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>
Open this snippet in 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>
Open this snippet in 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>
Open this snippet in 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>
Open this snippet in 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>
Open this snippet in playground

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

広告について詳しくは、AMP での広告の掲載 に関するガイドをご覧ください。