By signing up, you consent to receive email newsletters from me periodically.

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 10,000+ others and get instant access now!

Powered by ConvertKit
Marianne signature for DesignYourOwnBlog.com

96 Comments

  • Caroline says:

    Hi Marianne – thanks so much for the mention and link. Very nice of you..

  • Thanks for the mention! Such an awesome in-depth post! Wish I would have had it when I was trying to figure it all out on my own! πŸ˜‰ So helpful for your readers!

  • mel says:

    Yay! Thanks so much for the mention and I LOVE your site!

  • Such a helpful post! I had no idea you could do this with PicMonkey! I’ll need to play around with this a bit. Thanks!

  • Great tutorial! The only thing I would add, is to just disable the chrome hover button! They say it isn’t supposed to show up if you have a custom pin it button, but it was still showing up on my blog. Just add this meta tag to the head of your blog,

    • Marianne says:

      Thanks Kristie, I had no idea you could disable it! Although the code didn’t come through. :[ You could email it to marianne @ designyourownblog.com and i’ll add it into the tutorial (and credit you of course!) πŸ™‚

  • Kris says:

    I just discovered this website today and it’s fantastic!! Thanks for the tutorials am going to try it right away πŸ™‚

  • Kristina says:

    Marianne,

    I need your help! I used this tutorial and got my custom pin-it button to show up and it looks great! However, I still have the old generic pinterest logo that still pops up and I don’t know how to get rid of it. I have searched my HTML over and over and can’t find where I’m going wrong. And that one shows up on my header, side bar, etc. which I don’t like either. Please let me know if you have any ideas, thank you!

    Kristina

    • Marianne says:

      Hi Kristina, glad you got a button that you like, that’s the first step! Did you try the last steps of code between the Note (green box) and the Summary? I think that should take care of the old Pinterest button, unless I’m understanding wrong.

      I tried to go to your blog, but the link on your name doesn’t seem to work. Hope you get this reply and can let me know your URL. I’d be happy to take a quick look and see what’s up.

      • Kristina says:

        Hi, thanks so much for replying to me.. but I figured it out!!

        • Marianne says:

          Hi Kristina, so glad! Sorry I didn’t reply sooner, I’m on vacation this week and trying to stay off as much as possible πŸ˜‰

          Would you mind letting me know how you did it?

          • Kristina says:

            This code was in my Post Template section and even though I removed it, the “P’s” were still there. I finally figured out that this code was at the bottom of all my posts so I had to go back through and individually delete them. Now it’s all fixed!

  • Sophia says:

    Hello! I need some help. I tried this but you kind of lost me at the end with the code remove hover thing. Could you email me please? Or reply? Thanks!

    Sophia
    thatssomebysophia.blogspot.com

    • Marianne says:

      Hi Sophia, are you trying to remove Pin it buttons from some images on your blog? If you are not, then you can ignore that last part. If you ARE trying to remove it from certain images, let me know which ones on which page(s) and I can help you out more specifically.

      • Sophia says:

        I’m not, I’m trying to put it on.

      • Beka says:

        Hello there, Marianne!

        I have installed a custom rollover pin button for blog post images and deactivated the Chrome extension.

        However I now want to stop the rollover button from appearing on other certain images such as on sub-pages and cannot figure out how to do this πŸ™

        The blog I am working on for this can be found in link with comment.

        Would appreciate your help if you can. Thanks!

  • OMGosh! So glad I found you πŸ™‚ thanks for the help!

  • Jen says:

    Well that was super fun and easy!! Thanks so much, I just found you and my opt-in box and pin it button are 10x cuter!! I can’t wait to see what else I can pretty up!

  • Kylie says:

    Thank you so much for this! It works great! I love my new pin it button!

    • Marianne says:

      Oh my gosh Kylie, that is seriously THE cutest Pin it button i’ve seen! Great job!! If I do another showcase someday, I’m definitely including it!

  • Hi Marianne!
    This post was very helpful and I just added y customized pin it button to my blog after following your tips!

    Thank you very much! πŸ™‚

  • Oh my heck, I wish I would have found this sooner! I just spent the last hour and a half cycling through terrible plug-in’sβ€”this one actually worked!!! And it was so much easier to add my custom “Pin It” button than others, I didn’t even have to go into the php! πŸ˜€ Yay! Thank you Thank you Thank you!!!

  • Lucie says:

    ahhhhh I meant to do this for SO LONG! I am finally doing it now! Thank you so much for sharing these really good tips! I agree that having a customised pin button looks so much better πŸ™‚ xx

  • Lucie says:

    Aaaaaah I am still so happy I need to show you!!! I did a little bird with a little flying thing behind it, WHY did I not do it before haha! So excited! Thanks again!

  • Sarah says:

    Hi! This tutorial was exactly what I was looking for! I love custom Pin It buttons; they really help continue branding across all the elements of your site. I’m just starting my blog (it’s not even live yet), but I want to have some posts about how I’ve developed it beyond the free template I downloaded. Is it okay if I share a brief overview of this post and link to you? I’ll make my own images, but really like this topic as a blog post too. I’ve been playing around with another plugin too that seems cool.

    Thanks!
    Sarah

    • Marianne says:

      Hi Sarah, so glad you found it helpful and I look forward to seeing your blog when you launch it so be sure to come back and let me know when you do.

      And join our FB group for support while you work on you blog’s design/branding! https://www.facebook.com/groups/DYOBlog/

      Sure I don’t mind at all if you link an overview to this post. Thanks for finding it valuable enough to share!

  • Eva says:

    Thank you sooo much for the instructions! Keep up the good work! Hugs from Greece! πŸ™‚
    ( http://evasbits.blogspot.gr ) Eva ♦ Jajala Majala

  • Betty says:

    Really helpful tip thank you very much!!
    Just one question, do you recommend any other editing program where I can use more tools to create my custom pin it button ?

    http://inspiremeland.com

    Betty

  • Christine says:

    Hey Marianne!
    I’m a newbie blogger and saw a custom pin it button on another blog I follow and LOVED it! So I just googled how to make it and your post came up! I honestly know VERY LITTLE about photo editing and wordpress (I’m fortunate to have a web designer bff who has set much of it up for me). Anyways, I just wanted to say how HELPFUL your tutorial and the corresponding videos were! I am proud to say that I did it, MYSELF!!! From creating the image to installing the plug-in and even tweaking it a few times so it would look just right! Yahoo!!! Thanks so much for sharing how to do this! I am SO happy with how it turned out! You can have a peak here! http://amidstthechaos.ca/2015/03/little-birdie-vintage-baby-shower/
    Christine xox

  • It was so much easier to add my custom β€œPin It” button than others. Thank you so much.

  • Alysia says:

    Hello!

    Thank you for your great tutorial. I now have a custom pin it button on my site; however, I still need to turn off the automatic pin it button in Chrome.

    Your notes section says:

    To remove hover buttons for the whole page, add this line of code into your :

    So I think that is the code I need to use. However, I am new to WordPress and I don’t know what/where the is. Could you provide a bit more guidance for me so I know where to input the code? Thank you so much!

    • Alysia says:

      Sorry, for the reposting my comment again – it appears some of the code disappeared in my original comment.

      Hello!

      Thank you for your great tutorial. I now have a custom pin it button on my site; however, I still need to turn off the automatic pin it button in Chrome.

      Your notes section says:

      To remove hover buttons for the whole page, add this line of code into your “”:

      So I think that is the code I need to use. However, I am new to WordPress and I don’t know what/where the “head” is. Could you provide a bit more guidance for me so I know where to input the code? Thank you so much!

      • Marianne says:

        Hi Alysia, pretty blog!
        It looks like you are using a Genesis theme so that’s easy πŸ™‚ In your dashboard, go to Genesis > Theme Settings. Scroll all the way down til you see Header & Footer Scripts. In the first box (for header), you’ll paste that code at the bottom of the input box.

        Let me know if you still need help.
        So glad you enjoyed the tutorial otherwise!

  • Ikeashia says:

    Hi thanks for the post it definitely helped me out πŸ™‚

  • Traci says:

    This was incredibly helpful! Thank you so very much!!! It took me a while but I finally figured out how to disable the automatic pin it button. Now I will work on tweaking my custom pin it button because I am thinking it may be a little too big. Thank you and I am excited to have stumbled across your blog!

    • Marianne says:

      Hey Traci so glad you got it worked out. I didn’t see your Pin it button when I went to your blog, did you disable it for now? Let me know when you’ve got it working again so I can see!

  • Marina says:

    Wow this was so easy! I should have done this a long time ago! I’m away from my main computer traveling right now so I made what I could with what I have. (i.e. I don’t have my color scheme hex #s or icons with me) I’ll work in Photoshop once I’m home now that I have the dimensions, etc. Still love it in the meantime. =) Thanks for this very helpful post. You can see my new Pin It buttons at http://www.mindfulmemorykeeping.com

  • Olga says:

    Thanks for the tips! It was really helpful and I had a lot of inspiration thanks to your showcase. Now my blog have more personality!

  • Hey Marianne,

    I know I’d find out how to do this here on your blog! I was on Pinterest trying to figure out the coding and it was that just driving me up the wall. No matter how I coded it my pin it image was on the top left corner of my post. Weird, right?! Anyhow I did my image in Canva and I was ready to use it on my WordPress blog and I was searching for a tutorial and I found this one. Thanks so much I really needed the suggested plugin. It works!

    Take care,
    Lillian

    • Marianne says:

      Yay that’s awesome Lillian, so glad it worked! It’s super cute, but I’d suggest making it a little bigger because I almost missed it and I was LOOKING for it. πŸ™‚ So neat that you created it in Canva! You should do a tutorial on that and I’ll link to it.

      • Okay I felt the same way about the size however I’m not sure why it’s making it so small?? I uploaded it as 96 x96 pixels and it’s much smaller. I’ll try uploading it in a larger dimension and hopefully it helps.

        Once I figure it out, I’ll definitely write a post on it and link it back to your post. I’ll let you know!

        Thanks,
        Lillian

  • Jenn Roberts says:

    I created my pin-it button and uploaded it into the plug in, but its still showing the standard button instead of my custom one. Any ideas why or what I should do?

  • I’m going to spend some time this weekend to set this up! What a cool post. I really liked the showcase of pin buttons. πŸ™‚ Now I just need to figure out my own little unique one to add to my site.

    Your blog makes me feel like I’m in a boutique πŸ˜‰ Tres chic!

    • Marianne says:

      Aww Suzi, that’s soooo nice, thank you!! And please let me know when you’ve created your custom button, I’d really love to see it!

  • Thank you for this post, Marianne! I keep meaning to do this, and seeing this post on Twitter got my butt in gear, haha. I just finished installing my custom Pin It button on thespareroomproject.com, and I’m so excited! Thanks again!

  • Ruthie says:

    Once again – you rock the design world, my friend! Thank you so very much for this tutorial – I now have a cute Pin-it button with my own branding colors and feel super accomplished today!

    I just love you. Everything you do is useful and share-worthy!

    ~Signed, your biggest fan <3

    • Marianne says:

      Awww Ruthie, you’re awesome! You don’t know how much I appreciate you, girl! Thanks for the kind words and great job on the button, I seriously love it!

  • Katharine says:

    I read this. I did not understand. Also have a question.
    Q: Can we do this with a WP.com site?

    If so, that brings us to the part I do not understand. You said: 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….to the head of your blog.

    Wow. I’m stuck here. Did you mean to the header? To the url of the post? Where is the head of the blog? Thanks. <3 K

    • Marianne says:

      Hi Katharine, I do not think you can do this with WP.com, unfortunately. One of the reasons I really don’t like that platform is that it’s incredibly limiting as far as adding your own code or even plugins. If you want to look into switching to a new platform, I have a guide to help you choose one here: http://designyourownblog.com/startablog.

  • Lauren says:

    Does this work on Squarespace or do these codes work because it already has a setting pre set in squarespace.

    Thanks!

    Lauren

  • Thank you !!! It took me 5 minutes, yeaaaaa. I been googling for an hour before I finally fond your tip. THANKS

  • Hi there! I “found you” this week and I’m totally in love with all your posts and design. And jealous! πŸ™‚ In a good way. Just wanted to let you know the link to A Prettier Web post tutorial didn’t work for me. πŸ™

    • Marianne says:

      Hi Andrea, thanks for the heads up! I just tried it and it worked for me. Perhaps her site was having issues at the moment you tried to click. Try it again and let me know πŸ™‚

      By the way, no need to be jealous of my site, yours is beautifully designed!

  • Thank you so much for this awesome tutorial! <3

  • Ash.if says:

    Thank you so much for this tutorial. Have abled to install for client side.

  • Adam says:

    great tutorial. thanks for providing such a article! i used it and it get a good result! but i still have some problem! i dont know how to reduce it! i like this custom pin it button!

Leave a Reply

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

I accept the Privacy Policy

This site uses Akismet to reduce spam. Learn how your comment data is processed.