gatsby-plugin-pinterest
v5.1.4
Published
Gatsby plugin to add Pinterest's add-on script.
Downloads
60
Readme
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.