At the beginning of the year I made a vow to get more active on social media and try and create some brand awareness for myself. My first step was to tidy up my blog, and make it super easy for my readers to share my content easily. Since I wanted to focus heavily on Pinterest, which is the #2 traffic referrer to my blog, I wanted to add a Pin It Button for my images.
Adding a Pin It Button directly on an image, is like a mini call to action, telling your reader to “Pin the damn image” to Pinterest. I love that! The only thing I didn’t love is the red logo across my images. It seriously clashes with my blog’s color palette lol! I was seriously considering removing the plugin until I realized since it was an image; Bloop! I could customize it. After a little digging, I figured out how to customize the image, so I’ll show you how to do it too! See the steps below and get your Pin It Button, just the way you want it! *Twerks*
Please note this tutorial assumes that you have general knowledge of using WordPress. If you want to start at the basics, please visit my Youtube channel for tutorials.
**Please keep in mind that this plugin may or may not be compatible with your current theme.
You will need 2 things:
1. Pinterest Pin It Button For Images Plugin
2. Graphic Design Software [PicMonkey, Photoshop, Photoshop Elements, GIMP]
Instructions:
1. First, create your button using your design software that is 50px X 80px. Type whatever words you want to use. I used the words, “Pin This!” on my little button. Make sure it matches your current brand identity, but keep it super simple. Here is mine. See super simple and it matches my blog.
2. Upload the button to your WordPress dashboard. Copy the file name of the button.
3. You’re going to need some wine if you’re scared of CSS.
3. Just kidding. I have the code for you, BUT please Do NOT update your theme’s original CSS file. Instead please create a child theme or Install a CSS Plugin that will allow you to add this code, which will override your theme’s CSS.
4. Paste the following code in your Child Themes’ CSS or CSS Plugin. Use the file name from the button you copied and paste it in the code as shown below:
.pibfi_pinterest .xc_pin {
background-image: url(http://yourblogname.com/button.png);
}
5. That’s it! You should see your fabulous image over your image when you hover over it!
Thank you so much for this! I’ve been looking for a Pin it button over my images for a while. I mean a whiiiiile…. So I really appreciate this post! Lol!
You’re so welcome! I was just mad at the red thing when you hovered over the image so I figured if I was annoyed by it, someone else might be too! LOL
This is awesome Kim. I like the idea of customizing your PIN IT button. I’m about to PIN this now 🙂
Thank you Vee + Thank you for sharing this :). See it makes other people want to Pin stuff! I love it!
This was a great tutorial, Kim! I actually used that Simple Custom CSS plugin that you suggested and it worked perfectly 🙂
yay Rashida! I am so happy it worked for you! I’m off to your website to have a peek.
Such a quick and easy tutorial! Way to go Kim. 🙂 Your Pin It button is adorable!
thanks Angel! Now it feels more personalized 🙂
I had no idea you could customize these things! Thanks for sharing this, will be one of my projects this week.
Hi Denise! If it has a source, which means somewhere you can find the source of where the image is pulling, you can pretty much change anything :). Stop back by and let me know how the change of the button went 🙂
Clever and simple tip! Thanks for sharing and for making it easy. I’ve actually been having Pinterest button issues so I hope this helps makes it easier for readers to pin my stuff. (Found you on the SITS share yesterday!)
Hey there Mrs. Smith! Thanks so much for stopping by! I think this button will do wonders for your Pinterest traffic. Another thing you can try is pin two completely different images for the same blog post on Pinterest to increase traffic AND to see which images your pinners respond to. I wish you luck in your blogging journey 🙂
This was super helpful. It’s been on my to do list for what seems like forever, but most of the tutorials I’ve seen require either plug-ins I need to pay for or are hard to understand. Thanks for making it sound so simple. (found your site through SITS group, and I can’t wait to read more!)
HI Alli! Thanks so much for taking some time out of your busy day to stop by :). You actually do need a plugin for this unfortunately, BUT it shouldn’t wreck too much havoc on your blog…hopefully lol. I hope it does bring that extra pinterest traffic you’re looking for!
So am I the only one it didn’t work for? ? What did I do wrong?
Hi, Can you tell me or show me what issue you are having? Is the image just not showing up?
Hello!
Yes, it’s just not showing up. I used the simple case plugin.
Hello!
Yes, it’s just not showing up. I used the simple CSS plugin.
Go ahead and send me an email :). You can find my email below my image. In your email send me a screen shot of where you placed the code.
just saw this and shot you an email! Thanks for your help!
Hi Kim! I really like this idea but it’s not working for me, either 🙁