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 *

An Expert’s Guide to Creating a Highly Effective Sales Process

A documented sales process establishes a common framework and language for your team, so that everyone understands the progress and status of each opportunity in the pipeline.

Categories: Sales Read Article

10x Your Conversions: Build the Perfect Facebook Landing Page

We see too many brands spending tons of time and money promoting content, creating ads that drive clicks, and sending them to a boring, confusing, or otherwise disengaging landing page.

Categories: Marketing Read Article

How to Build a Full Inbound Conversion Funnel

It’s safe to say the vast majority of businesses would see a considerable conversion rate increase from an Inbound Marketing Funnel, but very few actually use the full strategy as a part of their marketing and sales programs.

Categories: Sales Read Article