amp-twitter

Список атрибутов

Поведение

Компонент amp-twitter позволяет вставлять твит или момент для указанного идентификатора из Twitter.

Вот пример основного встроенного твита:

<amp-twitter width="375"
height="472"
layout="responsive"
data-tweetid="885634330868850689">
</amp-twitter>

Внешний вид

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

Placeholders & fallbacks

Элемент, помеченный атрибутом placeholders, отображается во время загрузки или инициализации содержимого твита или момента. Placeholder скрыты до отображения содержимого компонента AMP. Элемент, помеченный fallbacks атрибутом, отображается, если amp-twitter не поддерживается браузером или если твит или момент не существует или был удален.

Пример 1: Используем placeholder

<amp-twitter width="375"
height="472"
layout="responsive"
data-tweetid="638793490521001985">
<blockquote placeholder>
<p>I only needed to change some CSS.
<a href="http://t.co/LvjLbjgY9F">pic.twitter.com/LvjLbjgY9F</a>
</p>&mdash; Malte Ubl (@cramforce)
<a href="https://twitter.com/cramforce/status/638793490521001985">September 1, 2015</a>
</blockquote>
</amp-twitter>

Пример 2: Используем placeholder и fallback
<amp-twitter width="390"
height="330"
layout="responsive"
data-tweetid="855178606556856320">
<blockquote placeholder>
<p>What are 5 common misconceptions people often have about AMP? Find out on today&#39;s installment of Amplify:
<a href="https://t.co/kaSvV8SQtI">https://t.co/kaSvV8SQtI</a>
<a href="https://t.co/Cu9VYOmiKV">pic.twitter.com/Cu9VYOmiKV</a>
</p>&mdash; AMP Project (@AMPhtml)
<a href="https://twitter.com/AMPhtml/status/855178606556856320">April 20, 2017</a>
</blockquote>
<div fallback>
An error occurred while retrieving the Tweet. It might have been deleted.
</div>
</amp-twitter>

Оставить комментарий

avatar
25412
  Подписаться  
Уведомление о