Lately you might see quite a number of blogs with Pin it Buttons for individual images that enables you to click and pin the certain image straight away on Pinterest. If you have not, just hover on images in my other posts (I have disabled them in this post).

There are quite a few WordPress plugins for Pin it buttons on individual images. However, the buttons are usually the original buttons or logo of Pinterest. Today I’m sharing with you 9 pretty Pin it buttons that you can download and use for free (+tutorial on how to install them after the jump at the very bottom of this post!)

pretty-pin-it-buttons-design-is-yay

Here’s an example of what one of them is going to look like on your images

Pretty-Pin-It-Buttons-Design-is-Yay

 Download the buttons and the plugin, and instructions on how to install them after the jump!

 

download-button

 Click the download link above to download a .zip file containing 9 .png button files. I am using WordPress.org (self-hosted wordpress) as my blogging platform. I don’t think these buttons and the tutorial is going to work for wordpress.com, and I don’t know how to install them in other blogging platforms. You might want to ask an expert.

support-button

These buttons are free, and so is supporting this blog : ) Please support Design is Yay by sharing this post on facebook, twitter or pinterest.
Click one of the share buttons below this post. Thank You!

conditionsofuse

All photos and artwork are © Wita Puspita for Design is Yay. The images or documents you download in this article (or across my entire blog) are free for personal use only. Please do not use them commercially. If you re-post or re-use them in any way for your site or blog, please credit my blog. If you would like to use the printable for any commercial projects of yours, please ask for my permission first. Thank You!

So this is my first tutorial. I hope I’m doing it right. In case I make some mistakes, feel free to politely and nicely let me know at the comments section below ;)

Also, a little disclaimer, I’m not a programmer, web developer, or a web-designer. I have really really basic knowledge about CSS and HTML and other stuff like those two. So the tutorial below might not be the best way to do it, but this is what works for me. If you know a better way, please use your way. I am not an expert. 

After downloading the buttons file and extracting them from the .zip folder, follow these steps.

First, Download and install jQuery Pin It Button For Images to your wordpress.org.

Update: Good news! the jQuery Pin It Button For Images plugin author has updated the plugin. The latest version (0.9) enable users to upload their own buttons and set everything up on the plugin page! That means, no coding whatsoever needed!

So, after downloading and activating the plugin, here’s what you do:

1. Upload the button png file of your choice into media file, copy the URL

2. Go to the jQuery Pinit Button for Images plugin settings. Which is located on the left sidebar, Under “Settings” tab. When you hover, there will be jQuery Pin It Button for Images link that you can click.

3. On the plugin settings page, click to select the “use custom pinterest button” option. 

4. Underneath that, paste the URL of the button image. Set up the Height and Width px in the boxes (You can find the size of your uploaded button on the image chart included in the zip folder)

5. Click Update Settings

Done! How easy is that??? 

Preview your site, and you should be able to see you pretty Pin-It Buttons now! :D

If there’s any question, feel free to comment below, or contact me!

 

 

