There’s so much to know about Pinterest in terms of pinning strategy, how to write the best descriptions, and more. But what about how to get people to pin your content directly from your blog? The trick is in making it easy for them to pin!
In this post, I’m going to show you how to add a custom “Pin It” button to your blog images in effort to get your content pinned more often. These buttons appear when a reader hovers their mouse cursor over your images. It’s a fantastic way to add a little something extra to your website – further expanding your brand.
At the end of this post, I’ve even included some free buttons I made just for you, so look out for those!
Step 1: Install the Plugin
Within your WordPress dashboard, go to Plugins >> Add New, then search for a plugin called jQuery Pin It Button For Images. Once you’ve found it, click Install, then activate.
Step 2: Configure the Settings
Once you’ve installed the plugin and activated it, you need to configure the settings by going to Settings >> jQuery Pin It Button For Images where you’ll find quite a bit that you can configure. I’m not going to cover all of them, because most of it doesn’t need to be changed. Instead, I’m going to focus on the ones I change and why.
The first settings page you’ll come to is called Selection, and you can leave most of the settings to their default except for two that I find very important: Which pages the pin it buttons show up on, and the Minimum resolution that should trigger a pin it button.
Which pages the pin it buttons show up on
This settings allows you to control what pages you want your pin it buttons to be active on. It’s important to not overwhelm the audience with a bunch of unnecessary buttons, so I focus on keeping the pin it buttons active only on “Pages” and “Single Posts”.
There’s lots of options, so choose what works best for your needs and your WordPress theme:
- [front] – front page
- [single] – single posts
- [page] – single pages
- [archive] – archive pages
- [search] – search pages
- [category] – category pages
- [tag] – tag pages
- [home] – blog page
- [post_type] where post_type is one of the following: post, page, attachment.
Minimum resolution that should trigger a pin it button
I use this setting to prevent my pin it button from displaying on all of the smaller images on my website that I wouldn’t really want people pinning. Plus it just looks really messy to have the button popping up on every image.
I know what size my Pin images are, so I set mine so that the “Pin it” button will only show up if the image is at least 700 pixels wide and 1050 pixels tall (on regular screens) and 200 pixels wide by 300 pixels tall on mobile. This prevents any images I may be using that aren’t a 2:30 ratio from having the button.
Step 3: Customize the Visuals
Here’s where things get really fun! Click on the tab labeled Visual at the top of the page to access the next settings we’re going to work on – the fun, visual stuff.
In this setting, you can choose whether or not to apply a semi-opacity to your pin images when you hover over them. I like this because it can draw more attention to your Pin It button. However, if you decide to use this… don’t overdo it! I recommend a really low number like 0.1 or 0.2 because otherwise it doesn’t look as nice and subtle.
Here’s what my pin image looks like normally vs on hover:
Or, I mean… you can just scroll back on up and hover over my image. Would you pin it too please while you’re up there? I’ll wait. 😊
Custom Pin It Button
This is where the real magic happens! The default settings show you that you can use the default button that comes with the plugin, or you can upload a custom button of your own (I’ve included 4 free buttons for you to download below). All you need to do is to ticker Custom, and select to Upload an image using media library.
Keep in mind that whatever size your custom image is, is what size it’ll show up as automatically. You can manually change it in this section of the settings. I recommend setting the width and/or height to 75px.
Hey… enter your name and email, and I’ll send you those free buttons for you to use + weekly emails all about blogging.
Button Position and Margins
These settings control the positioning of your pin it button. This is purely based on personal taste and the style of your blog and you have the follow positioning choices:
The margin numbers control where your button is set within the positioning choice you made. This is also a personal preference thing. It defaults to 20px Top/Bottom/Left/Right and you can increase the number if you feel like this isn’t enough space between the edge of your pin image and your button.
Don’t forget to save your changes and then check out how it all looks on your website! A custom button looks so much nicer than the standard Pinterest button and it really stands out so you’ll get your images pinned more frequently.