This post may contain affiliate links. Using them helps me at no cost to you.
How to improve monarch's pinterest sharing feature - Leo Web Services

Ever since we started using the Monarch plugin by Elegant Themes to display social sharing buttons on our sites, we’ve noticed a large increase in social media interaction. This has resulted in greater brand awareness and more traffic. But Monarch had one problem – it was allowing all images on our pages to be pinned on Pinterest.

We create Pinterest-optimized images for each of our blog posts, and pinning them has earned us a considerable amount of traffic from the platform. Allowing our visitors to pin these images themselves gives us even more exposure and traffic, but the problem is that we noticed people were pinning the wrong images.

Instead of pinning our special Pinterest image, they’d pin other images, like the stock photos or lead magnet images we place throughout our posts. All of these images appeared when someone clicked the Pinterest share button that Monarch provides. Unfortunately, Monarch doesn’t provide a way to limit these images. Even adding nopin to the images didn’t work, so I created my own solution.

If you have this problem as well, here’s the code I wrote:

<script>
(function($){
// Remove all but Pinterest images from Monarch Pinterest image share module
$(document).ready(function() { 
  var waitForMonarchPinterestElement = setInterval(function() {
    if ($('.et_social_pin_image .et_social_share').length) {
      clearInterval(waitForMonarchPinterestElement);
      $('.et_social_pin_image .et_social_share').each(function(e){
    	if ($(this).attr('href').indexOf('-PINT.') === -1) {
		  $(this).remove();	
		}
      });
    }
  }, 1000);
});

})(jQuery)
</script>

This code basically waits for Monarch to add all the images on the webpage to the Pinterest share feature and then removes all except those that have the letters “-PINT” in it. We’re lucky that we named all of our Pinterest images like that (ex: “image1-PINT.jpg”, “image2-PINT.jpg”, etc.)

If you’ve followed a naming strategy for your Pinterest images, just replace “-PINT.” in this code with whatever text you use.

How to install this code

If you’re using Monarch, you’re probably using Divi as well. In that case, you can just go to your Divi settings and go to the “Integrations” tab. There you can paste this code in the section entitled “Add code to the < body > (good for tracking codes such as google analytics)“.

If you’re not using Divi, you can use a free plugin called Ad Inserter. This plugin is useful for much more than just placing Ads on your site. Just go to the general settings and paste this code in the “Footer” tab.

Ad Inserter Footer Options

Another solution

I noticed while looking through Monarch’s code that it ignores images that have the class “avatar”.

Monarch doesn't include images with the class "avatar"

So you can go through and add the class avatar to the images you don’t want to be pinnable through Monarch.

But if you do this, be careful that your theme doesn’t place any special styling on images that are marked as avatar.

Support for the “nopin” tag

I contacted the Divi tech team, and they said they’re working on adding support for filtering images using the nopin or data-pin-nopin tag that Pinterest itself uses to tell whether an image should be pinnable. But until then, we can make the solution I listed above work for us.

If you have this issue, I hope this helps you solve it! Let me know in the comments if you have any questions.

Pin It on Pinterest