amp-social-share
Description
Функция отслеживания публикаций ссылок на ваши страницы сейчас разрабатывается.
Required Scripts
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
Supported Layouts
Кнопка, с помощью которой можно поделиться контентом.
Скрипт | <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script> |
Поддерживаемые макеты | container, fill, fixed, fixed-height, flex-item, nodisplay, responsive |
Примеры | См. пример amp-social-share на сайте AMP By Example. |
Обзор
Компонент amp-social-share
предназначен для показа кнопки, позволяющей делиться контентом на социальных платформах от разных поставщиков.
Примеры
Простая кнопка
Некоторые настройки задаются автоматически, если кнопка связана с одним из нескольких поставщиков, для которых уже созданы стандартные конфигурации. По умолчанию в качестве публикуемого URL указывается канонический URL текущего документа, а в качестве публикуемого текста – заголовок страницы.
<amp-social-share type="twitter"></amp-social-share>
Передача параметров
Если вы хотите, чтобы конечной точке передавались параметры, добавьте в код атрибут data-param-<attribute>
.
<amp-social-share type="linkedin" width="60" height="44"
data-param-text="Hello world"
data-param-url="https://example.com/">
</amp-social-share>
LinkedIn входит в число предварительно настроенных (стандартных) поставщиков, поэтому атрибут data-share-endpoint
здесь не нужен.
Атрибуты
type (обязательно) | С его помощью указывается тип социальной платформы, независимо от того, относится она к предварительно настроенным или нет. |
data-target | Определяет, где будет открываться целевой блок с контентом. По умолчанию задается значение _blank , и только в случае с электронными письмами и SMS в iOS вместо него выбирается _top . Обратите внимание, что переопределять это значение не рекомендуется, если дело не касается электронной почты. |
data-share-endpoint | Этот атрибут обязателен, если поставщик не входит в список стандартных. У некоторых популярных социальных платформ есть уже заданные конечные точки для публикаций. Более подробную информацию вы найдете ниже. Другие конечные точки необходимо указывать самостоятельно. |
data-param-* | Все атрибуты с префиксом data-param-* преобразуются в параметры URL, которые передаются конечной точке. |
Стандартные поставщики
Компонент amp-social-share
предполагает работу с несколькими стандартными поставщиками, для которых автоматически определяются конечные точки и некоторые параметры по умолчанию.
Поставщик | Тип | Параметры |
---|---|---|
Web Share API (открывает диалоговое окно выбора приложений в ОС) | system |
|
Электронная почта | email |
|
facebook |
| |
linkedin |
| |
pinterest |
| |
Google+ | gplus |
|
Tumblr | tumblr |
|
Твиттер | twitter |
|
whatsapp |
| |
LINE | line |
|
SMS | sms |
|
Поставщики без стандартных конфигураций
Вы можете использовать не только стандартных, но и других поставщиков, указав в компоненте amp-social-share
дополнительные атрибуты.
Пример кнопки, связанной с не настроенным предварительно поставщиком
В этом примере представлен код, с помощью которого создается кнопка для отправки контента через Facebook Messenger. Нужная конечная точка для специального протокола Facebook Messenger задана в атрибуте data-share-endpoint
.
<amp-social-share type="facebookmessenger"
data-share-endpoint="fb-messenger://share"
data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>
Создать подходящие стили и изображение кнопки предстоит вам, поскольку стандартных не существует.
Стили
Стили по умолчанию
Компонент amp-social-share
изначально поддерживает несколько социальных платформ с предварительно заданными настройками. Кнопки для публикаций на этих платформах оформляются с помощью логотипа поставщика и окрашиваются в его фирменный цвет. Ширина по умолчанию – 60px, высота по умолчанию – 44px.
Собственные стили
Иногда вам может понадобиться применить собственный стиль. В таких случаях достаточно просто переопределить стандартные стили, например так:
amp-social-share[type="twitter"] {
background: red;
background-image: url(datauri:svg/myownsvgicon);
}
Замена переменных значениями
Вы можете указывать в элементе <amp-social-share>
переменные в соответствии с общими правилами, регулирующими их использование с AMP. В примере ниже переменная TITLE
заменяется заголовком страницы, а CANONICAL_URL
– каноническим URL документа.
<amp-social-share type="whatsapp"
data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>
Валидация
С правилами для компонента amp-social-share можно ознакомиться в спецификации валидатора AMP. ,false,true
Вы читали этот документ десятки раз, но так и не нашли ответов на все свои вопросы? Возможно, другие люди столкнулись с такой же проблемой — обратитесь к ним на Stack Overflow.
Перейти на Stack Overflow Нашли ошибку или недостающую функцию?Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.
Перейти на GitHub