Кнопки

Кнопка «Сохранить»

Кнопка «Сохранить» — лучший способ для вашего бизнеса получить контент на Pinterest. Всего одним щелчком мыши посетители могут сохранить понравившийся им контент на вашем сайте в Pinterest, что поможет еще большему количеству пользователей Pinner найти вас.

С 11 октября 2018 года мы внедрили липкие кнопки «Сохранить», которые работают на мобильных устройствах при наведении курсора на активные кнопки «Сохранить» на странице.

Чтобы отключить прикрепленные кнопки «Сохранить», добавьте
data-pin-sticky="false"
на ваш звонок
pinit.js
.

Начиная

Сначала убедитесь, что вы включили

pinit.js

скрипт на вашей странице. Помните, вам нужно включить это только один раз на страницу, независимо от того, сколько виджетов Pinterest вы используете. См. Обзор дополнений , чтобы получить советы о том, как лучше всего включить наш JavaScript на свой сайт.

pinit.js script:

<script
    type="text/javascript"
    async defer
    src="//assets.pinterest.com/js/pinit.js"
></script>

Чтобы добавить кнопку «Сохранить» на свою страницу, вставьте этот код в то место, где вы хотите разместить кнопку:

<a href="https://www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"> </a>

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

Настройки кнопки определяют, как выглядит и действует кнопка «Сохранить». Существует четыре категории настроек:

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

Pin type settings

Pin type props
Attribute	Description	Values	Default
`data-pin-do`	Определяет, может ли Pinner сохранять любое изображение со страницы (все изображения появятся в форме выбора изображений) или ограничен сохранением определенного изображения (и переносится прямо в форму создания пина).	`buttonBookmark` (любое изображение) или `buttonPin` (одно изображение) Если вы используете `buttonPin` , вы должны укажите URL-адрес изображения, используя `media` атрибут. Другие необязательные атрибуты включают в себя `url` и `description` атрибуты, которые определяют URL-адрес пина и описание пина.	`buttonBookmark`
`data-pin-id`	Если вы уже сохранили это изображение, используйте этот атрибут, чтобы рассматривать любые новые пины этого изображения как повторы оригинала. Это поможет вам лучше почувствовать вовлеченность, поскольку любые созданные вами пины будут учитываться при повторах исходного пина. Этот атрибут применяется индивидуально к изображениям на вашей странице.	The Pin URL	[not set] (new Pin)
`data-pin-nopin`	Изображение невозможно сохранить, и на нем не отображаются кнопки при наведении. Этот атрибут применяется к отдельным изображениям на вашей странице.	[любое значение] или [пусто] Если вы укажете любое значение, никто не сможет закрепить изображение.	[not set]

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

