How to Add a Custom Pinterest Save Button to Blog Post Images

Overview

This guide explains how to add a custom Pinterest Save button to images inside your PhotoBiz blog posts. Instead of using the default Pinterest Pin button, this setup lets you use your own custom button image.

This is helpful if you want the Pinterest button to match your website branding, colors, or style. Once completed, the custom Pinterest button will appear when visitors hover over supported blog images, allowing them to save your blog images to Pinterest.

This setup uses a small amount of custom CSS and JavaScript added to your global design settings.

Prerequisites

Before you begin, make sure the following requirements are met:

You have access to the PhotoBiz Website Builder
Your website has already been created and is editable
You have at least one published blog post
Your blog post images use the Stack or Stack Mini image layout
You have a custom Pinterest button image ready to upload
Your custom Pinterest button image is sized at 173 x 100 pixels
You are comfortable copying and pasting snippets of code

Upload Your Custom Pinterest Button Image First

Before adding the code, upload your custom Pinterest button image to your PhotoBiz account.

For best results, your custom Pinterest button graphic should be 173 x 100 pixels. This size matches the default button dimensions used in the code and helps the button display clearly over your blog images.

Your custom Pinterest button image should be uploaded to the Files section under Documents. After the image is uploaded, copy the file URL. You will replace the placeholder URL in the code with your copied file URL.

--pb-pin-button-image: url("https://CUSTOM-PINTEREST-FILE");

Replace https://CUSTOM-PINTEREST-FILE with the URL for your uploaded custom Pinterest button image.

For example:

--pb-pin-button-image: url("https://yoursite.com/files/custom-pinterest-button.png");

Learn More: How To Get A Direct File URL in PhotoBiz

STEP ONE

Log into your PhotoBiz account and click WEBSITE in the left-side menu.

This opens your Website Builder, where you can edit your website pages, blog display, design settings, and global website code.

STEP TWO

At the top center of your Website control panel, click DESIGN.

This opens the design area for your website. From here, you can manage global design settings that affect the look and behavior of your website.

STEP THREE

Click EDIT DESIGN SETTINGS to access your global design settings.

These settings apply to your website design as a whole. This is where you can add custom CSS and JavaScript that affects your website.

STEP FOUR

Click the CSS/JS icon in the right-side menu.

This opens the custom code area for your website. You will use the HEAD section for the CSS code and the BODY section for the JavaScript code.

STEP FIVE

Copy the code below and paste it into the HEAD section.

Before saving, replace https://CUSTOM-PINTEREST-FILE with the URL for your uploaded custom Pinterest button image.

Copy & Paste Code:

<style>
html.pb-blog-detail-pin {
  --pb-pin-button-width: 172px;
  --pb-pin-button-height: 100px;
  --pb-pin-button-offset: 24px;
  --pb-pin-button-image: url("https://CUSTOM-PINTEREST-FILE");
}

/* Make the actual image wrapper hold the custom pin button */
.blog-detail .images-stackable-layout .aspect-ratio {
  position: relative;
}

/* Custom Pinterest button */
.blog-detail .images-stackable-layout .pb-custom-pin-button {
  position: absolute;
  top: var(--pb-pin-button-offset);
  right: var(--pb-pin-button-offset);
  width: var(--pb-pin-button-width);
  height: var(--pb-pin-button-height);
  background-image: var(--pb-pin-button-image);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  opacity: 0;
  z-index: 99999;
  cursor: pointer;
  transition: opacity 200ms ease;
}

/* Show button on hover */
.blog-detail .images-stackable-layout .aspect-ratio:hover .pb-custom-pin-button,
.blog-detail .images-stackable-layout .pb-custom-pin-button:focus {
  opacity: 1;
}

/* Hide text */
.blog-detail .images-stackable-layout .pb-custom-pin-button span {
  position: absolute;
  left: -9999px;
}

/* Show on touch devices */
@media (hover: none) {
  .blog-detail .images-stackable-layout .pb-custom-pin-button {
    opacity: 1;
  }
}
</style>

STEP SIX

Copy the code below and paste it into the BODY section.

This code creates the custom Pinterest button and connects it to each supported blog image. When a visitor clicks the custom button, Pinterest opens in a new window so the image can be saved to their Pinterest account.

Copy & Paste Code:

