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

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

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

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

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

В результате пропорции твита будут изменены автоматически в соответствии с заданными вами размерами, однако его внешний вид может быть неоптимальным. В этом случае вручную укажите более подходящие значения ширины и высоты твита или используйте атрибут media, чтобы соотношение сторон менялось в зависимости от ширины экрана.

Show full code

Как добавлять изображения из 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 используется фиксированное соотношение сторон, поэтому значения ширины и высоты должны быть соответствующими:

Show full code

Как добавлять записи или видео 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 создавались корректно:

Show full code

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

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

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

Укажите ширину и высоту объявления, а также тип рекламной сети с помощью атрибута type, который определяет ее шаблон. У разных типов объявлений должны быть различные атрибуты data-*.

Show full code

Если показ объявлений выполнить нельзя, но рекламная сеть поддерживает атрибут placeholder, вставьте его, чтобы проверить код:

Show full code

Технология AMP поддерживает множество рекламных сетей. Ознакомьтесь с их полным списком.