Кнопка "Поделиться"

Общие сведения


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

Чтобы добавить на сайт кнопку "Поделиться", создайте ее с помощью нашего генератора кнопок.

Обычная кнопка


На страницах, которые включают код JavaScript нашей кнопки "Поделиться" (указанный ниже), эта кнопка — тег привязки с классом tumblr-share-button:

<a class="tumblr-share-button" href="https://www.tumblr.com/share"></a>
<script id="tumblr-js" async src="https://assets.tumblr.com/share-button.js"></script>

Примечание. Если на страницу добавлено несколько кнопок "Поделиться", сценарий JavaScript нужно указать только один раз, желательно сразу после закрывающего тега </body>.

Содержимое постов по умолчанию

По умолчанию кнопка "Поделиться" создает пост с фото или ссылкой, в зависимости от метатегов Open Graph, найденных на странице. Но, следуя инструкциям ниже, вы можете настроить кнопку так, чтобы она создавала нужные вам посты. Вот параметры по умолчанию:

  • Пост с фото. Кнопка "Поделиться" создает пост с фото, если находит тег og:image с изображением не менее 500 пикселей в ширину и соотношением сторон менее, чем 3:1. Для подписи к посту используется параметр og:description.
  • Пост со ссылкой. Кнопка "Поделиться" создает пост со ссылкой, если не находит подходящее изображение для поста с фото. Для заголовка используется параметр og:title, для подписи — og:description, а для URL-адреса поста со ссылкой — canonical URL.

Настройки содержимого постов


Если вы хотите, чтобы кнопка "Поделиться" создавала посты определенного типа, воспользуйтесь указанными ниже параметрами. Их можно задать как атрибуты данных для якорного тега кнопки или как параметры строки запроса в URL-адресе для атрибута кнопки href.

ПараметрОписаниеАтрибут данныхПараметр строки запроса
Тип постаТип постов Tumblr. Доступные варианты: текст, фото, ссылка, цитата, чат и видео.data-posttypeposttype
ТегиСписок тегов через запятуюdata-tagstags
ЗаголовокИспользуется в постах такого типа: текст, ссылка и чат.data-titletitle
CодержимоеОсновное содержимое поста зависит от используемого типа постов. Для постов с фото это будет URL-адрес фото, а для поста с цитатой — цитата.

Подробнее читайте в разделе "Содержимое постов по типу" ниже.
data-contentcontent
ПодписьИспользуется в постах такого типа: фото, ссылка, видео и цитата.data-captioncaption
Показывать атрибутыУказывает, нужно ли включать в тело поста атрибуты для отображения надписи "с помощью ".data-show-viashow-via

Содержимое постов по типам


Текст
data-title: заголовок текстового поста.
data-content: тело текстового поста.

Фото
data-content: URL-адрес одного фото или список URL-адресов фото через запятую для фотосета.
data-caption: подпись поста с фото.

Цитата
data-content: цитата.
data-caption: источник цитаты (имя оратора или исходное упоминание).

Ссылка
data-title: заголовок поста со ссылкой.
data-content: целевой URL-адрес ссылки.
data-caption: описание ссылки.

Чат
data-title: заголовок поста с чатом.
data-content: тело чата (о чем говорили герои диалога).

Видео
data-content: URL-адрес или код вставки видео.
data-caption: подпись поста с видео.

Настройки стиля кнопки


Вы можете настроить стиль кнопки "Поделиться", используя такие атрибуты данных в якорном теге кнопки:

ПараметрДопустимые значенияПо умолчанию
data-colorсиний
черный
белый
синий
data-notesвверху
справа
нет
нет

Канонический URL-адрес


Чтобы счетчик заметок правильно работал и отображался, необходимо указать канонический URL-адрес страницы. Кнопка "Поделиться" будет искать его в таких местах и в такой последовательности:

ПриоритетностьИсточник данных
1Атрибут data-href якорного тега кнопки
2Элемент канонической ссылки
3Метаэлемент og:url
4URL-адрес страницы

Если вы создаете пользовательскую кнопку (как показано ниже), помимо содержимого поста необходимо передать канонический URL-адрес в строке запроса. Например:

http://tumblr.com/widgets/share/tool?canonicalUrl=http://cats.com

Создание собственной кнопки


Если вы хотите полностью настроить дизайн кнопки в соответствии с оформлением своего сайта, вы можете создать кнопку с нуля. Пусть ваша пользовательская кнопка открывает всплывающее окно с URL-адресом https://www.tumblr.com/widgets/share/tool и передает всю информацию о содержимом постов в виде параметров строки запроса, как описано выше. Размер инструмента отправки постов автоматически подстроится под содержимое поста, но мы рекомендуем открывать окно размером 540x600 пикселей.

Счетчик заметок

Вы можете отобразить счетчик даже на пользовательской кнопке. Для этого необходимо передать URL-адрес страницы в конечную точку нашего API статистики отправок и извлечь число заметок, например так:

http://api.tumblr.com/v2/share/stats?url=https://www.tumblr.com/buttons

Ответ необходимо сохранять на своей стороне и повторно извлекать его примерно каждые 10 минут, поскольку Tumblr кэширует число заметок к URL-адресам постов, которыми поделились, на 10 минут.

Язык кнопок


Вы можете локализовать кнопку с помощью атрибута data-locale якорного тега кнопки. Tumblr поддерживает такие языки:

ЯзыкЗначение языкового стандарта
Английскийen_US
Немецкийde_DE
Французскийfr_FR
Итальянскийit_IT
Японскийja_JP
Турецкийtr_TR
Испанскийes_ES
Русскийru_RU
Польскийpl_PL
Португальскийpt_PT
Португальскийpt_BR
Голландскийnl_NL
Корейскийko_KR
Китайский (упрощенный)zh_CN
Китайский (традиционный)zh_TW