<script>
(function () {
  function getBlogRoot() {
    return document.querySelector('.blog-detail');
  }

  function getTargetImages() {
    const blog = getBlogRoot();
    if (!blog) return [];

    return Array.from(blog.querySelectorAll('.images-stackable-layout img'));
  }

  function getPageUrl() {
    const canonical = document.querySelector('link[rel="canonical"]');
    return canonical ? canonical.href : window.location.href;
  }

  function buildPinterestUrl(img) {
    const pageUrl = getPageUrl();
    const mediaUrl = img.currentSrc || img.src;
    const description = img.getAttribute('alt') || document.title || '';

    return 'https://www.pinterest.com/pin/create/button/' +
      '?url=' + encodeURIComponent(pageUrl) +
      '&media=' + encodeURIComponent(mediaUrl) +
      '&description=' + encodeURIComponent(description);
  }

  function addCustomPinButtons() {
    const blog = getBlogRoot();
    if (!blog) return;

    document.documentElement.classList.add('pb-blog-detail-pin');

    const images = getTargetImages();

    images.forEach(function (img) {
      if (img.dataset.pbCustomPinButtonApplied === '1') return;

      const wrapper = img.closest('.aspect-ratio');
      if (!wrapper) return;

      img.dataset.pbCustomPinButtonApplied = '1';

      wrapper.style.position = 'relative';

      const button = document.createElement('a');
      button.className = 'pb-custom-pin-button';
      button.href = buildPinterestUrl(img);
      button.target = '_blank';
      button.rel = 'noopener noreferrer';
      button.setAttribute('aria-label', 'Save to Pinterest');
      button.innerHTML = '<span>Save to Pinterest</span>';

      button.addEventListener('click', function (e) {
        e.preventDefault();
        e.stopPropagation();

        window.open(
          buildPinterestUrl(img),
          'pinterest',
          'width=750,height=650,menubar=no,toolbar=no,resizable=yes,scrollbars=yes'
        );
      });

      wrapper.appendChild(button);
    });
  }

  function init() {
    addCustomPinButtons();

    const observer = new MutationObserver(function () {
      addCustomPinButtons();
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

FINAL STEP

Click Save Changes to apply the code to your website.

Once saved, open one of your published blog posts that uses the Stack or Stack Mini image layout. When you hover over a supported blog image, your custom Pinterest Save button should appear over the image. On touch devices, the button will display without requiring hover.

What Clients Will See

After the code is added, visitors viewing your blog posts will see your custom Pinterest Save button appear on supported blog images.

When they click the button, Pinterest will open in a new window. The blog post URL, image, and image description will be sent to Pinterest so the visitor can save the image to one of their Pinterest boards.

Visitors will need to log into their own Pinterest account to complete the save.

Additional Options or Helpful Notes

The custom Pinterest Save button only appears on blog post images using the Stack or Stack Mini image layouts.

The button does not appear on standard website pages, Client Galleries, image blocks, or other areas of your website.

No Pinterest account connection is required inside your PhotoBiz account. Visitors use their own Pinterest account when saving images.

For best results, use a PNG image with a transparent background for your custom Pinterest button. This helps the button display cleanly over your blog images.

The Pinterest description is pulled from the image alt text when available. If no alt text is available, the code uses the blog post page title.

Troubleshooting or FAQs

Why is my custom Pinterest button not showing?

Confirm that your blog post is published and that the images are using the Stack or Stack Mini image layout. The custom button only appears on supported blog image layouts.

Also confirm that the HEAD code and BODY code were pasted into the correct CSS/JS sections.

Why is my button image broken or not loading?

Check the custom button image URL in the HEAD code. Make sure you replaced https://CUSTOM-PINTEREST-FILE with the full URL for the image file you uploaded to your PhotoBiz account.

The URL must remain inside the quotation marks.

Can I use a different button image later?

Yes. Upload the new button image to your Files section under Documents, copy the new file URL, and replace the existing image URL in the HEAD code.

Click Save Changes when you are finished.

Previous Post Next Post

How To Make Blog Images Available to Pin on Pinterest

January 30, 2026

How To Customize Blog Post Layout

July 30, 2025

How can I add images to be in line with text on a blog post?

June 4, 2024

How to Hide View Previous & Next Post in Blog Posts Using CSS

March 5, 2026

How to Add a Custom Pinterest Save Button to Blog Post Images