AMP
RU
English Français العربية Español Italiano Indonesia 日本語 한국어 Português Türkçe 中文
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

amp-social-share

Кнопка, с помощью которой можно поделиться контентом.

Скрипт
<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
  • data-param-text: необязательный, по умолчанию присваивается значение "Заголовок текущей страницы".
  • data-mode: необязательный. Если задано значение replace, скрываются все варианты отправки контента, кроме системного.
Электронная почта email
  • data-param-subject: необязательный, по умолчанию присваивается значение "Заголовок текущей страницы".
  • data-param-body: необязательный, по умолчанию в качестве значения указывается URL из элемента с атрибутом rel=canonical.
  • data-param-recipient: необязательный, значение по умолчанию – пустая строка ("").
Facebook facebook
  • data-param-app_id: обязательный, по умолчанию присваивается значение none. В параметре app_id нужно указать идентификатор приложения Facebook, необходимый для работы с диалогом Facebook "Поделиться".
  • data-param-href: необязательный, по умолчанию в качестве значения задается URL из элемента с атрибутом rel=canonical.
  • data-param-quote: необязательный. С его помощью можно поделиться цитатой или отрывком текста.
LinkedIn linkedin
  • data-param-url: необязательный, в качестве значения по умолчанию вставляется URL из элемента с атрибутом rel=canonical.
Pinterest pinterest
  • data-param-media: необязательный, но настоятельно рекомендуется его указывать. По умолчанию присваивается значение none. Нужно включить URL медиафайла, который будет опубликован в Pinterest. Если не задать этот параметр, конечному пользователю будет предложено загрузить медиафайл.
  • data-param-url: необязательный, в качестве значения по умолчанию вставляется URL из элемента с атрибутом rel=canonical.
  • data-param-description: необязательный, по умолчанию присваивается значение "Заголовок текущей страницы".
Google+ gplus
  • data-param-url: необязательный, в качестве значения по умолчанию вставляется URL из элемента с атрибутом rel=canonical.
Tumblr tumblr
  • data-param-url: необязательный, в качестве значения по умолчанию вставляется URL из элемента с атрибутом rel=canonical.
  • data-param-text: необязательный, по умолчанию присваивается значение "Заголовок текущей страницы".
Твиттер twitter
  • data-param-url: необязательный, в качестве значения по умолчанию вставляется URL из элемента с атрибутом rel=canonical.
  • data-param-text: необязательный, по умолчанию присваивается значение "Заголовок текущей страницы".
WhatsApp whatsapp
  • data-param-text: необязательный, по умолчанию присваивается значение "Заголовок текущей страницы – URL текущей страницы".
LINE line
  • data-param-url: необязательный, в качестве значения по умолчанию вставляется URL из элемента с атрибутом rel=canonical.
  • data-param-text: необязательный, по умолчанию присваивается значение "Заголовок текущей страницы".
SMS sms
  • data-param-body: необязательный. В качестве значения по умолчанию вставляются следующие данные: rel=title – rel=canonical URL.

Поставщики без стандартных конфигураций

Вы можете использовать не только стандартных, но и других поставщиков, указав в компоненте 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 Start вы найдете уже оформленные адаптивные ссылки для отправки контента. Можете добавлять их на свои AMP-страницы.

Собственные стили

Иногда вам может понадобиться применить собственный стиль. В таких случаях достаточно просто переопределить стандартные стили, например так:

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

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub