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).
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.
Credits: 1: Emma Dime 2: The 36th Avenue 3: Making Magique 4: Design Your Own (lovely) Blog 5: Bright Bazaar 6: Lemon Drop Love 7: Katie Leverenz 8: Allyssa Barnes Web Design 9: Katelyn Brooke Designs 10: Caravan Shoppe 11: My Life and Lemons
Credits: 1: Design Love Fest 2: Mammasaurus 3: Useful Graphic Design Tutorials 4: Sewbon 5: And Yes to Joy 6: You Are My Fave 7: Life of a Social Butterfly 8: Salted Ink 9: A Prettier Web 10: A Blog Made Vibrant
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
- 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)
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!
Hi Marianne – thanks so much for the mention and link. Very nice of you..
My pleasure Caroline – cute button! 🙂
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!
You’re so welcome Caroline, very nice button and so simple – loved it!
Glad you liked the post 🙂
Yay! Thanks so much for the mention and I LOVE your site!
You’re so welcome Mel, I love your blog too! And perfect timing on the free Pin it button downloads!
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!
Thanks Brenda, so glad you’re going to try it. Please let me know when you have it complete so i can check it out!
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,
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!) 🙂
I just discovered this website today and it’s fantastic!! Thanks for the tutorials am going to try it right away 🙂
Hi Kris, thank you so much! Feel free to ask me any questions in the comments as they come up!
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
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.
Hi, thanks so much for replying to me.. but I figured it out!!
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?
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!
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
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.
I’m not, I’m trying to put it on.
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!
Hi Beka, if I understand you correctly, I believe you just need to add the class=”nopin” to the items you do not want it to appear on. If you look at the settings for the plugin, there is also a place where you can set the minimum size so that it doesn’t appear on small images. Let me know if that does or doesn’t answer your question!
Hi, Marianne! Thanks for getting back to me.
Yes, indeed. That is what I found also >>
https://stackoverflow.com/questions/45310248/nopin-nopin-code-not-working-on-individual-images
🙂
OMGosh! So glad I found you 🙂 thanks for the help!
Fantastic! So glad it was useful!
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!
Way to go Jen! They both look fabulous!! I’m kinda jealous of your pin it button 😉
Thank you! I had mine up and going in less than 5 minutes! http://www.aseatrempphotography.com/wedings/sheraton-park-hotel-anaheim-wedding-♥-jackie-wade/2014/09/16
awesome! it looks great Asea!
Thank you so much for this! It works great! I love my new pin it button!
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! 🙂
Great job Sofia, it’s super cute!!
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!!!
Yay Mandee! I’m so glad it worked out for you! Cute blog btw!!
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
Awesome Lucie! I can’t wait to see it. Btw, your blog is GORGEOUS!! I have serious design envy right now 😉
Oh I did not see you replied! Ha thank you! :):):) Love yours too!
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!
Oh my gosh, it is SUPER cute Lucie, great job. I am very impressed!
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
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!
Thank you sooo much for the instructions! Keep up the good work! Hugs from Greece! 🙂
( http://evasbits.blogspot.gr ) Eva ♦ Jajala Majala
You’re very welcome Eva! I took a look at your button and you did an awesome job!!
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
Hi Betty, nice job on the button! You could try Fotor, which is a lot like PicMonkey or Pixlr which is very similar to Photoshop but free and online.
http://www.fotor.com/
https://pixlr.com/
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
Christine, it’s wonderful! You did an amazing job on your button, congrats!
It was so much easier to add my custom “Pin It” button than others. Thank you so much.
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!
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!
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!
Hi thanks for the post it definitely helped me out 🙂
You’re welcome Ikeashia, I’m glad it worked for you! That’s a really cool Pin it button!
Awww thanks girly 🙂
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!
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!
That is so strange. When I go to it on my computer it is there…now I am wondering what I have done wrong?
Oh now I see it Traci! I wasn’t clicked into an article, i was on the blog page, that’s why! I think it looks fantastic!!
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
It looks great Marina, so glad you found it so easy!
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!
Oh Olga your button is SO creative and original. Well done!
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
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
Hmmmm.. under the Visual tab for the plugin settings, I have a setting where I can set the size. Do you have that on yours?
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?
Hi Jenn, did you try adding the code from the very bottom of the post to your header?
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!
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!
Hey Jenn, thanks for coming over from Pinterest! Your new Pin it button looks great!
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
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!
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
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.
Does this work on Squarespace or do these codes work because it already has a setting pre set in squarespace.
Thanks!
Lauren
Hey Lauren, this probably won’t work in Squarespace because it requires the use of a WordPress plugin. Sorry!
Thank you !!! It took me 5 minutes, yeaaaaa. I been googling for an hour before I finally fond your tip. THANKS
That’s great Magny, I’m thrilled you did it so quickly and it looks awesome, great job!
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. 🙁
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
You’re welcome. I just took a peak at yours and it’s adorable!
Thank you so much for this tutorial. Have abled to install for client side.
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!
Hi Adam, can you reduce the size of the image you upload?