How To Make Blog Images Available To Pin on Pinterest

How to Make Blog Post Images Pinnable to Pinterest in Zibster

This guide explains how to enable a Pinterest Save (Pin) button on images inside your Zibster 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 Zibster 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 small snippets of code

STEP ONE

Log into your Zibster account and click WEBSITE in the left-hand menu.

STEP TWO

At the top center of the Website Builder, click DESIGN.

STEP THREE

Click EDIT DESIGN SETTINGS to open 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.

Add Code to the HEAD Section

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>

Add Code to the BODY Section

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 only appears on blog post images using the Stack or Stack Mini image layouts.
The Save button does not appear on other images across your website, including standard pages or other Website Builder blocks.
No Pinterest account connection is required on your Zibster account for this feature to work.

Troubleshooting or FAQs

If the Save button does not appear:

Confirm the blog post is published
Verify the images are using the Stack or Stack Mini layout
Double-check that the code was pasted into the correct HEAD and BODY sections
Make sure no extra characters or formatting were added when pasting the code

Previous Post Next Post

How To Add Custom CSS To The Website

April 30, 2024

Can I add custom CSS/JS code to my website?

June 25, 2024

What image size can I upload?