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

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.”

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.

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.

2. 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.

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?