One service at a time

The Pinterest button and its image

Pinterest is the one service in the catalogue whose template has a slot for a picture, which makes it the button worth its place on anything with product photography — and the one whose behaviour changes depending on where the reader pressed it.

The code

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_pinterest" data-label="Pin"></a>
</div>

Choose which image Pinterest receives

The image comes from data-image on the kit, then ats_config.image, then the page’s og:image. An image overlay uses the picture the reader selected. If no image is available, the empty media parameter is omitted and Pinterest can offer its own picker. The description comes from the title.

https://pinterest.com/pin/create/button/?url={url}&description={title}&media={image}

Turn overlays on if the pictures matter

With overlays switched on, every image past the size floor gets a share button in its corner, and a pin started from there carries that image. The page is still what gets shared — the picture rides along rather than replacing the link, because handing somebody a bare image file is not a share of your article.

window.ats_config = { overlays: true };

Live demo

Demo ↗

An article worth passing on

A single Pin button. It shares the page with the image selected by data-image, the image configuration, or the page’s og:image.

Services (1 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_pinterest" data-label="Pin"></a>
</div>

<script async src="//static.addtosite.com/widget.js"></script>

Image sharing