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

amp-social-share

 
You can now use this component outside valid AMP documents using the experimental Bento version of this component. Learn more in our Bento guide.

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