Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
RU
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Türkçe 中文

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
  • 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

Требуется дополнительная помощь?

Вы читали этот документ десятки раз, но так и не нашли ответов на все свои вопросы? Возможно, другие люди столкнулись с такой же проблемой — обратитесь к ним на Stack Overflow.

Перейти на Stack Overflow
Нашли ошибку или недостающую функцию?

Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Перейти на GitHub