AMP

amp-addthis

Этот компонент осуществляет показ виджета сервиса AddThis, предназначенного для распространения веб-контента.

Скрипт<script async custom-element="amp-addthis" src="https://cdn.ampproject.org/v0/amp-addthis-0.1.js"></script>
Поддерживаемые макетыfill, fixed, fixed-height, flex-item, nodisplay, responsive

Возможности AddThis

Компонент amp-addthis позволяет добавлять на веб-страницы привлекательно оформленные и простые в использовании кнопки, предназначенные для публикации контента на других ресурсах. С их помощью посетители сайта смогут без труда распространять ваш контент, используя более 200 различных социальных ресурсов, в том числе сайт Facebook и Facebook Manager, WhatsApp, Твиттер, Pinterest и т. д.

В настоящее время сервис AddThis внедрен более чем на 1,5 млн сайтов, аудитория которых превышает 2 млрд посетителей, говорит более чем на 60 языках и проживает в самых разных странах.

Кнопки публикации

Floating

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

Пример:

<!--
  В этом примере используется тег pubId.
  После того как вы создадите аккаунт на странице https://www.addthis.com/dashboard,
  замените значение pubId на нужный вам вариант.
-->
<amp-addthis
  width="320"
  height="92"
  layout="responsive"
  data-pub-id="ra-5c191331410932ff"
  data-widget-id="957l"
  data-widget-type="floating">
</amp-addthis>

Inline

Этот атрибут позволяет добавлять кнопки публикации непосредственно в контент на вашей веб-странице.

Пример:

<!--
  В этом примере используется тег pubId.
  После того как вы создадите аккаунт на странице https://www.addthis.com/dashboard,
  замените значение pubId на нужный вам вариант.
-->
<amp-addthis
  width="320"
  height="92"
  data-pub-id="ra-5c191331410932ff"
  data-widget-id="mv93"
  data-widget-type="inline">
</amp-addthis>

Атрибуты

data-pub-idЭтот атрибут позволяет указывать значение идентификатора издателя. Упомянутое значение можно найти в URL, который будет создан после входа в панель инструментов AddThis. Например, в URL https://www.addthis.com/dashboard#gallery/pub/ra-5c191331410932ff идентификатором издателя будет элемент ra-5c191331410932ff.
data-widget-idИдентификатор виджета ID, связанный с внедренным на веб-странице сервисом AddThis. Его значение тоже можно найти в настройках на панели инструментов AddThis. Чтобы узнать его, перейдите к панели инструментов, выберите нужную реализацию сервиса AddThis и скопируйте последний фрагмент соответствующего URL. Например, в URL https://www.addthis.com/dashboard#tool-config/pub/ra-5c191331410932ff/widgetId/957l идентификатором виджета будет элемент 957l.
data-widget-typeЭтот атрибут содержит информацию о типе виджета.
  • Для обозначения плавающего виджета используется элемент data-widget-type="floating".
  • Виджету в контенте соответствует вариант data-widget-type="inline".
data-titleНеобязательное поле. С его помощью можно указать заглавие, которое сервис AddThis добавит в создаваемую публикацию. Если оно не задано, будет использован заголовок из документа, содержащего тег amp-addthis.
data-urlНеобязательное поле. С его помощью можно указать URL, который сервис AddThis добавит в создаваемую публикацию. Если оно не задано, будет использовано свойство location.href из документа, содержащего тег amp-addthis.
data-mediaНеобязательное поле. С его помощью можно указать URL медиаконтента, например видео или изображения, который сервис AddThis добавит в создаваемую публикацию. Если это поле не используется, соответствующее значение задано не будет.
data-descriptionНеобязательное поле. С его помощью можно указать описание страницы, которое сервис AddThis добавит в создаваемую публикацию. Если это поле не используется, соответствующее значение задано не будет.

Инструкции по реализации

  1. Создайте аккаунт AddThis на странице https://www.addthis.com/register, если вы этого ещё не сделали. Регистрация в этом сервисе совершенно бесплатна. Выполнив ее, вы получите доступ к набору инструментов для управления веб-контентом и анализа социального трафика на вашем сайте.
  2. Откройте панель инструментов AddThis и настройте кнопки публикации. В настоящее время на AMP-страницах поддерживаются только плавающие кнопки и кнопки в контенте, которые задаются с помощью атрибутов Floating и Inline соответственно.
  3. Настройте в этом сервисе кнопки "Понравилось", связанные с вашим контентом, а затем нажмите Activate Tool (Активировать инструмент). Откроется страница, на которой вы сможете сгенерировать код AddThis.
  4. Если вы собираетесь использовать виджет в контенте, добавьте нужный вариант кода в раздел body веб-страницы. Код для плавающего виджета можно внедрять в любой раздел HTML-кода, поскольку положение этого виджета на странице будет зависеть только от настроек в сервисе AddThis.

Вот и всё! Кнопки публикации появятся на ваших страницах.

Рекомендуем также посмотреть наше видео на YouTube с пошаговыми инструкциями.

Валидация

С правилами для компонента amp-addthis можно ознакомиться в спецификации валидатора AMP.

Конфиденциальность

Ознакомиться с Политикой конфиденциальности

Панель инструментов AddThis и Инструменты AddThis собирают данные о взаимодействии Устройства Конечного пользователя с Сайтами Издателей и о взаимодействии Пользователей Панели инструментов с Панелью инструментов (далее – Данные AddThis)

Что относится к Данным AddThis:

  • IP-адрес, идентификатор мобильной рекламы (инструмент, который позволяет разработчикам мобильных приложений идентифицировать пользователей), идентификатор мобильного приложения, тип браузера, язык интерфейса браузера, тип операционной системы, а также дата и время, когда Конечный пользователь взаимодействовал с Сайтом Издателя или Панелью инструментов.
  • Информация о Пользователе Панели инструментов.
  • Информация о взаимодействии Конечных пользователей с Сайтом Издателя, например о посещениях, публикациях контента Издателя с помощью AddThis и прокрутках страниц.
  • URL источника запроса и сервис веб-поиска, благодаря которым Конечный пользователь обнаружил Сайт Издателя и открыл его.
  • Ключевые слова, которые были указаны в окне поиска Панели инструментов AddThis, а также информация о скачиваниях, установках и удалениях Панели инструментов AddThis и о том, когда это произошло.
  • Информация о том, как и насколько часто Конечный пользователь и Пользователь Панели инструментов взаимодействуют с Инструментами AddThis и Панелью инструментов соответственно.
  • Данные о местоположении, связанные с IP-адресом Конечного пользователя и Пользователя Панели инструментов.

Данные AddThis считаются персональной информацией в случаях, установленных действующим законодательством. В связи с тем, что собранные сервисом AddThis Данные Конечных пользователей передаются в компанию Oracle, Издатели обязаны в соответствии с текущими Условиями использования запрашивать у Конечных пользователей требуемые учетные данные и подтверждения согласия, а также демонстрировать им необходимые оповещения.

Поддержка

По всем вопросам, связанным с реализацией AddThis на AMP-страницах, обращайтесь в нашу службу поддержки с помощью веб-формы или по адресу электронной почты help@addthis.com.

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