Button style props
Attribute	Description	Values	Default
`data-pin-hover`	Кнопка «Сохранить» отображается только тогда, когда пользователь наводит курсор на изображения. Это касается всех изображений на странице. Добавьте этот атрибут в свой вызов pinit.js.	[любое значение] или [не установлено] Если вы передадите любое значение, кнопка «Сохранить» появится при наведении курсора на все изображения на странице, за исключением случаев, когда изображение содержит `data-pin-nopin` или `data-pin-no-hover` attribute.	No hover ([not set])
`data-pin-sticky`	Закрепленные кнопки включены по умолчанию, когда `data-pin-hover="true"` . Эта настройка отключает их. Добавьте этот атрибут в свой вызов pinit.js.	[ложь] Если вы пройдете `false` when `data-pin-hover` установлено, липкие кнопки «Сохранить» не будут появляться на мобильных устройствах.	[not set]
`data-pin-round`	Изменяет кнопку «Сохранить» на круглую и красную. Это отменяет `data-pin-color` и `data-pin-count` атрибуты (круглые кнопки не отображают количество контактов). Добавьте этот атрибут в вызов pinit.js для изменения всех кнопок на вашей странице или добавления этого атрибута к одной image, чтобы изменить кнопку только для этого изображения.	`true` или [не установлено] (для прямоугольника)	rectangle ([not set])
`data-pin-tall`	Изменяет высоту кнопки «Сохранить». Прямоугольные кнопки в два раза шире, чем высота. Добавьте этот атрибут к вызову pinit.js, чтобы изменить все кнопки на вашей странице, или добавьте этот атрибут к одному изображению, чтобы изменить кнопку только для этого изображения.	Rectangular buttons: `true` (28 пикселей для прямоугольных, 32 пикселей для круглых) или [не задано] (20 пикселей для прямоугольный, 16 пикселей для круглого)	[Not set]
`data-pin-count`	Показывает количество контактов для одного изображения ( `data-pin-do="buttonPin"` ) Кнопки сохранения. Примечание: PIN-код счетчики не будут отображаться для круглых, наведенных или пользовательских кнопок. Добавьте этот атрибут в свой звонок к `pinit.js` изменить все кнопки на вашей странице или добавить этот атрибут к одному изображению, чтобы измените кнопку только для этого изображения.	`above` `beside` или не показано	[Not set]
`data-pin-custom`	Если вы установите это значение, мы не будем трогать какой-либо пользовательский HTML или CSS, который вы добавляете для кнопки. Использование пользовательского изображения переопределит все остальные атрибуты стиля кнопки. Убедитесь, что ваши специальные кнопки «Сохранить» соответствуют нашим правилам бренда . Дополнительные сведения об использовании пользовательских кнопок сохранения см. в разделе « Настраиваемые кнопки» . Добавьте этот атрибут к вызову pinit.js, чтобы изменить все кнопки на вашей странице, или добавьте этот атрибут к одному изображению, чтобы изменить кнопку только для этого изображения.	`true` или [не установлено]	[not set]

Source settings

Source props
Attribute	Description	Values	Default
`data-pin-description`	Переопределяет описание изображения по умолчанию и заменяет предоставленное вами описание изображения. Вы можете включить до 500 символов, но в виде сетки отобразятся только 75–100. Советы по использованию описаний см. в разделе «Рекомендации». Этот атрибут добавляется индивидуально к изображениям на вашей странице.	User-defined description	Название страницы
`data-pin-media`	Переопределяет изображение и заменяет другое изображение в форме создания пина. Советы по использованию мультимедиа см. в разделе «Рекомендации». Этот атрибут добавляется индивидуально к изображениям на вашей странице.	Image URL	Original source image
`data-pin-url`	Переопределяет URL-адрес страницы изображения и заменяет URL-адрес по вашему выбору. Этот атрибут добавляется индивидуально к изображениям на вашей странице.	URL	URL страницы, на которой находится изображение
`data-pin-no-hover`	Кнопки при наведении не появятся над этим изображением, но изображение все равно можно сохранить, если `data-pin-nopin` атрибут установлен. Этот атрибут добавляется индивидуально к изображениям. на вашей странице.	[any value] or [not set] If you pass in any value, hover buttons won't appear on the image.	[not set]

Log settings

Log props

Attribute	Description	Values	Default
`data-pin-error`	Logs all build and interaction events to the console. Add this attribute to your call to pinit.js.	[any value] or [not set]	[not set]
`data-pin-error`	The name of the function you want us to call if one of our API endpoints replies with an error. You have to build this yourself. It would be useful in combination with `data-pin-build` if you’re dynamically creating board widgets.	User defined	[not set]
`data-pin-tag`	Creates a logging tag for analytics. Tags may include the characters a-z, A-Z, 0-9 and underscore, and are constrained to 32 characters.	User defined	[not set]

Examples

Default Save Button

This will open the image picker form and let the user save any image on the page.
You can restrict users to saving the image you specify with the
data-pin-do="buttonPin"
attribute.
data-pin-save="true"
sets the Pin button to the current style. Note that the default is
true
so if this value is not set, the current style will be used.

