How to Create a Pinterest Pin Link

Pinterest share links (Pin links) open the Pin create dialog with your image and description pre-filled. They're perfect for e-commerce, blogs, and visual content.

Basic Pin Link

Pinterest is unique among social platforms because it's built entirely around visual content. Unlike Twitter or Facebook shares, Pinterest pins require an image URL. This makes Pinterest particularly powerful for e-commerce, recipes, home decor, fashion, and any visually-driven content that users want to save for later.

<a href="https://pinterest.com/pin/create/button/?url=https://example.com/product&media=https://example.com/image.jpg&description=Check%20out%20this%20product"
   target="_blank"
   rel="noopener noreferrer">
  Pin It
</a>

This HTML creates a Pin button with all three key parameters. The media parameter must be a direct link to an image file, and the description becomes the pin's caption.

URL Parameters

Pinterest pin links accept three parameters that control what gets pinned. Unlike other social platforms, both the page URL and image URL are required.

The description is optional but highly recommended. A good description with relevant keywords helps your pin appear in Pinterest search results.

Image Best Practices

Image quality is everything on Pinterest. The platform is designed for beautiful visuals, and poor-quality images will get overlooked. These specifications ensure your pins look great in the feed.

Now let's look at how to implement pin buttons in your website code, starting with a simple popup approach.

Opening in a Popup

Opening Pinterest in a popup window keeps users on your site while they save the pin. This is the standard approach for most Pin It buttons.

function pinIt(pageUrl, imageUrl, description) {
  const pinUrl = 'https://pinterest.com/pin/create/button/?' +
    'url=' + encodeURIComponent(pageUrl) +
    '&media=' + encodeURIComponent(imageUrl) +
    '&description=' + encodeURIComponent(description);

  window.open(
    pinUrl,
    'pinterest-pin',
    'width=750,height=600,scrollbars=yes'
  );
}

// Usage
pinIt(
  'https://example.com/recipe',
  'https://example.com/recipe-photo.jpg',
  'Delicious homemade pasta recipe - easy 30 minute dinner!'
);

This function accepts all three pin parameters and opens Pinterest with the content ready to save. The larger popup size (750x600) accommodates Pinterest's board selection interface.

React Component

For React applications, a reusable component makes it easy to add Pin buttons to product pages, blog posts, and galleries. This TypeScript component handles all the URL encoding automatically.

interface PinButtonProps {
  url: string;
  media: string;
  description?: string;
  children: React.ReactNode;
  className?: string;
}

function PinButton({ url, media, description, children, className }: PinButtonProps) {
  const handleClick = () => {
    const params = new URLSearchParams({
      url,
      media,
      ...(description && { description }),
    });

    const pinUrl = `https://pinterest.com/pin/create/button/?${params.toString()}`;

    window.open(
      pinUrl,
      'pinterest-pin',
      'width=750,height=600,scrollbars=yes'
    );
  };

  return (
    <button onClick={handleClick} className={className}>
      {children}
    </button>
  );
}

// Usage
<PinButton
  url="https://example.com/product"
  media="https://example.com/product-image.jpg"
  description="Beautiful handmade pottery - shop now!"
>
  Pin It
</PinButton>

The component uses URLSearchParams for clean URL construction and conditionally includes the description only if provided. The spread operator with conditional object creation keeps the code concise.

Dynamic Pin Buttons

For image-heavy pages like galleries or product listings, you might want to add Pin buttons to every image automatically. This JavaScript approach adds hover-activated Pin buttons without modifying your HTML.

// Add Pin button overlay to all product images
document.querySelectorAll('.product-image').forEach(img => {
  const pinBtn = document.createElement('button');
  pinBtn.className = 'pin-overlay-btn';
  pinBtn.innerHTML = 'Pin';

  pinBtn.addEventListener('click', () => {
    const pageUrl = window.location.href;
    const imageUrl = img.src;
    const description = img.alt || document.title;

    const pinUrl = 'https://pinterest.com/pin/create/button/?' +
      'url=' + encodeURIComponent(pageUrl) +
      '&media=' + encodeURIComponent(imageUrl) +
      '&description=' + encodeURIComponent(description);

    window.open(pinUrl, 'pinterest', 'width=750,height=600');
  });

  img.parentElement.appendChild(pinBtn);
});

This script loops through all images with the product-image class and creates Pin button overlays. The image's alt text becomes the pin description, providing helpful context automatically.

Pin Bookmarklet

Pinterest's official bookmarklet lets users pin any image from any webpage. You can offer this as a convenient tool for frequent pinners visiting your site.

<!-- Drag this to bookmarks bar -->
<a href="javascript:void((function(){var e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','https://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());">
  Pin It
</a>

Users drag this link to their browser's bookmarks bar. When clicked on any page, it loads Pinterest's official pinning tool that lets them select any image on the page.

Rich Pins

Rich Pins add extra information directly on the pin itself, like pricing for products or ingredients for recipes. They require validation with Pinterest but significantly improve engagement and click-through rates.

Add Pinterest meta tags for Rich Pins (enhanced pin previews):

<head>
  <!-- Product Rich Pin -->
  <meta property="og:type" content="product" />
  <meta property="og:title" content="Product Name" />
  <meta property="og:description" content="Product description" />
  <meta property="og:url" content="https://example.com/product" />
  <meta property="og:image" content="https://example.com/product.jpg" />
  <meta property="product:price:amount" content="49.99" />
  <meta property="product:price:currency" content="USD" />

  <!-- Article Rich Pin -->
  <meta property="og:type" content="article" />
  <meta property="article:author" content="Author Name" />
  <meta property="article:published_time" content="2026-01-15" />
</head>

Product Rich Pins show real-time pricing and availability. Article Rich Pins display the headline, author, and publish date. Both types must be validated through Pinterest's developer tools before they work.

Try the URL Builder

Use our Pinterest Pin template to build pin links interactively.