It’s no secret that Pinterest is one of the top social networks and is incredibly important to bloggers. One of the best ways to get people to pin your content, in addition to having attractive images, is to have a Pin It button appear when they hover of your images.
When I first started blogging, I looked high and low for an attractive Pin It button for my website, but I came up dry. They ranged from “really bad” to “…fine,” and I didn’t want to sacrifice the attractiveness of my site for a stupid button. There has to be a better way… right?
Turns out there is!
How to Create Your Own Pin It Button
1. Create (or find) a pin it button you’d like to use.
First things first, you need to get a graphic you’d like to use. I personally use a simple black circle with the words PIN IT in my main font. (To see it, just hover over the header image on this post! I chose black because it will look good over any of my images, no matter what color they are.
You’ll want to create or find a pin it button that works with your branding and looks good on top of your images. If you don’t feel comfortable making your own, I’ve got some for you to use for free!
2. Install the jQuery Pin It Button for Images Plugin for WordPress.
Next, install the jQuery Pin It Button for Images plugin. You’ll also want to make sure you’ve uninstalled any other plugins you may have tried for pin it buttons.
Once you’ve got it installed and activated, go to the plugin’s settings and click on the Visuals tab at the top of the page.
Note: a notice will appear at the top of the page that jQuery Pin It Button for Images is no longer being supported. This is fine, the plugin will still work just fine.
3. Upload your custom image and edit the settings as needed.
Once you’re on the Visuals tab of the settings page, edit the settings as you see fit. I personally choose to have the description source be the image alt attribute, check the box that says Always link to individual post page, and have transparency set to 0. But these might need to change based on your image and your preferences.
Most importantly, check the box that says Use custom image. Then click on the button that says “Upload an image using media library” and upload your custom image.
Next, you’ll want to choose how to align your pin it button on your photo. I personally prefer to have it in the middle, but depending on the image, you might want it in a corner.
Once you’ve got the settings how you want them, check Save Changes and you’re done!
4. Test your settings and adjust as needed.
Refresh a page on your blog and try hovering over you images and see how your pin it button appears. Change the image size and margins as needed.
Now, time for your free goodies.
Now that you know how to import your own pin it button, it’s time to find your image. Luckily for you, I’ve got three different images for you to use for free!
I think I have a pin it button on my website. I haven’t checked it out recently.
If you don’t, you should! It’s an awesome traffic referrer! 🙂
Sweet Right Here says
I’m saving this to come back to when I switch over to wordpress!
Awesome, happy to help!
Cindy @HometownQueenBee says
This is perfect because I need to add a pin it button to my blog! Perfect timing! Thank you!
Awesome, Cindy! So glad I could help!
Cynthia @craftoflaughter says
I love your tutorials, you are my tech hero!
Aww, thanks Cynthia! That means a lot! 🙂
Andrea Franklin says
I SO needed this post, thank you!
Awesome, so glad I could help!
Lyndsay Broughton says
Just wanted to say thanks for this post. Just designed and added my own Pin it button to my site (incatoinuit.com) and love it!
Awesome, so glad I could help Lyndsay! And your blog is BEAUTIFUL!