<a
  data-pin-do="buttonBookmark"
  href="https://www.pinterest.com/pin/create/button/"
>
</a>

Round Save Button

Turn your button round using the

data-pin-shape="round"

attribute. In addition, you can use the following:

data-pin-do="buttonPin"
limits the user to pinning the specific image given.
data-pin-round="true"
sets the Pin button shape to
round
data-pin-save="false"
sets the Pin button to the old "Pin It" style. (Not recommended for non-English sites.)
href="https://www.pinterest.com/pin/create/button/?url=URLofImageToPin&description=DescriptionOfImage"
indicates the URL and description of the specific image the user is able to Pin
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_round_red_16.png" />
defines the image to be used for the button

<a
  data-pin-do="buttonPin"
  href="https://www.pinterest.com/pin/create/button/?url=http://www.foodiecrush.com/2014/03/filet-mignon-with-porcini-mushroom-compound-butter/&media=https://i.pinimg.com/736x/17/34/8e/17348e163a3212c06e61c41c4b22b87a.jpg&description=So%20delicious!"
  data-pin-shape="round"
>
</a>

Large Save Button

Turn your button large using the

data-pin-tall="true"

attribute.

data-pin-do="buttonPin"
limits the user to pinning the specific image given.
data-pin-tall="true"
doubles the size of the button compared to the standard
data-pin-save="true"
This is the default value, and will use the current Pin button styling
href="https://www.pinterest.com/pin/create/button/?url=URLofImageToPin&description=DescriptionOfImage"
inidicates the URL and description of the specific image the user is able to Pin

<a
  data-pin-do="buttonPin"
  data-pin-tall="true"
  data-pin-save="true"
  href="https://www.pinterest.com/pin/create/button/?url=http://www.foodiecrush.com/2014/03/filet-mignon-with-porcini-mushroom-compound-butter/&media=https://i.pinimg.com/736x/17/34/8e/17348e163a3212c06e61c41c4b22b87a.jpg&description=So%20delicious!"
  data-pin-height="28"
>
</a>

Default Save Button with save count listed above

Get this look by using the

data-pin-count="above"

attribute.

<a
  data-pin-do="buttonPin"
  data-pin-count="above"
  data-pin-save="true"
  href="https://www.pinterest.com/pin/create/button/?url=http://www.foodiecrush.com/2014/03/filet-mignon-with-porcini-mushroom-compound-butter/&media=https://i.pinimg.com/736x/17/34/8e/17348e163a3212c06e61c41c4b22b87a.jpg&description=So%20delicious!"
  data-pin-config="above"
>
</a>

Default Save Button with save count listed to the side

Get this look by using the

data-pin-count="beside"

attribute.

<a
  data-pin-do="buttonPin"
  data-pin-count="beside"
  data-pin-save="true"
  href="https://www.pinterest.com/pin/create/button/?url=http://www.foodiecrush.com/2014/03/filet-mignon-with-porcini-mushroom-compound-butter/&media=https://i.pinimg.com/736x/17/34/8e/17348e163a3212c06e61c41c4b22b87a.jpg&description=So%20delicious!"
  data-pin-config="beside"
>
</a>

Custom Save Button with a user-provided image

This uses the

data-pin-custom="true"

attribute.

<a
  data-pin-do="buttonPin"
  data-pin-count="beside"
  data-pin-custom="true"
  data-pin-save="false"
  href="https://www.pinterest.com/pin/create/button/?url=http://www.foodiecrush.com/2014/03/filet-mignon-with-porcini-mushroom-compound-butter/&media=https://i.pinimg.com/736x/17/34/8e/17348e163a3212c06e61c41c4b22b87a.jpg&description=So%20delicious!"
  data-pin-custom="true"
>
<img
  src="https://addons.opera.com/media/extensions/55/19155/1.1-rev1/icons/icon_64x64.png"
  width="25"
  height="25"
  >
