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!

 

 

26 Responses to Free Pretty Pin it Buttons + Tutorial

  • onel says:

    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 says:

    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!

  • ben says:

    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 says:

      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;
      }

    • Wita says:

      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 says:

    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?

  • Inge says:

    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 says:

    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!

    • Wita says:

      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

      • Marie says:

        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.

  • Leigh Baker says:

    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

  • Dyanna says:

    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!

Leave a Reply

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