How To Make Blog Images Available to Pin on Pinterest

How to Make Blog Post Images Pinnable to Pinterest

This guide explains how to enable a Pinterest Save (Pin) button on images inside your PhotoBiz blog posts. Adding this button allows visitors to easily save your blog images to Pinterest, helping increase visibility and traffic to your website. This setup uses a small amount of custom CSS and JavaScript added to your global design settings. Once completed, the Pinterest Save button will appear when visitors hover over supported blog images.

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 are comfortable copying and pasting snippets of code

STEP ONE

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

STEP TWO

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

STEP THREE

Click EDIT DESIGN SETTINGS to access your global design settings.

STEP FOUR

Click the CSS/JS icon in the right-side menu. This is where you will paste the custom code in the next steps.

STEP FIVE

Add the required code to enable the Pinterest Save button on your blog images.

First, copy the code below and paste it into the HEAD section. If you already have code in this section, you can place this above or below your existing code.

Copy & Paste Code:

<script async defer src="https://assets.pinterest.com/js/pinit.js" data-pin-hover="true"></script>

<style>
/* Allow Pinterest hover to work on images */
.blog-detail .images-stackable-layout a.js-launch-full-screen-gallery {
  pointer-events: none !important;
}

.blog-detail .images-stackable-layout a.js-launch-full-screen-gallery img {
  pointer-events: auto !important;
}

</style>

Next, copy the code below and paste it into the BODY section of the CSS/JS settings.

Copy & Paste Code:

<script>
(function () {
  function applyPinFix(root) {
    const blog = root.querySelector ? root.querySelector('.blog-detail') : null;
    if (!blog) return;

    const scopes = blog.querySelectorAll('.images-stackable-layout');
    if (!scopes.length) return;

    scopes.forEach(scope => {
      const links = scope.querySelectorAll('a.js-launch-full-screen-gallery');
      links.forEach(a => {
        const img = a.querySelector('img');
        if (!img) return;

        if (img.dataset.pbPinFixApplied === "1") return;
        img.dataset.pbPinFixApplied = "1";

        img.addEventListener('click', function (e) {
          e.preventDefault();
          e.stopPropagation();
          a.click();
        }, true);
      });
    });
  }

  document.addEventListener('DOMContentLoaded', function () {
    applyPinFix(document);

    const observer = new MutationObserver(mutations => {
      for (const m of mutations) {
        for (const node of m.addedNodes) {
          if (node && node.nodeType === 1) applyPinFix(node);
        }
      }
    });
    observer.observe(document.body, { childList: true, subtree: true });
  });
})();
</script>

FINAL STEP

Click Save Changes to apply the code to your website.

Once saved, the Pinterest Save button will appear when visitors hover over supported images in your blog posts.

What Clients Will See

After the code is added, visitors viewing your blog posts will see a Pinterest Save button appear when they hover over supported images. This allows them to save and pin your blog images to boards in their own Pinterest account while logged in.

Additional Options or Helpful Notes

The Pinterest Save button will only appear on blog post images using the Stack or Stack Mini image layouts.
The Save button will not appear on other images across your website, including standard pages or galleries.
No Pinterest account connection is required on your PhotoBiz account for this feature to work.

Troubleshooting or FAQs

If the Save button does not appear, confirm that the blog post is published and that the images are using the Stack or Stack Mini layout. Also verify that the code was pasted into the correct HEAD and BODY sections without extra characters or formatting.

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 Add Custom CSS To The Website

September 4, 2025

How To Use Blog Blocks

May 21, 2025