How to Add Custom Pin It Buttons to Your Blog

Reading Time: 4 minutes

How to Add Custom Pin It Buttons to Your Blog | Plus Free Downloadable Pin It Buttons

If you’ve read any of my Pinterest Guides, then you likely already know that I am a big fan of Pinterest. Pinterest is one of my favourite tools for my blog. Just a few months ago, I actually even shared a guide on how I grew my Pinterest Monthly Views by 400K in just 2 weeks – crazy, right? Pinterest is my number #1 source for traffic which is why I truly feel that Pinterest is one social outlet that you cannot and should not neglect. It could be what takes your blog from being notice by a few hundred to thousands. But, before you begin growing your Pinterest and getting re-pins, you have to first make your blog “Pinterest Friendly”.

How Do I Make My Blog Pinterest-Friendly?

Well, the first thing you need to do is add a Pin It button to your blog posts. This will not only encourage and act as a reminder for people to pin your posts, but it will make it easier for them to do so. Whenever you’re asking your audience to do something, you want to ensure you’ve made it as easy as possible for them to do so. The fact is, if it’s hard to pin your content, then your readers won’t pin it. Make it simple!

Why Should I Have a Custom Pin It Button?

Now, you could just add the basic “Pin It” button that is provided by Pinterest, but there’s nothing unique or customized looking about it. Personally, I love at every detail of my blog as a branding opportunity. I want everything to have a flow and a specific look to it so that when people see aspects of my website they instantly can recognize that it is uniquely mine. A custom Pin It button will do just that for your website.

Step 1: Download jQuery Pin It Button for Images Plugin

To add a custom Pin It button, you’re going to have to add the jQuery Pin It Button for Images Plugin to your blog. Simply go to your Plugins and search for jQuery Pin It Button for Images and click “install now”.

Step 2: Configure jQuery Pin It Button for Images Setting

Next, you’ll need to go to Settings > jQuery Pin It Button for Images. Here you’ll configure your settings for your custom Pin It button.

Here are my settings currently:

*NOTE: There are a number of settings. These are the ones I have configured specifically. You may need to change these to suit your Pin It Button. On the Selection Tab:

On the selection tab I have set the Pin It button to show on images that are 300×300 pixels or more. I have also added in some coding to specify where the pin it buttons should show up on, here is the code: [single], [page], [home] On the Visual Tab:

On the Visual Tab, I’ve gone through and made a few more specifications as to what the Pin It button should grab as the caption when it is pinned. I have set the transparency to “0” as I do not want my pin it button to be transparent at all.

I also chose to align the Pin It button to the top left. But, you can choose any position you think would be suit your blog and button.

Step 3: Upload Custom Pin It Button

The “Pin Image” section in the Visual Tab is where you will add your custom Pin It Button. You will click “Custom” and then “Upload an image using media library”. The height / width should auto populate with the height / width of the image, but if you need to make it smaller then you can do so here – but be sure to keep the ratio correct as it will skew the image if not. *I do not recommend you resize to make your button larger as this will make it blurry.