Nickelback Plays Music

    gatsby-plugin-pinterest

    5.0.2 • Public • Published

    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.

    Install

    npm i gatsby-plugin-pinterest

    DownloadsWeekly Downloads

    419

    Version

    5.0.2

    License

    MIT

    Unpacked Size

    14 kB

    Total Files

    13

    Last publish

    Collaborators

    • lekoarts
    • moonmeister
    • robinmetral