This post originally appeared on my other blog, Life Unfluffed. But, upon further review, I realized that this post about how to add a custom pin it button to your WordPress blog made a lot more sense on here than it did there. So, here we go!
There are so many tutorials out there on how to add a custom pin it button to your WordPress site. The problem is, many of them use words and phrases that only someone who knows code would probably know. So! Here I am to show you how to add a custom Pin It Button to WordPress in the easiest way possible.
If code scares you- Don’t run the other way. Because guess what? This tutorial uses absolutely no code at all. Can you even believe that? Thank you WordPress plugins!
Okay, so first things first! You are going to want to design your pin it button.
I usually make mine 100x100px. This makes a great size square that won’t take up the majority of your blog post image. I find it’s juuust the right size to catch readers’ eye, but at the same time, not be overwhelming.
Once your button is designed, be sure to delete that white background layer, so that it is clear behind your button.
Save your image as a .PNG, and you are ready to move on!
Next, login to your WordPress site and scroll down to where it says “plugins”. Hover on that, and then choose “add new”.
From there, you’ll want to search for the plugin titled “JQuery Pin It Button For Images” and then click “install”.
Once the plugin is installed, click on “Activate” to activate the plugin. I know, I know! Rocket science, right!?
From there, you will want to scroll down to where it says “Settings” and hover until you see “JQuery Pin It Button For Images”. Click on that.
The first page it’ll take you to will be the tab titled “Selection”. I usually just keep all those settings how they come, with the exception of the bottom two sections, which I check all of the boxes (you can leave any page you don’t want the button to show up on unchecked, if you’d rather, though) and set my minimum resolution to 400px by 400px (so that my pin it button doesn’t show up on my teaser posts on the bottom of my page).
After you have the selection page set up, save your changes and then click on the “Visual” tab.
For this tab, I keep all settings the same until I get down to the “use custom image” check box. This check will allow you to (can you guess!?) use a custom image as your pin it button.
So! Click that box and upload your image either from your media library, or by pasting the image link onto the appropriate line. Then, change your height to 100px and your width to 100px. You can press “refresh preview” to check out how your button will look.
After that, just change the pin it button position to where you want it (I usually choose top right) and scroll down to save your changes.
Whaaaala. You’re done.
That wasn’t too painful, right?
Now, go admire your pretty custom pin it button.
Let me know if your tried this tutorial and whether or not it worked for you. I would love to help you out, if it didn’t After all, I am The Fairy Blogmother, remember!?
Leave a Reply