Did you know that the majority of my traffic comes from Pinterest?
This is why it kills me that there are still so many bloggers who aren’t taking advantage of it.
Today I want to share some really creative Pin It buttons with you and show you how to add a custom Pin It hover button to your images for Pinterest.
Are your blog posts easily Pinnable?
If they are, hooray! If they’re not, then read on. There are two things you should be doing if you want to take advantage of Pinterest’s traffic:
- Add at least one Pinnable image to each post and
- Make those images easy to Pin
I wrote a separate post (and infographic) on 10 sure fire ways to create attention-grabbing images for Pinterest here. Today’s post is all about item #2: how to add a custom Pin It button to your blog images ASAP.
Adding a Simple Pin It Button
If you use the Chrome browser, you may have noticed that a tiny Pin It button appears at the top, left corner of all your images. That’s awesome, unless you have a lot of visitors that use other browsers, like Firefox, Safari, or lame-old Internet Explorer (don’t get me started).
For those on Blogger, Marie at Code it Pretty has an incredibly informative tutorial on how to add a generic Pin It button.
But what if you want a custom Pin It hover button that matches your branding?
Adorable Pin It Button Showcase
First let’s look at some super cute Pin It buttons for inspiration, then I’ll show you how to create one and add it to your blog images.
If you click the links below and go to the blogs, you’ll notice these cute buttons match their blog’s branding.
How to Add a Custom Pin It Hover Button to Your Blog Images
Step One: Create a Transparent Background
- Go to PicMonkey and select Collage. Just select one of their random photos to open up the document.
- In Collage view, delete all but one cell.
- In the left-hand menu, click on the Background icon (looks like a painter’s palette).
- Check Transparent background.
- Click Save and save the image as a .png to your computer.
Step Two: Create Your Pin It Button Image
Adding Your Custom Pin It Button to Your Blog
Now that you have your image, you’re ready to add it to your blog post images.
Adding a Custom Pin It Button in WordPress (self-hosted)
Adding a Custom Pin It Button in Blogger
Spearmint Baby has an awesome tutorial on how to add a custom Pin It button in Blogger, including some pre-made Pin It buttons for free download!
Note: You can choose where on the image you’d like to place your Pin It button. Notice I choose to center mine. Some people prefer to align them to a corner or side.
However, if you choose to have it appear in the top, left corner of your images, then you’ll want to turn off the automatic Pin It button in Chrome. There are two ways to do that below:
To remove hover buttons for the whole page, add this line of code into your <head> :
<meta name="pinterest" content="nohover"/>
To remove hover buttons for a single image, add this “data” attribute to that particular image:
<img src="mything.jpg" data-pin-no-hover="true" />
Thanks to Kristie Hill at Dreamy Ambitions for the tip!
So there you have it! Creating and adding a custom Pin It button.
Please show off your new (or old) custom Pin It buttons by leaving us a link to a blog post with images in the comments!
Hey friend, want free DIY design stuff?
I've got an entire library of FREE goods just for you! Join the 7000+ others and get instant access now!