Adding a pin button to your images in WordPress

I don’t get a lot of traffic from my Pinterest account and that got me to thinking. Perhaps my tiny social buttons at the end and beginning of my posts are not working hard enough. Perhaps I should add a whopping great big pin button to my images.

I am an avid pinner, and yup, I’ve got a plugin for chrome that makes it easier for me to pin. But what about other users? I’m convinced that they don’t have a helper and find it a chore to pin. Either way if its easier to pin, then its better.

It’s a simple theory. Big button = more pins. If you make it easier to pin your images then they should get more pins—right.

Well, time to put it to the test.

Finding the right WordPress plugin

WordPress is my CMS of choice. If you are using any other cms blog platform you should stop reading now—sorry.

I didn’t want anything to fancy, just a simple big ass button over the majority of my images. And perhaps the ability to add my own custom design pin image. Yes, I know you’re not supposed to change those social buttons, but it’s my blog—I’ll do what I want.

Custom pin button—done

After a while searching google I found what I was after. It was a plugin called jQuery Pin It Button for images. It took less than 30 seconds to install, and probably about 2 mins to configure and get it running on my website. Take a look at jQuery Pin It Button over at the WordPress repository.

Yeah, it’s working! Time for a cup of tea and a biscuit.

Not quite.

Making your own custom pin button

Now that I had the pin button up and running I wanted to change it. Typical designer always changing things.

I wanted the colour to be more in line with my branding colour scheme.

So I fired up illustrator and auto traced the regular pin button that I found on google.

Then, for an extra effect, I added the “Pin it” wording underneath the main badge. Now nobody would be in doubt what this button was for—winning!

How my new custom pin button looks on my wordpress website

How my new custom pin button looks on my wordpress website

Exporting your image

As you can see from the image below I created two colour variations.

My custom pin design you can see it everywhere on my site

My custom pin design, you can see it everywhere on my site

I exported my images as .png at 73 x 52 pixels but I think any size within reason is fine.

I tested both icons and the blue version just looked better over images, so that’s the version I used.

If you don’t have the time to create your own custom button feel free to download and use mine.

Uploading the custom icon

Once you have your icon it’s very easy to change via jQuery Pin It Button settings page.

jQuery Pin It Button how to upload you custom icon. Very easy to do.

jQuery Pin It Button how to upload you custom icon. Very easy to do.

  1. Click on settings in WordPress admin
  2. Click on jQuery Pin It Button For Images Lite
  3. From the settings in the main window click on the tab “Visual”
  4. Scroll down to “Pin Image” section and select “Custom”
  5. Click the upload an image using media library and upload your new icon
  6. Scroll to the bottom of the setting and click the save changes button

That’s it, I’m loving my new pin button and I’m as happy as Larry.

No Comments

Leave a Comment: