gatsby-plugin-pinterest
Gatsby plugin to add Pinterest's add-on script. 📍
!versionversion-badgepackage !downloadsdownloads-badgenpmtrends !MIT Licenselicense-badgelicense !PRs Welcomeprs-badgeprs !Code of Conductcoc-badgecoc
Table of Contents
- Show Save Button on hover - Manually show Save Button
Installation
This module is distributed via npmnpm which is bundled with nodenode and should be installed as one of your project'sdependencies
:npm install gatsby-plugin-pinterest
or
yarn add gatsby-plugin-pinterest
This library has a
peerDependencies
listing for gatsby
gatsby.Usage
Use theoptions
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 likegatsby-plugin-twitter
gatsby-plugin-twitter and
gatsby-plugin-instagram-embed
gatsby-plugin-instagram-embed are doing for
the Twittertwitter and Instagraminstagram embed scripts, this plugin
adds the Pinterestpinterest embed script to your gatsby
gatsby site.