Share Buttons - How to tell Pinterest to not save an image with simple JavaScript code

IN THIS ARTICLE

To exclude all images within a section with ID selector called "sidebar" with jQuery:

<script>
/* Code by Shareaholic.com */
jQuery(document).ready(function($) {
  $("#sidebar img").attr("data-pin-nopin", "true");
});
</script>

To exclude all images within a section with class selector called "sidebar" with jQuery:

<script>
/* Code by Shareaholic.com */
jQuery(document).ready(function($) {
  $(".sidebar img").attr("data-pin-nopin", "true");
});
</script>

You can also combine the two into one simple statement:

<script>
/* Code by Shareaholic.com */
jQuery(document).ready(function($) {
  $("#sidebar img, .sidebar img").attr("data-pin-nopin", "true");
});
</script>

The following would exclude all images from Pinterest:

<script>
/* Code by Shareaholic.com */
jQuery(document).ready(function($) {
  $("img").attr("data-pin-nopin", "true");
});
</script>

Including the following meta tag in the </head> section of your template would also exclude all images from Pinterest from that page:

<meta name="pinterest" content="nopin" />

How to include jQuery in your template

Most sites already have jQuery available. In-case yours doesn't and you need to include jQuery, include the following in the </head> section of your template before you add any of the snippets detailed above. It is critical that jQuery is included before you try to use jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

You can grab the latest version of jQuery here: https://developers.google.com/speed/libraries/#jquery

Whitelist select images

You can whitelist just the images that you would like shared:

<img src="https://blog.com/whitelist-image1.jpg" class="sharethisimg">
<img src="https://blog.com/some-other-image.jpg">
<img src="https://blog.com/whitelist-image2.jpg" class="sharethisimg bar">
<script>
jQuery(document).ready(function($) {
 $("img").attr("data-pin-nopin", "true");  // blacklists all images
 $(".sharethisimg").removeAttr("data-pin-nopin", "true");  // whitelists all images with "sharethisimg" class
});
</script>

Instafeed.js

If you're using Instafeed.js on your website and would like to exclude all images surfaced by this widget, you need to add the data-pin-no-pin attribute to the template variable:

<script>
var feed = new Instafeed({
  get: 'tagged',
  tagName: 'awesome',
  clientId: 'YOUR_CLIENT_ID',
  template: '<a href="{{link}}"><img src="{{image}}" data-pin-nopin="true"></a>'
});
feed.run();
</script>

Instagram Feed Plugin for WordPress

If you're using Instagram Feed plugin on your WordPress website and would like to exclude all images surfaced by this widget, add the following in the Custom JavaScript section of the Instagram Feed Plugin Admin settings:

$("#sbi_images img").attr("data-pin-nopin", "true");

For Example:

Instagram-Feed-Plugin-Pinterest.png

Was this article helpful?
3 out of 4 found this helpful