Related Posts Plugin for WordPress, Blogger...
  • http://afnord.blogspot.com Mormorsglamour- craft and interior design

    What a great idea. Just adorable, I´ve pinned this one on pinterest.

  • http://www.agusyornet.com Agus

    Thanks!! I had been looking for a tutorial like ths! I will try it (:

  • http://onelmon.com/blog onel

    Hello, thanks a lot for the detail step by step instructions. This really helps for a webtech newbie like me!
    The buttons are really cute

  • http://onelmon.com/blog onel

    Hello, thank you so much for the step by step instructions. This really helps a webtech newbie like me.
    And your buttons are really cute too! :D

  • Wita

    Thank You for all the nice comments :) I’m a newbie myself when it comes to stuff like this, so I did a lot of researches, trial n error, too! If there’s any questions or problems with the installation feel free to contact me!

  • http://www.feminine23.com Feminine 23

    Oh thank you so much. This is so nice freebie and tutorial!

  • ben

    Been looking for a hour now, can’t find
    background:transparent url(‘../images/pinit-button.png‘) no-repeat 0 0;
    text-indent:-9999em

    Not sure if I’m blind or if my eyes are just hurting from staring at code.

    • Wita

      Hi Ben,
      are you sure you’re at the jQuery-pin-it-button-for-images editor, and not the general site editor? and also make sure you choose jquery-pin-it-button-for-images/css/style.css under plugin files on the right hand site.
      the codes under that .css file should be:

      .pinit {
      position:relative;
      display:inline-block;
      overflow: hidden;
      }

      .pinit .pinit-overlay {
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      z-index:200;
      display:none;
      text-align:left;
      }

      .pinit .pinit-overlay a {
      position:relative;
      top:0%;
      left:0%;
      margin:20px 0 0 20px;
      display:block;
      width:96px;
      height:57px;
      background:transparent url(‘../images/pinit-button9.png’) no-repeat 0 0;
      text-indent:-9999em;
      }

  • http://www.sisterssuitcaseblog.com Holly and Nat

    These are so cute! Do you know if you can do something like this on Blogger? Or will it only work on wordpress? Thanks!

    • Wita

      Thank You :)
      the buttons can be used for ANY platforms. However, I don’t know how to install them into your blogger blog/site, because in this tutorial I am using WordPress plugin. If you ask around to people who are good in programming, I am sure you can use them for blogger blogs too. Good luck!

  • ben

    ah yea found it, got it going now, but when i do it and update it still has the .css as inactive and the .php file as active, how do i activate the .css file?

    • Wita

      I’m not sure what you mean by inactive. so you mean it’s not showing on your blog?
      anyway, since I used a plug in in this tutorial, maybe you can ask the plugin author (here: http://wordpress.org/support/plugin/jquery-pin-it-button-for-images ) regarding more technical questions. I’m not very experienced in css, what I wrote in this tutorial is what I have tried (with lots of errors) and worked for my blog. So I’m not very technical, sorry :(

  • http://Www.mrsdplus3.blogspot.com Robyn (Mrs D)

    I love these! Thanks for sharing xx

  • http://www.simplyfabulouschic.com Inge

    How cute are these buttons!!! Thanks so much for sharing! And for your well-explained tutorial, it is very easy! The only problem I am encountering now is that I don’t have access to the file folder of my host (which is http://www.one.com/be). Guess I will have to ask someone technical enough to solve my problem… :-)
    Anyway, just wanted to thank you for the supercute buttons!
    Love, Inge x

  • Wita

    Hello Everyone! the jQuery pin it button for images plugin author has updated the plugin, and you can now easily change the buttons with no coding whatsoever!
    So if you have already downloaded the plugin, please update it from the plugin page.
    If you have not, download the latest version
    You can view my updated instructions on this post. Thank You!

  • http://threefriendspaint.blogspot.com Lisa

    Hi there!

    This is a wonderful tutorial and I love your site… question – do you have a tutorial for blogger?

    Thanks so much!

    Lisa

    • Wita

      Hi!
      Thank You :)
      Sorry, I’ve never had a blogger blog so I don’t have any tutorial for blogger users.
      However, this blogger does.
      You might want to follow her instructions, but you can still use my buttons if you want!
      Thanks for visiting my blog

      • http://www.codeitpretty.com Marie

        Hi Wita! Thanks for the mention :) My code for Blogger doesn’t accept custom buttons, it calls the official button provided by Pinterest. Unfortunately, there’s no easy way to do custom Pinterest buttons on Blogger.

        • Wita

          oops, sorry Marie. I didn’t know that. Love your blog btw :)

  • Pingback: Das Wochenende, ein neuer Pin-It-Button & ein neuer Hintergrund()

  • http://www.leighbones.com Leigh Baker

    It worked perfectly!! Thank you so much! And thank you for making is so easy to understand for us “non coders”! I just love the pretty new Pin It button!

    Leigh

  • http://www.lemonade25.com Serena

    Beautiful pin buttons. I am planning on using them for my new website http://www.lemonade25.com. Please let me know if that is ok.

  • Pingback: January Reviewed - Design Is Yay !()

  • http://Lifeanddimsum.com Dyanna

    I’m so glad I chanced upon your site! Your step-by-step was incredibly easy to follow and your buttons are adorable!

    I’ll definitely be sharing! :-)
    Thanks!

  • http://fashnbeaucoup.com Fashnboucou

    Thank you soooo much!!! This was super easy to accomplish!

  • http://recavi.blogspot.com Rebecca

    Love it! Thanks for the free and super cute pin it buttons!

  • http://alaplaceclichy.com Linda

    Thank you so much! I am so excited! That teal perfectly fits my blog!

  • http://www.riverandtheroses.com Charlene

    Thanks so much! These are beautiful and the tutorial was much appreciated for a newbie blogger like me!

    http://www.riverandtheroses.com

  • Pingback: Blogging series: Camera gear and blogging tools | Another House Blog()

  • Mikiki

    Omg i love your website! Your website is the first blog website added in my bookmark.
    Please teach more tutorial! Xoxo

    • Wita

      Thank you! I would love to do more tutorials!

  • Pingback: Adding A Pinterest Pin It Button to Your Wordpress Blog()

  • Clara

    How do you find the “plugins” menu in wordpress? I want to download the Pinterest plugin and use it but I can’t find out how to upload it.

  • Laura P

    I love these pin it buttons! I just want to be clear, for personaI can use means I can use these buttons as hover images on my blog as long as I credit you & do not try to resell the images themselves. Is that right?

    • Wita

      Hi Laura,
      Personal use means you cannot earn any money from the buttons, but you definitely can use it for your money-earning blog and business website. Thanks for asking!