Howdy, y’all. Let’s talk about custom pin it buttons for Pinterest. So exciting, right?
If you have a blog or website and you’re trying to create a cohesive, on-brand look for it, you need some pin-it buttons! That is, unless you don’t plan to use Pinterest as part of your marketing strat. But if that’s the case, what are you doing here?!!
Let’s jump into the tutorial. We’re going to make custom buttons that show up when someone hovers over a pinnable image on your site. Then, I’m going to show you how to add them to your WordPress site. If your site is Squarespace or Wix or ShowIt or anything other than WordPress, you won’t be able to follow the second part of the tutorial, but I can still show you how to design these little guys.
You will need:
- Illustrator, Photoshop, or InDesign. You can use Canva for Work, but you won’t be able to use free Canva because you need an image with a transparent background and you can’t save images that way in free Canva, sadly. Booooo.
- Your brand fonts + colors. You could also go with a simple black and white design and have something totally custom. Up to you!
- WordPress + the plugin called “jQuery Pin It Button For Images”. You need to install this plugin to add your custom pin it buttons and set up when and where they will appear on your site.
Here’s what my custom “Pin It” button looks like:
Step 1 | Decide on a basic shape and a color scheme for your “Pin It” buttons
You can do whatever you want, of course, but I see lots of squares, circles, and pushpin shapes for these buttons. You can keep the colors simple and use black and white or you can pull out a color or two from your brand palette to match these buttons to your brand.
Step 2 | Design your button in your program of choice
You can create your button in any size – I’d recommend 250 x 250px or 500 x 500px. You’ll be able to scale the image down using the WordPress plugin later if it’s too big. The button on my website is scaled down to 100 x 100px, but I originally created the graphic as 500 x 500.
Step 3 | Save your button as a transparent PNG
Step 4 | Install the “jQuery Pin It Button for Images” plugin
It’s free and works super well. If you don’t know how to install a plugin, here’s a little walkthrough.
First, click on “Plugins” from your WordPress dashboard.
Next, select the “Add New” button at the top of the page.
Finally, search for “jQuery Pin It Button for Images” and you’ll see this plugin pop up. Install and activate it – you’re good to go!
Step 5 | Upload your button to the plugin and configure the settings
Mouseover “Settings” from your WordPress dashboard and you’ll see the plugin name within the options. Click on that to get started.
The first page of the settings is all about telling the plugin where your custom pin it button should show up and where it shouldn’t. You might not want a “Pin me!” button popping up on your homepage or your portfolio, for example, but maybe you do. Enter your changes and save the settings.
Next, click on the “Visual” tab to modify what your button looks like. Near the “Pin image” subheading, select “Custom” and upload your button. I’ve chosen to have my button pop up when the user hovers over the image and I’ve set my button at 100 x 100 px.
The preview of your button will look pretty silly at this point – it won’t actually show up like that on your site. Unsure why their preview feature is so unhelpful! If you’d like to mess with the transparency of your pin it button, you can do that in this tab, too. I’ve left mine mostly fully opaque.
Now, select where you’d like your button to appear on your pinnable images and set your margin. I set my margins to 20px all around, which looks good on my pins. Most of my pins are 600 x 900, but if yours are bigger you may want to set wider margins. Save your settings and head to one of your blog posts to see you new pin it buttons in action!
Note: When you’re editing a post in WordPress, you’ll see an option in the sidebar that will disable your pin it buttons for images on that specific post. This comes in handy at times!
Step 6 | Continue working with the settings until your custom pin it buttons look right
The preview inside of the plugin doesn’t work well for me, so I went back and forth from the settings to a blog post page until my button looked right. Don’t forget to take a look at your pin it buttons on mobile if you can! You definitely want to make sure they’re not overwhelmingly large or small on a smaller screen as well as a desktop. It’s a little bit of work, but after going back and forth a few times you should have some great-looking custom pin it buttons on your site. Enjoy!
Want to download the pin it buttons I made for this tutorial? Be my guest!
Here’s what they look like, by the way.
If you liked this tutorial, I’d love it if you pinned it or shared it with someone who might find it helpful! Thanks for reading. 🙂