gatsby-plugin-pinterest
Gatsby plugin to add Pinterest's add-on script.
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.
💡 Feature Requests
Please file an issue to suggest new features. Vote on feature requests by adding
a
✨
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