</a>

Custom button conversion

If you've been using a custom ("unofficial") Save button (that doesn't use pinit.js), you've been missing out on automatic updates, analytics, technical support from our team and smarter recommendations for your users. You can convert your old Pin It buttons to an official Save button easily and without losing any of your customizations.

The steps to convert your buttons to "official" will depend on whether you created them using HTML or JavaScript. Either way, make sure you've included pinit.js on your page (and make sure you've only included it once).

<script
  async
  defer
  src="//assets.pinterest.com/js/pinit.js"
  >
</script>

If you're using HTML

You only need to add two attributes to your anchor tag to make it official:

data-pin-do="<PIN_TYPE>"
data-pin-custom="true"

With PIN_TYPE:

The PIN_TYPE can be either

buttonPin
(allowing the user to Pin only this specific image)
buttonBookmark
(allowing the user to Pin any image on your page)

To allow the user to Pin only this specific image, use

data-pin-do="buttonPin"

. To allow the user to Pin any image on your page, use

data-pin-do="buttonBookmark"

With custom:

Setting data-pin-custom to

true

keeps your custom markup, including your HTML and CSS. The value of

data-pin-custom

defaults to

false

so if this attribute isn't included we will render a standard Save buttons instead.

Example of a custom button with HTML

<a
href="https://www.pinterest.com/pin/create/button/"
data-pin-do="buttonBookmark"
data-pin-custom="true"
>
--YOUR CUSTOM HTML--
</a>

If you're using JavaScript

If you're using your own JavaScript to open the Pin Create form, switch to using the helper utilities that come with

pinit.js

. Including

pinit.js

gives you a global variable, PinUtils, that can trigger the any-image grid, Pin Create form or repin form.

PinUtils functions
Function	Description
`PinUtils.pinAny();`	Takes no arguments. This function opens the Image Picker form and lets the Pinner save any image from your page.
`PinUtils.pinOne(<PIN>);`	This function opens the Pin Create form and restricts the user to saving an image you have chosen from your site. Three fields are available to pass in `<PIN>` : `media` (required): the url of the image you want to save. `url` (optional): the url that the Pin will link to. This defaults to the url the user saves the Pin from. `description` (optional): the Pin's description. This defaults to the document title. Example: `PinUtils.pinOne({ 'url': 'https://www.flickr.com/photos/kentbrew/6851/', 'media': 'https://farm8.staticflickr.com/7027/68517.jpg', 'description': 'Next stop: Pinterest!' });`
`PinUtils.repin('<PIN_ID>');`	This function links to an already existing Pin rather than creating a new Pin. It requires an existing Pin id. Example: `PinUtils.repin('99360735500167749');`

PinUtils.pinOne() example Javascript:

