Как добавлять сторонний контент

Ознакомьтесь с рекомендациями по размещению стороннего контента на ваших страницах.

Как добавлять твиты

При публикации твитов на своих страницах используйте элемент 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

Как добавлять изображения из Instagram

При публикации изображений из Instagram на своих страницах используйте элемент amp-instagram.

Для этого разместите между тегами <head> следующий скрипт:

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

Затем вставьте код data-shortcode из URL изображения. Например, в URL https://instagram.com/p/fBwFP он выглядит так: fBwFP. В адаптивных макетах Instagram используется фиксированное соотношение сторон, поэтому значения ширины и высоты должны быть соответствующими:

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

Open this snippet in playground

Как добавлять записи или видео Facebook

При публикации записей или видео Facebook на своих страницах используйте элемент amp-facebook.

Для этого разместите между тегами <head> следующий скрипт:

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

Пример кода для добавления записи Facebook

Source:

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

Preview:

Пример кода для добавления видео Facebook

Source:

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

Preview:

Как добавлять видео YouTube

При публикации видео YouTube на своих страницах используйте элемент amp-youtube.

Для этого разместите между тегами <head> следующий скрипт:

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

Идентификатор data-videoid содержится в URL каждого видео YouTube. Например, в URL https://www.youtube.com/watch?v=Z1q71gFeRqM он выглядит так: Z1q71gFeRqM.

Добавьте элемент layout="responsive", чтобы макеты для видео с соотношением сторон 16:9 создавались корректно:

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

Open this snippet in playground

Как добавлять объявления

При публикации объявлений на своих страницах используйте элемент amp-ad. Помните о том, что поддерживаются только объявления, использующие протокол HTTPS.

Код JavScript, предоставляемый рекламными сетями, запрещено обрабатывать непосредственно в документах AMP, поэтому среда выполнения AMP загружает iframe из другого источника в тестовую среду iframe и выполняет код JavaScript рекламной сети в этой среде.

Укажите ширину и высоту объявления, а также тип рекламной сети с помощью атрибута 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 поддерживает множество рекламных сетей. Ознакомьтесь с их полным списком.

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