50+ Free Custom Pin It Buttons For Your Website

Dana NicoleSocial MediaLeave a Comment

image with text over: 50+ free custom pin it buttons
Last updated on July 8th, 2020
Learn how to brand on a budget (DIY style)!
LEARN MORE!

Custom Pin It or Pin This buttons are a great way to add a personal touch to your website or blog.

A dog with a "Pin This" icon in the shape of a bone
An example of a custom Pin This button

Like many small businesses, I use Pinterest as a way to drive targeted traffic back to my website. A solid Pinterest marketing strategy will help you land more clients, get more customers, grow your email list and so much more!

Pin It buttons are the perfect way to encourage people to pin images from your website while staying on brand.

image with text overlay: how to make custom pin it buttons for your blog

Because let’s be honest, the red Pin It button probably doesn’t match your color palette and you want to stay on brand.

In this post I’m going to walk you through step by step on how you can add your very own custom Pin It buttons to your WordPress website.

I’ve also created 50+ free downloadable Pin It buttons for you to choose from, which you can find at the end of this post!

Benefits of Having A Custom Pin It Button

A custom Pin It button is a great way to strengthen your website’s brand, stand out and encourage visitors to pin images from your site.

Plus, when you design your own Pin It button, you can be confident that nobody else will have the same design.

How to Make Your Pin It Buttons

It’s easy to make your own Pinterest Pin It button for images on your website.

First, head to Canva and click “Create a Design”. From there, you’ll be able to set custom dimensions for your Pin It buttons.

I recommend something like 500px by 250px if you want a rectangular Pin It button, or 500px by 500px if you want it square or circle.

Screenshot of Canva's custom dimension
Set your custom dimensions within Canva

Now you will have a blank canvas that you can use to design your own Pinterest share button!

Text that says "Pin It" with a pink heart

After you’ve created your Pin It button, download it so you can upload it to your website.

How to Add Your Custom Pin It Button to Your Website

Adding your own custom Pin It button is incredibly easy if you are using WordPress.

1. Download the jQuery Pin It Button for Images plug in

This is a free plug in and works great with your website. If you already have a plug in that allow you to upload your own custom Pin It buttons, skip to the bottom of this blog post so you can download your custom button.

2. Go to Settings > jQuery Pin It Button

Along the lefthand side of your dashboard, go to “Settings” and then click on “jQuery Pin It Button for Images Lite”

Screenshot of settings in WordPress with the jQuery Pin It button highlighted

Now you’ll be in the right spot to upload your custom Pin It button and customize where you’d like it to show.

To do that, head into the “Visuals” tab along the top:

Screenshot of the jQuery Pin It button interface
Click on the “Visual” tab

3. Upload Your Custom Pin It Image

Once in the visual tab, scroll to the section titled Pin Image and select custom.

Upload your Pin It image.

screenshot of jQuery's PIn It button uploader
Upload your custom Pin It button here

In this space you can also adjust the height and width of your Pin It button. If you notice the button is too large, come to this place to change the dimensions.

4. Choose Where Your Custom Pin It Image Should Show

After you’ve uploaded your custom Pin It button, you can take it one step further and choose precisely where you’d like your Pin It button to show on your website.

You have three choices:

  1. Show on hover
  2. Show always on touch devices
  3. Show always no matter the device
Screenshot of jQuery Pin It plugin interface
Choose where you’d like your Pin It button to show

Most website prefer the option “on hover” as it doesn’t obstruct the image.

5. Adjust Transparency of Pin It Image

You can adjust whether or not your Pin It button is transparent. Personally, I think 0.2 is perfect, but play around and see which suits your brand.

Screenshot of jQuery Pin It button interface
Adjust your Pin It button’s transparency

6. Choose Your Pin It Image Location

You have the choice to place your image in the top left, top right, bottom left, bottom right or middle of your image.

Screenshot of jQuery Pinterest Pin It interface

I prefer the button to be in the center or the top left, but it’s totally up to you where you place your custom button.

7. Disable Custom Pin It Button on Certain Pages

Next, head into the “Selection” tab to fine-tune where your Pin It button should be displayed.

Screenshot of jQuery Pin It button plugin interface

You might want the button to display on all pages and if so, you can leave this as it. However, if you want to disable the button on certain pages, you can do so here!

You can choose to enable or disable through page ID’s or the list of page names provided by the jQuery plug in.

8. Troubleshooting jQuery Custom Pin It Plug In

Is your Pinterest button not working through jQuery?

jQuery’s documentation will help you troubleshoot problems and figure out why your Pinterest button is not working.

Pro tip: If you are using Cloudflare, you will need to make sure you check out the above link and disable any minifying you are doing to JavaScript, as well as clear all your caches. Cloudflare and the jQuery Pin It plugin sometimes don’t work well together, but disabling the minifying will solve that problem.

Free Custom Pin It Images For Your Website

If you don’t want to create your own custom Pin It buttons, feel free to download the ones I have created. There are over 50 different Pinterest buttons for you to choose from and you can upload them straight into the above plugin!

As Seen In:

logos

The articles on this blog may include affiliate links. www.dananicoledesigns.com is a participant of Amazon.com Services LLC Associates Program. As an Amazon Associate, I earn a commission from qualifying purchase. www.dananicoledesigns.com participates in other affiliate programs, and receives commissions when purchases are made through the links. This is at no extra cost to you.