PinUtils.pinOne
  (
    {
      url: 'https://www.flickr.com/photos/kentbrew/6851/',
      media: 'https://farm8.staticflickr.com/7027/68517.jpg',
      description: 'Next stop: Pinterest!'
    }
  );`

If you want to change the name of the global function to something besides PinUtils, set

data-pin-util="<YOUR_VAR_NAME>"

in your your call to pinit.js.

Example:

<button
  class="social pinterest"
  data-media="http://tinyurl.com/p3rqf54"
  data-description="A delicious burger">
</button>
<script>
  var pinOneButton = document.querySelector('.pinterest');
  pinOneButton.addEventListener('click',
    function() {
      PinUtils.pinOne({ media: e.target.getAttribute('data-media'), description: e.target.getAttribute('data-description') });
    }
  );
</script>

Best practices

The Save button is one of the best ways to get your content onto Pinterest through visitors to your site. Make sure your Save button is doing the most for you by following our best practices.

Include pinit.js correctly. Make sure you've included our JavaScript and that it is only included once per page. If you don't call pinit.js, your buttons and widgets won't render. If you call pinit.js more than once, unpredictable results will occur, especially if you are using global configuration attributes.
Use the Save button that's best for your website. We offer a lot of different style options for the Save button, so make sure you are using the one that will benefit you the most. Here are some suggestions for which kind to use, depending on what kind of content you have on your site:
Multiple images on a page (like a blog): it's best to use the hover button. When somebody hovers over any image on the page, the Save button will appear.
Multiple, similar images (like a product page): use the one-image Save button. This button specifies a single image to Pin from the page, no matter how many images are present.
Images that have already been saved before: consider using the data-pin-id attribute to create a repin (instead of a new Pin) every time someone saves content from your page. This can help you gain a better feel for engagement. Plus, you can get email notifications about who's saving content from your site.
An active mobile site: remember that hover buttons are not supported on mobile. Use a one-image or any-image button instead.

Check your images

Since Pinterest is entirely image-based, it's important that your images are correctly formatted and look their best.

Images need to be at least 100px by 200px to be saved to Pinterest by the Save button, and 200px by 200px to be saved using the hover button. Make sure at least one image is loaded outside of an iframe on your page. The Save button can't find images inside of iframes.

Use the

data-pin-media

attribute to provide a better-quality version of the image if you have one. Images with text overlays, tasteful branding and vertical orientation perform best on Pinterest. You can use the

data-pin-media

attribute to make these types of images available from the Save button

Prefill your descriptions

Use the

data-pin-description

attribute to pre-fill your Pin descriptions. Using prefilled descriptions lets users save content from your site faster, and can increase visibility of your Pin on Pinterest because it has an accurate description. If you don't specify a description, we'll pull descriptions from your page's alt or title tags, which may not be accurate for every image on the page.

When writing your descriptions, remember the following:

Descriptions can be up to 500 characters. While only 75-100 characters of your description will appear in grid view, the entire description will appear when Pinners click on a Pin.
Generally speaking, more characters mean more helpful details and more opportunities to show up in Pinterest search results.
Good descriptions are an accurate representation of what is in the image. Avoid URLs, which look messy, and first-person messages that don't make sense out of context.
Pins get distribution on Pinterest for a very long time: so avoid details like sales, prices or promotions, that might not be accurate later.

Specify canonical sources

Many Pins on Pinterest are created from images shown in search results, catalog pages, index pages or other non-canonical locations. In many of these cases, the URL for the image may not be the URL you want, potentially causing lost engagement and traffic to your site.

Use the

data-pin-url

attribute to associate an image to a particular URL. This will guarantee that the Pin is linked to the source URL that you want. This is particularly useful for pages with multiple images that link to various places on your website.

Follow Button

The follow button lets Pinners see your added Pins and easily follow your business's Pinterest page.

Before you start, make sure you've included the

pinit.js

script on your page. Remember, only include this once per page, no matter how many Pinterest widgets you use, including it more than once may cause unpredictable results.

See Add ons overview for tips about how to best include our JavaScript on your site.

<script
    type="text/javascript"
    async defer
    src="//assets.pinterest.com/js/pinit.js"
></script>

To add a follow button to your page, add the following code to your site where you want the follow button to appear. Change the link to point to your Pinterest page and edit the text to display your profile's name.

<a href="https://www.pinterest.com/<your-profile-here>/"
   data-pin-do="buttonFollow">
   Your&nbsp;profile&nbsp;name&nbsp;here
</a>

Платформа для разработчиков

Кнопки

Кнопка «Сохранить»

Начиная

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

Pin type settings

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

Source settings

Log settings

Examples

Default Save Button

Round Save Button

Large Save Button

Default Save Button with save count listed above

Default Save Button with save count listed to the side

Custom Save Button with a user-provided image

Custom button conversion

If you're using HTML

If you're using JavaScript

Best practices

Check your images

Prefill your descriptions

Follow Button

Buttons