In Novashare, you can enable Pinterest pins that appear when hovering over an image in your content. This enables your visitors to easily pin an image from your site to Pinterest.
This feature is done entirely with inline CSS on the front-end with no additional JavaScript (and no jQuery). You can see this in action on the Novashare demo. We also have more styles coming for the Pinterest hover pin.
How to enable image pins
Follow the steps below to enable Pinterest image pins.
Step 1
Click into the Novashare plugin settings.
Step 2
Under the “Options” tab, click on the “Pinterest” sub-navigation menu.
Step 3
Scroll down to the “Image Pins” section and toggle on the “Enable Image Pins” option.
Step 4
Scroll down and click “Save Changes.”
You will also want to choose the post types where you want to display the Pinterest image hover pins.
Choose post types
Follow the steps below to choose which post types where you want to display the Pinterest image pin buttons.
Step 1
Click into the Novashare plugin settings.
Step 2
Under the “Options” tab, click on the “Pinterest” sub-navigation menu.
Step 3
Scroll down to the “Image Pins” section. Under “Post Types” select which post types you want to display the Pinterest image hover pins. On most sites, you will probably select posts.
Step 4
Scroll down and click “Save Changes.”
Button position
There are 5 different button positions you can choose between for your Pinterest image pin buttons. Follow the steps below to change the button position.
Step 1
Click into the Novashare plugin settings.
Step 2
Under the “Options” tab, click on the “Pinterest” sub-navigation menu.
Step 3
Scroll down to the “Image Pins” section. Under “Button Position” choose where on the image to display Pinterest image pin buttons:
- Top left (This is the default)
- Top right
- Bottom left
- Bottom right
- Center
Step 4
Scroll down and click “Save Changes.”
Button shape
You can choose between three different shapes for your Pinterest image pin buttons. Follow the steps below to change the shape.
Step 1
Click into the Novashare plugin settings.
Step 2
Under the “Options” tab, click on the “Pinterest” sub-navigation menu.
Step 3
Scroll down to the “Image Pins” section. Under “Button Shape” choose between Squared, Rounded, and Circular. Note: The default is Squared.
Step 4
Scroll down and click “Save Changes.”
Hide button labels
Some prefer clean and simple Pinterest image pin buttons. Follow the steps below to hide the labels.
Step 1
Click into the Novashare plugin settings.
Step 2
Under the “Options” tab, click on the “Pinterest” sub-navigation menu.
Step 3
Scroll down to the “Image Pins” section. Toggle on “Hide Button Labels.” Note: The default is disabled.
Step 4
Scroll down and click “Save Changes.”
Excluded images
If needed, you can exclude specific images from getting pins applied. Exclude an image by adding the source URL (example.png) or by adding any unique portion of its attribute string (class="example"). The format is one per line.
You can also use the novashare_pinterest_image_excluded_attributes filter if needed.
Customize pin title and pin description
You can customize the pin title and pin description that is sent to Pinterest when someone pins an image. If you are using the WordPress Block Editor, click on an image and you will see the Novashare “Pin Title” and “Pin Description” fields on the right-hand side.
The above fields are also available in the Classic Editor.
Important notes
Pinterest does not yet support passing both a title and description from a pin. We’ve added both fields in advance in case you want to save time later, but currently, only the title will be sent to Pinterest.
If you have Schema or open graph data set by Yoast, Recipe plugin, etc., Pinterest might prioritize that data instead. The problem is, Pinterest doesn’t have its own open graph tags. This means if you set something in Yoast, that will most likely take priority. You can override this by using using the Social Media Title and Social Media Description.
Once a card hits Pinterest or is scraped by its validator, that pin’s description and title will remain the same.
Add a pin repin ID
The pin repin ID can help increase your share counts by associating existing saved pins from your website on Pinterest. To find a pin’s ID, simply click into an already existing pin on Pinterest. In your browser’s address bar you will see the pin’s ID.
If you are using the WordPress Block Editor, click on the image you want to associate with an existing pin. On the right-hand side, paste the pin’s ID.
The above field is also available in the Classic Editor.
Disable pinning
Disabling pinning prevents the image from being shown in the Pinterest multi-select tool (for example, with the Chrome extension). It also prevents the Pinterest hover button from showing on an image.
If you are using the WordPress Block Editor, click on the image you want to disable pinning. On the right-hand side, toggle on the “Disable Pinning” option.
The above option is also available in the Classic Editor.
How to enable image pins on WooCommerce products
WooCommerce gallery images are coded in a way that requires the following filter if you want to enable Pinterest image hover pins. If you need an easy way to add a filter to your WordPress site, we recommend the free Code Snippets plugin.
add_filter('woocommerce_single_product_image_thumbnail_html', 'novashare_add_pinterest_images');How to pin hidden image
Sometimes you’ll have images explicitly optimized for Pinterest (different size, ratio, etc.). On every individual image in the Block Editor, there is a “Pin Image” section. Here you can upload a hidden image to the WordPress media library that is pinned to Pinterest instead of the one in the post.
- If you are using the “Share Post Image” feature, the hidden image would only be used if you clicked the Pin button on the image that has the hidden alternate.
- If you are using the “Show All Pinnable Images” feature, the hidden image will also show in the popup of all the images available.
- In both scenarios, we do add a tiny bit of JavaScript for performance reasons to delay the hidden image until it’s visibly needed. Think of it like lazy loading for your hidden images.