DESIGN

Using universal page templates to build sites faster: Join us next Tuesday

ContactSign Up for Free
Community Plugin
View plugin on GitHub

gatsby-plugin-pinterest

Gatsby plugin to add Pinterest's add-on script. 📍


version downloads MIT License PRs Welcome Code of Conduct

Table of Contents

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project’s dependencies:

npm install gatsby-plugin-pinterest

or

yarn add gatsby-plugin-pinterest

This library has a peerDependencies listing for gatsby.

Usage

Use the options to configure the script with available attributes.

Note: not all attributes are supported in the plugin yet. See issues for more details.

Show Save Button on hover

// In your gatsby-config.js

module.exports = {
  // Find the 'plugins' array
  plugins: [
    {
      resolve: `gatsby-plugin-pinterest`,
      options: {
        // If you just want to use the default, you can set this to `true`, defaults to `false`
        // This sets the data-pin-hover attribute in the script
        saveButton: {
          // Set to true to hide the text and display only a round P button
          round: false, // default
          // Set to true to display a bigger button
          tall: true, // default
        },
      },
    },

    // Other plugins here...
  ],
};

Manually show Save Button

// In your gatsby-config.js

module.exports = {
  // Find the 'plugins' array
  plugins: [
    {
      resolve: `gatsby-plugin-pinterest`,
    },
    // Other plugins here...
  ],
};

Then in your code:

const pinType = "buttonPin"; // for one image or "buttonBookmark" for any image

// Optional parameters
// Source settings. See: https://developers.pinterest.com/docs/widgets/save/?#button-style-settings
const url = "https://mysite.com/sourdough-dinner-rolls";
const description = `&description="this is my favorite recipe for sourdough dinner rolls"`;
const mediaUrl = pinType === "buttonPin" ? `&media=https://mysite.com/images/dinner-rolls.png` : ""; // don't supply the mediaUrl for buttonBookmark

const to = `https://www.pinterest.com/pin/create/button/?url=${url}${description}${mediaUrl}`;

// Add this to your component where you want the button to appear
return <a href={to} target="_blank" rel="noreferrer" data-pin-do={pinType} />;

Manually add source settings like url, description, and mediaUrl since gatsby-image doesn’t support custom image attributes.

Inspiration

Just like gatsby-plugin-twitter and gatsby-plugin-instagram-embed are doing for the Twitter and Instagram embed scripts, this plugin adds the Pinterest embed script to your gatsby site.

© 2023 Gatsby, Inc.