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: