gatsby-plugin-pinterest

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


Build Status version downloads MIT License All Contributors 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.

Issues

Looking to contribute? Look for the Good First Issue label.

🐛 Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

See Bugs

💡 Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.

See Feature Requests

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Robin Métral

💻 📖 🤔

Eduardo Reveles

💻

Michaël De Boey

💻 📖 🚇 🔧

Kelley Robinson

💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT