It’s predicted that Pinterest will have 625 million users by 2024, and competition to get to the top of Pinterest search pages is growing. Yes, Pinterest is a search engine, my friend; in fact, the company describes itself as a ‘visual discovery engine’. So how do you stand out and get people to pin your pictures to get found on search pages? With a custom pin it button for Pinterest!

Pinterest is most definitely visual, which is exactly why I love it (it’s my superpower according to this quiz). So we’re talking about a key visual element for Pinterest marketing today…

Pinterest marketing and the pin it button

You’ll see the standard ‘Save’ button on just about every blog and website nowadays. It’s the little red box that comes as the standard button to pin images to Pinterest. Click on it, and you can save the image to one of your boards.

Here’s what it looks like:

Seriously, that thing just kind of blends in.

Anyway, I’m getting off topic,

When someone pins a picture to one of their boards, their followers have a good chance of seeing it and re-pinning your image. Plus, Pinterest runs its fancy algorithm to see that people like it – enough repins and you have a viral pin that picks up speed very quickly.

Pinterest also loves new content, so you want people to pin different images from your blog to their Pinterest boards.

But that little red button ain’t that catchy and it ain’t as sweet as it could be. Want to know what’s both eye-catching and sweet? A custom pin it button that pops with color and catches your readers’ attention, making them stop to pin images to their boards.

My main focus with social media marketing is Pinterest, so I love trying new things. Have you noticed that I have the usual Save button and a big custom button on most of my images?

My custom button looks like this:

Today I’ll show you how to add a custom pin it button to your WordPress site, for free. It’s quick and easy, and there might just be some tips in there for marketing yourself on Pinterest.

Ready?

Grab the free checklist

Want the free checklist for these steps to help you along? Then just sign up below to get access to the Blogging Library with worksheets and printables that will help you grow your blog with love, including how to add your custom pin it button to your site.

Checklist to add a custom pin it button

STEP 1: Get your pin it button ready

You can design your own pin it button in PicMonkey or Canva, or you can grab a gorgeous ready-made one from my store >>here<< or below. I have quite a few options in terms of design and color, all handmade by yours truly 😊 And for quite a nice price.

If you want to make your own, here are some suggestions:

  • Make the button 150 x 150 pixels
  • Use one of your brightest brand colors for your main shape. You can use a triangle, ribbon, circle, square, whatever you like
  • Write PIN IT or PIN THIS on your shape, to let people know why the button popped up and give them a call to action (so they take that action)
  • Make sure the font you use is big and bold and easy to read
  • Keep your design simple and eye-catching

You can only have one unique button at a time, so don’t go crazy designing different pictures for different pages.

STEP 2: Install and activate the jQuery plugin

Download and install the jQuery Pin It Button for Images plugin. This is a free plugin that will make it quick and easy to add your new pin it button to your WordPress site.

There are other plugins that let you add a pin it button, but none of them allow a custom button as far as I know. Not sure why.

Make sure you activate the plugin.

STEP 3: Open the plugin’s settings

Now look at the left column in your WordPress dashboard. Hover your mouse over ‘Settings’ and a list pops up. Click on ‘JQuery Pin It Button for Images Lite’.

This takes you to a page where you can upload and change the settings for your pretty pin it button.

STEP 4: Go to ‘Selection’ in the main menu

There is a main menu near the top of the page, where you’ll see this:

main menu in the jQuery plugin

Don’t worry, you only need to do a few simple things to get what you need, and you can ignore most of the options 😊

Click on ‘Selection’ in this main menu, then scroll down to ‘Minimum image resolution’.

main menu in the jQuery plugin

STEP 5: Set the minimum image resolution sizes

Here you can tell the plugin how big a picture must be on your blog to show the pin it button.

For example, you might not want the pin it button to show on small pictures in your sidebar area because that won’t work for Pinterest, but you do want the pin it buttons to show on all the photos you have in your posts. Then you will set the minimum size to the minimum size of the pictures where you want it to show, and all the smaller sidebar pictures won’t get the button.

If you show your pins in your blog posts, like I do, and you only want these pins to be pinned, then use your standard pin size for your minimum image resolution settings. For example, here is one of my pins that I have in a blog post, which we saw earlier:

All my pins are a standard size: 600 x 900 pixels. If I only want the button to show on the pictures I specifically make for pinning to Pinterest, I set my minimum image resolution to 600 x 900 and the pin it button will only show on pictures that size, which will be the pins I created.

My standard Pinterest image size

Pinterest Marketing Tip: Let people pin any of your pictures – don’t restrict them and don’t hide your pins. You never know what people will like and what could go viral. Put your logo or blog name on all images that you use on your blog, so that when these pictures do get pinned to Pinterest, readers will see your brand.

Responsive websites are sites that get bigger or smaller to fit the screen that someone is using to look at the website, making images smaller on tablets and phones. Your blog must be responsive, there’s no getting away from it if you want to be successful.

You need to keep this in mind when you make your settings. I set my small screen minimum resolution at 200 x 200 pixels, but you can check how your pin it button appears on a tablet or phone screen and change the size to what you like. Remember people must be able to read it, so don’t make it too small.

I suggest starting with my settings and check later how the pin it button looks on your site. If it shows up where you don’t want it, then adjust the minimum image sizes until you’re happy. Here are my settings and they work well for the image sizes I have on Tiara Tribe:

Minimum image sizes for the jquery plugin

STEP 6: Set where to show the button

Now you need to tell the plugin where to show and where not to show your pin it button. I have mine set to show on [single] and [page], like this:

Where to show pin it buttons

Where the button shows and gets pinned is where it will bring people back to when they click on the pins in Pinterest.

Single’ means that it will show on single posts, which is any full blog post that someone is reading. ‘Page’ means it shows on pages with posts, not my home page or search pages etc. So when someone clicks on your pin in Pinterest, it will bring them straight to the page or post they need.

There is a full list of setting options to choose from under the Disable box:

List of options under disable box in jQuery

Be sure to use square [ ] brackets and separate each option with a comma when you fill this in.

STEP 7: Disable the button where you don’t want it to show

Disable the plugin where you don’t want to show the button and where you don’t want people to land when they click on the pin. Mine is disabled on the front page, which is my homepage because I want people to go directly to a post or page, and not have to search for the article. I often click on pins and end up on the homepage and can never find the actual article I was looking for – this isn’t good and you should avoid it.

Where to disable pin it buttons

You don’t need to worry about the numbers in there. You can actually disable the plugin directly on a page or post when you publish it, so those numbers are automatically linked to pages I’ve disabled, such as my shop page.

The JQuery plugin auto-magically generates these numbers to track what’s been disabled.

STEP 8: Time to save!

Save your changes!

Save changes button at the bottom

STEP 9: Upload your pin it button and make it look pretty

Scroll back up to the main menu and click on the second tab, called ‘Visual’. This is where you will set how your pin will look on images.

Visual tab in the main menu of the jQuery plugin

Here are the first few settings I use:

First few settings in visual page

I want my custom pin it button to show when someone hovers over an image, so I know they are likely to want to pin it. I don’t leave my pin it button on ‘Always’ because it can sit there covering part of the image and becomes annoying (in my opinion).

Now for the description that will show under your pin when it shows on Pinterest, like this:

My pin showing a description for a rich pin in Pinterest on Pinterest

Pinterest Marketing Tip: You most definitely, 100% want descriptions showing under your pins. To get these, you need a Pinterest business account and then to apply for rich pins.

The description source is where you want to get the description from. I take my description source from the data pin description, image title attribute, image alt attribute and the post title. It won’t show them all at the same time, don’t worry.

It will try to use the first option you choose – mine will be the data pin description. If there’s nothing there, then it will use the next option you choose – mine is the image title attribute. And so on.

You can drag and drop the list in any order that you want, which makes it quite fancy 😊

Pinterest Marketing Tip: This is just one of the many reasons why it’s so important to optimize your images for the web and SEO. I use Tasty Pins to add a pin description for every image I have on my blog, so I can control what description is added to the images that I or anyone else pins.

Play around with the transparency, which is how faded you want the custom pin it button.

STEP 10: Upload your button

For pin image, select ‘Custom’ so you have the option to use your new custom button. Upload the pin it button via the image library, as you do with any other images you want to add to posts.

Check the preview to make sure you’re happy with it. You can manually adjust the height and width to the right of the button, if you want.

Upload and set the settings for the pin it button

If you bought a button or followed my guide when creating one, your new pin it button is probably 150 x 150 pixels, which is large enough to play around with. I like mine pretty big at 145 x 150, so you can’t miss it on my blog pictures. But you could make yours smaller.

STEP 11: Where to place the button on images

Now for the last few settings.

Settings for where to show the pin it button on your images

Decide where you want the button to show on images. I set mine to ‘Top left’ but ‘Middle’ works well too, if you don’t mind having the pin button in the center of your pictures. I see others using the top-right corner and it looks great. The decision is up to you and the types of images you use.

Now to set how much space you want between the edges of your picture and where the button shows up. Here you are telling it how far away from the edges to place the button. I kept all the margins at 20 pixels which is the fixed distance for the right margin anyway, and these margins work well for me.

Arrow to margin sizes for custom save buttons

This means there are 20 pixels of space between my pin it button and the edges, if I have it show in any of the corners. The middle will obviously be in the center of images and won’t be influenced by the margins you set. Here’s a visual to explain how the margin sizes work from the edges of your images:

margin size explanation

STEP 12: Time to save your changes

Save your changes! I often forget to do this and have to go back and redo things, so this is your friendly reminder 😊

Save changes button at the bottom

Take a look on your blog to see how the pin it button is showing up. Feel free to play around with the settings until you’re happy with them. And remember that if you publish a post or page that you don’t want the pin it button on, just tick the jQuery plugin box in the right column to disable it on that post or page:

Tick to disable plugin on a post or page

Conclusion

A custom pin it button helps you stand out and can boost your social media marketing strategy in several ways, by getting your blog’s images pinned and in front of more people.

You can create your own button, or get a pretty custom pin it button from me.

If you upload the jQuery plugin and follow the easy steps above, you’ll have a gorgeous custom save button on the images you want people to pin on Pinterest and share for you! And now you’re building your blog with love.

Want to get my weekly newsletter + access to the free Blogging Resource Library?

Love,

 

 

 

Want to save this for later or share the love with others? Then save it to your favorite Pinterest board!

How to add a custom pin it button to your blog - Blog

 

Full disclosure: There may be affiliate links above that give me commission if you click through and buy something (at no extra cost to you). It’s how I keep this blog going and share the journey with you. Thanks for your support in helping both of us build online businesses we love!


Monique is the fire behind Tiara Tribe, where she helps you build your blog with love. A full-time blogger, lifelong learner and nature & animal lover, she spends her days in online adventures and exploring the beautiful scenery in Australia, where she now lives.