Image Share Buttons Widget

Let readers pin a photo straight from your post. Image Share Buttons show a small Pinterest, Facebook and Copy link cluster in the corner of each large picture in your article when the pointer rests on it, a Share chip on touch screens, and a hidden-until-focused button for keyboard users - all without editing a single image tag.

Social Media Social No trackers, no cookies Free · no ads

Customize your widget

Buttons
Buttons

Loading networks…

Pinterest saves the picture itself; the others share the page.
Images
Add data-a2z-share="off" to any image (or its container) to skip it.
Access
Blank shares the page the images are on.
Light or dark
Match page reads the background behind the component.

Live preview

Exactly what your visitors will see

Embed code

<div data-a2z-kit="image-share-buttons" data-networks="pinterest,facebook,copy"></div>
<script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>

One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.

Works with

How it works

The kit looks for pictures matching your selector (by default images inside article, main or .entry-content) and keeps those drawn at least 200 CSS pixels wide, with an https address, not marked decorative with alt="" and not opted out with data-a2z-share="off". It never wraps, moves or edits your images: the buttons live in the kit's own floating layer and are positioned over each picture from its on-screen rectangle, following it as the page scrolls or resizes and hiding when it leaves the window. Pinterest's link carries url (the page), media (the picture) and description (the alt text, else the page title); Facebook and Copy link use the page address. Pictures added later, such as lazy-loaded images, are picked up automatically. Escape hides the buttons and returns focus to the picture's Share button.

Method

  • Eligible = matches selector AND drawn width >= minimum (200 px) AND alt != "" AND https src AND no data-a2z-share="off" on it or a parent
  • Pinterest = https://www.pinterest.com/pin/create/button/?url=<page>&media=<image>&description=<alt || title>, each value encoded
  • Overlay = position:fixed in the kit host at the chosen corner + 10 px, clamped to the visible part of the picture, updated on scroll/resize
  • Keyboard: one visually-hidden 'Share this image' button per picture, in document order, revealed on focus

Worked examples

A photo of raised beds

Inputs: Image https://example.com/img/raised-beds.jpg, alt Three raised beds of spring greens, on https://example.com/blog/spring-garden-guide

Result: https://www.pinterest.com/pin/create/button/?url=https%3A%2F%2Fexample.com%2Fblog%2Fspring-garden-guide&media=https%3A%2F%2Fexample.com%2Fimg%2Fraised-beds.jpg&description=Three%20raised%20beds%20of%20spring%20greens

Pinterest gets the page, the exact picture and its alt text as the pin description.

Pictures that are skipped

Inputs: A 120 px author avatar, a divider with alt="", and an http:// photo

Result: No buttons on any of them

Too narrow, decorative, and not fetchable over https respectively.

The builder preview

Inputs: The sample article's illustration is an inline data: SVG

Result: https://www.pinterest.com/pin/create/button/?url=https%3A%2F%2Fexample.com%2Fblog%2Fspring-garden-guide&description=An%20illustrated%20spring%20garden%20with%20flowers

Only in the preview is a data: picture accepted, and media is left out because Pinterest cannot fetch it.

Limitations

  • The keyboard Share buttons are in the kit's layer at the end of the page, so they come after your content in the Tab order.
  • Background images set in CSS and pictures inside iframes are not covered - only <img> elements.
  • At most 60 pictures per page get buttons.

Where publishers use it

  • A food blog whose step-by-step photos are its main traffic source from Pinterest
  • An interior design or wedding portfolio where visitors pin individual room or dress photos to boards
  • A travel blog letting readers share a single landscape photo to Facebook with the article link
  • A craft tutorial site that marks process shots data-a2z-share="off" and leaves the finished-project photos shareable

Questions

Why do some of my images not get buttons?

Pictures are skipped when they are narrower than the minimum width on screen (200 px by default), when their alt attribute is empty (the HTML signal for a decorative image), when their address is not https (Pinterest has to fetch the picture itself, so data:, blob: and http images cannot be pinned), when they sit outside the selector, or when you added data-a2z-share="off".

Will it change my page layout or my image HTML?

No. Nothing is inserted next to your images and no image is wrapped in a new element, so your theme's CSS, lazy loading and lightboxes keep working. The buttons float in a separate layer positioned over the picture.

What description does Pinterest get?

The picture's alt text, which you should already write for accessibility; when an image has no alt attribute, the page title is used. Pinterest lets the reader edit it before saving.

How does it work on phones and for keyboard users?

Touch screens have no hover, so a small Share chip sits on each eligible picture (you can turn it off). Keyboard users tab to an invisible 'Share this image' button that appears over its picture when focused; the share buttons follow it in the tab order, and Escape closes them.

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Image Share Buttons
https://a2z.tools/embed/image-share-buttons

Related widgets

More Social Media widgets →

  • Social Media Share Buttons

    Social Media Social New

    Share buttons for 26 networks - inline, floating, mobile bar or one Share button. No social scripts or cookies.

    Get code

  • Click to Share Quote

    Social Media Social New

    A styled pull quote with X, Threads, Bluesky and LinkedIn buttons that fit the text to each network's limit.

    Get code

  • Highlight to Share

    Social Media Social New

    Select any sentence in your article and a small toolbar offers to post it to X, Bluesky, Threads or email.

    Get code

  • Native Share Button

    Social Media Social New

    One Share button that opens the phone's own share sheet, with a tidy fallback panel on desktop.

    Get code

  • Copy Link Button

    Social Media Social New

    A Copy link button or address box that puts a clean page URL on the clipboard and confirms it.

    Get code

  • Share by Email Button

    Social Media Social New

    An 'Email this page' button that opens the reader's mail app with your subject, message and the link.

    Get code

Preview

CustomizeGet code
A2Z EMBEDS FOR YOUR WEBSITE