Adding a Pinterest "Pin It" button to your WordPress Images

MarketingSalesFacebookInbound MarketingPerspectivesNews

Enter your name and email below to receive all our valuable blog posts straight to your inbox.

What’s the Pin It button?

The Pin It button makes it easier to pin content from your blog to Pinterest, such as your blog posts images, recipes from your food blog or photos from you travel website.

There are many ways to add the Pinterest “Pin It” function to your site. You can add the “Pin It” button manually or through a wide variety of plugins. When using these widgets users are prompted to either post your featured image or shown every image on your site. This isn’t an attractive way to experience a site nor is it strategic. I prefer to prompt visitors with a Pinterest Pin It button when someone hovers over an image with their mouse. This allows the visitor to pin the specific image they’re looking at.

In this example we are using a PAID plugin – “Pinterest Auto Pin For WordPress” it’s only $5.

Out of all the Pinterest Plugins we’ve used we like this high quality plugin the best. Added bonus: the button doesn’t obstruct user from seeing your images.

Necessary Steps – WordPress Setup:

  1. Download
  2. Unzip
  3. Install
  4. Activate Plugin
  5. Go to Settings > Pinterest Auto Pin Settings and Enable Auto Pin
  6. Add “size-full” to the Image Class field > save and check one of your blog posts

To make the “Pin It” button appear on your images you’ll need to enter the HTML class name of the images you want to apply AutoPin to. By default AutoPin will look for images with the class name “wpautopin”. Since it’s not a good idea to go back and add “wpautopin” to all of your old posts take a class name that all images on your website already use like “size-full.”
Pinterest Plug-in Customization
Using size-full will add the “Pin It” button to all images (note – you have to enter full-size images into your blog post and inserting full-size images that are optimized for your site is always recommended)

Depending on the look you’re going for you might not like the default settings of the plugin. We didn’t like how it completely covered our images so we made a few minor changes to the code.
Best Pin-It Button for WordPress
If you like how the default setup looks this is where you stop, if not, let’s continue.

CAUTION – This is a bit more advanced. If you’re stuck please contact us.

Customization Steps:

    1. Open the code of the plugin in a code editor > (we here at Uhuru are primarily Mac users and our preferred code editor is Coda) open the file bootstrap.php under the inc folder and delete the background url under “Header Calls.” This will get rid of the diagonal red shapes in front of the image.

Plugin-Header-Calls2. The rest of the steps are in the file autopin.js. Here we adjust the position of the button, opacity and make the button compatible with mobile. The final result will look like the image below.

Pinterest-Pin-It-For-Wordpress
If you like how this looks then just copy and paste the code below. Delete the code in autopin.js and replace it with this code.


(function(d){d.fn.autoPin=function(b){var e={img_class:"wpautopin",page_url:"http://tyler.tc/",alt_tags:!1,dev_mode:!1,load_api:!0};b=d.extend(e,b);!0==e.load_api&&(b=function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="https:"==window.location.protocol?"https://assets.pinterest.com/js/pinit.js":"http://assets.pinterest.com/js/pinit.js";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(a,c)},window.PinIt=window.PinIt||{loaded:!1},window.PinIt.loaded||(window.PinIt.loaded=!0,window.attachEvent?window.attachEvent("onload",b):window.addEventListener("load",b,!1)));b="img."+e.img_class;!0==e.dev_mode&&console.log("Pin Class: "+b);d(b).each(function(){var a=d(this);a.attr("src");var c="";a.hasClass("alignleft")?(c=" tcleft",a.removeClass("alignleft")):a.hasClass("alignright")?(c=" tcright",a.removeClass("alignright")):a.hasClass("aligncenter")&&(c=" tcmiddle",a.removeClass("aligncenter"));a.parent().is("a")&&a.unwrap();a.wrap('
');var c=this.height,b=this.width;a.attr("height")&&(c=a.attr("100%"));a.attr("width")&&(b=a.attr("100%"));var g=encodeURI(a.attr("src")),f=encodeURI(a.attr("alt")),h=encodeURI(e.page_url),j=(c-20)/2,k=(b-43)/2;!1==e.alt_tags&&(f="");(""==c||"0"==c||""==b||"0"==b)&&console.log("AUTOPIN ERROR - You do not have a width / height set for this image.");a.parent().css({width:b+"px",height:c+"px"});a.parent().append('
');d(".autopin-wrapper img").mouseenter(function(){d(this).parent().children("span").css({display:"block"});d(this).stop().animate({opacity:"0.9"},300,null,function(){d(this).parent().children("span").css({"z-index":"999"})})});d(".autopin-wrapper span").mouseleave(function(){d(this).css("z-index","1");d(this).stop().parent().children("img").animate({opacity:"1"},300);d(this).css("display","none")})});return!0}})(jQuery);

Things to Note

In WordPress, when you add a general pin it button with Digg Digg or other options it only pulls the featured image from your post, it doesn’t open all of the post/page images.

Also, the “Pin It” button will use the HTML “alt” text in your images to automatically generate the Pinterst description for the desired image.

There are many ways to customized and alter the pin it button – we recommend this method because we are currently utilizing this method. If our method changes or we find something that we like more or works better we’ll do another blog post on it.

Are you using Pinterest to drive traffic to your blog?

Leave a Reply

Your email address will not be published. Required fields are marked *

How to Start a Subscription Box in 10 Actionable Steps

We’ve distilled the step-by-step process of how to start a subscription box into this guide. It’s the perfect resource to get your started on the path to a successful business in this booming industry.

Categories: Marketing Read Article

The Number One Issue in Reading Facebook Reports

The key is knowing how to track these actions effectively and avoid reading the data incorrectly. It’s a problem we see far too often, and it can lead advertisers to make some very bad decisions and see some seriously poor results.

Categories: Facebook, Marketing Read Article

Social Media and Tourism Marketing: A Match Made in Digital Heaven

How can you harness the natural urge to share about all things travel and use it to boost your bottom line? That’s exactly what we’re here to talk about today, so stay tuned and we’ll make a social media marketing expert out of you yet!

Categories: Marketing, Travel/Destination Read Article