Have you ever wondered how bloggers get those cool Pinterest pin buttons on their images? Just how do they add them to their images anyway?
Well, you’re about to find out. Today, I’m going to tell you exactly how to setup your own custom pin button…and it’s a lot easier than you think.
RELATED: How to Setup Pinterest Rich Pins
Firstly, you’ll need to download the Pinterest Pin Button for Images plugin on WordPress.org. Go’head and click the link. I’ll wait.
OK. Now that you’ve done that. Let’s get started.
Add a Pinterest Pin Button to Your Blog Images
Once you’ve installed the above plugin to your WordPress blog, you’ll need to scroll down to “Settings” in your WordPress Dashboard menu. Click on the “Pinterest Pin It” link.
You’ll find the following settings. Adjust them to your liking, then click “Save.”
Customizing your Pin Button
Show the pin button at all times
For some, this plugin may be too subtle. In that case, you can easily alter the plugin code to display the pin button at all times (it’s currently only visible on ‘hover’).
You’ll need to have the Jetpack by WordPress.com plugin installed in order to edit css without touching your theme files. Install the plugin, if you don’t have it already…then come on back here to grab the code.
.pibfi_pinterest .xc_pin {
display: block;
opacity: .7;
}
Click the “View Source” button above to copy this code. Now, go to your WordPress dashboard and click on “Appearance” → “Edit CSS” to add this code snippet and create this fix.
Add a custom pin button image
This is the fun part. You’ll need to create a button for your blog. If you don’t have one, you can do this easily enough in PicMonkey. This could by a 95px by 95px square, circle or any other shape. For rectangular buttons or anything outside of 95 pixels range, just know that you’ll have to do some minor editing to the code below in order for it to work perfectly.
To get started, just grab the code below. You’ll have to click the “View Source” button on the css box to copy it. Then go to your WordPress dashboard and click on “Appearance” → “Edit CSS” to add this code snippet. Make sure to hit “Save” before exiting your css stylesheet. Don’t see an “Edit CSS” link? Make sure you’ve installed the Jetpack by WordPress.com plugin.
RELATED: How to Add Google Fonts to Your WordPress Blog
Also, don’t forget to replace the background image url with your own button image url.
.pibfi_pinterest .xc_pin {
background-image: url("http://www.chantillypatino.com/wp-content/uploads/2014/04/pin-it.png");
width: 95px;
height: 95px;
margin: 10px 0 0 -20px;
margin: 1rem 0 0 1rem;
}
Never look like an amateur again. Now you’ll be able to add a beautifully customized pin button.
Got questions? Leave them in the comments.
Leave a Reply