AMP
RU
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Türkçe 中文 Polski Tiếng việt

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

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

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

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

СОВЕТ. Дополнительные примеры использования amp-twitter можно увидеть в рамках курса AMP By Example.

Как добавлять изображения из 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>
Открыть этот фрагмент в песочнице

СОВЕТ. Дополнительные примеры использования 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>
Пример кода для добавления записи 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:

СОВЕТ. Больше примеров использования 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>

Идентификатор 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>
Открыть этот фрагмент в песочнице

СОВЕТ. Дополнительные примеры использования amp-youtube можно увидеть в рамках курса AMP By Example.

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

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

В документе AMP не разрешается запускать JavaScript, предоставляемый рекламной сетью. Вместо этого среда выполнения AMP загружает iframe из другого источника (через изолированную программную среду iframe) и выполняет JavaScript-код рекламной сети внутри изолированной программной среды 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>
Открыть этот фрагмент в песочнице

Добавьте элемент 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>
Открыть этот фрагмент в песочнице

В AMP реализована поддержка широкого ассортимента рекламных сетей. Полный список см. в описании компонента amp-ad.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ. Подробнее о рекламе можно узнать в руководстве Монетизация AMP-страницы с помощью рекламы.