gatsby-plugin-pinterest

gatsby-plugin-pinterest

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

---

Table of Contents

• Installation
• Usage
  • Show Save Button on hover
  • Manually show Save Button
• Inspiration

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.