How to Add a Custom Pin It Button to Your Blog Images

How to Create and Add a Custom Pin It Button to Your Blog Images. A Tutorial + Showcase by DesignYourOwnBlog.com

How to Create and Add a Custom Pin It Button to Your Blog Images. A Tutorial + Showcase by DesignYourOwnBlog.com

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:

  1. Add at least one Pinnable image to each post and
  2. 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).

If you want to add a generic Pin it hover button to your images, you can easily do this by adding Pinterest’s javascript code to your blog. Visit the Pinterest Widget Builder page, select “Image Hover” under Button Type and then add the code to the head of your blog.

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

I’m going to show you how to use PicMonkey (afflink) to create your Pin It button image because it’s free.

Step One: Create a Transparent Background

  1. Go to PicMonkey and select Collage. Just select one of their random photos to open up the document.
  2. In Collage view, delete all but one cell.
  3. In the left-hand menu, click on the Background icon (looks like a painter’s palette).
  4. Check Transparent background.
  5. 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)

Mel at A Prettier Web has a great video tutorial that walks you through adding a custom button using the jQuery Pin It Button for Images plugin.

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!

Summary

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!

Powered by ConvertKit
Marianne signature for DesignYourOwnBlog.com

90 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge