Because I ♥ Pinterest and I know it’s not just me. When I need something, it does not matter that there are clothes, tutorials, home decoration, gifts, design inspiration or cakes, I always use Pinterest. No offense Google, But the heart wants what it wants… And as a blogger, you want your content pinned as much as possible. Don’t waste any time, add a catchy pin it button to your images so your readers will be tempted to add your images to their collection of pins. The images will have a link back to your site.
I’m going to show you a few simple steps to add a custom Pin It button to your WordPress theme ! As a bonus, I’ve even included a bundle of free custom Pin It icons at the bottom of this post to help you stand out from the crowd and look like a Pinterest pro!
1.Install the jQuery Pin It Button For Images Plugin
Within the WordPress admin, go to Plugins > Add New and search for jQuery Pin It Button For Images. Install and activate the first plugin that comes up.
2.Configure the Settings
Once the plugin is installed & activated, the settings can be accessed in the WordPress admin by going to Settings > jQuery Pin It Button For Images. There are a lot of different settings here, so I won’t be going over all of them. However I’ll point out a few important settings.
☛ Selection settings
When you install this plugin you have to understand that the pin it button will show over the all images on your site. And I’m pretty sure you don’t want the pin it button on small images like avatars, social media icons , logo, signature or decorative images. I also don’t want a pin it button on my homepage, contact page, about page. I like a pin it button only on the images on my posts.This is the content I want to share on Pinterest.
Don’t worry, the plugin has it all figured out. Use the following setting to prevent the pin it button from displaying on images you don’t want.
Minimum image resolution
Minimum image resolution is a set of constraints that allows:
- to set different size for small devices because on smaller devices images will be, inevitably, smaller.
- to disable smaller images from showing the “Pin it” button. The larger the size you enter, the more you will limit the number of images that will have the pin it button .
On which pages the “Pin it” button should be shown
This setting controls specific pages that the pin it button will be activated. I personally think “Single Posts” is enough for this option. Having the Pin It button on the home page, it can be a bit distracting . Also, on blog, search and archiving pages, it seems to me a bit overloaded. Of course, you can choose to set these settings however you like.
☛ Visual settings
Now the visual settings, how your pin it button will show and feel. Click on the tab labeled Visual at the top of the page to access the second page of settings.
Transparency value is responsible for the hover effect over the image. Set it to 0 to disable the grey overlay when user hovers over the image.
Ok, time for the good stuff! Here’s where you can upload my custom pin it button. Check the box Custom, under Mode. Upload your image using the button “Upload an image using media library” . The image size will automatically set to the size of the uploaded image size, but you can manually change it here.
“Pin it” button position & “Pin it” button margins
Control the positioning of your pin it button. This will depend entirely on your personal taste preferences and the style of your blog.Play around with the button size, position and margins until you are fully satisfied with the result.
That’s it! Save your changes, and check out your fancy new Pinterest button on your site. It’s remarkable how much better a custom pin it button looks than the standard Pinterest button, and hopefully, you see your images getting pinned more and more frequently.
I’ve even included a selection of custom pin it buttons (for personal use only please) that you can download below!
Use Documentation and Support sections for more information.
♥ THIS POST ? SHARE IT WITH YOUR FOLLOWERS →