Blogkeeping // Pin It for Images

Have you seen the new Pin It hover on images that many blogs have started using? (If you haven’t, hover over the image above to see!) Here’s how to do it on your own blog (sorry, self-hosted WordPress only):

Install the Plugin

Install the Pinterest Image Pinner plugin from Collective Bias.

Update Settings

Open the CB Pinterest Settings under the Settings menu. You’ll see an option to enter a JQuery selector.

The easy method // Type in img for the JQuery selector for images to be pinned. Play with the min width and height to ensure that buttons and other small images are not pinned.

The better method // If you know your way around code, look for the class assigned to your posts in your theme — for example, it might be something like “entry.” Enter .entry img for the selector, and it will only add the pin it button to images in your posts.

Make it Pretty

At this point, you should have a standard pin it image permanently placed on top of each of your images, in the corner. You can stop here if you like, or you can make it pretty with CSS!

Here’s the code if you want your image to fade on hover:

 .cb_pin_images {padding: 0 !important; width: 100% !important; height: 100% !important;} .cb_pin_link {display: block!important; position: absolute; top: 0 !important; left: 0 !important; width: 100%!important; height: 100% !important; background: none !important;} a.cb_pin_link {background: url(YOURIMAGE.PNG) 0 0 no-repeat !important; opacity: 0; transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear;} a.cb_pin_link:hover {opacity: 1;} .cb_pin_images img {display: block; position: relative; opacity: 1; transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear;} .cb_pin_images:hover img {opacity: .7;} 

Here’s the code if you don’t want your image to fade on hover:

 .cb_pin_images {padding: 0 !important; width: 100% !important; height: 100% !important;} .cb_pin_link {display: block!important; position: absolute; top: 0 !important; left: 0 !important; width: 100%!important; height: 100% !important; background: none !important;} a.cb_pin_link {background: url(YOURIMAGE.PNG) 0 0 no-repeat !important; opacity: 0; transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear;} a.cb_pin_link:hover {opacity: 1;} .cb_pin_images img {display: block; position: relative;} 

Add this code to your style.css file in your theme. Upload your own Pin It button (keep it small, and make it a transparent PNG), and replace that file URL with YOURIMAGE.PNG in the code. The code is set to place the image in the top left corner, so add a little padding to your image if you don’t want it flush against the top or left.

Side note: There are quite a few Pin It Image plugins out there, so play around and see what works for you! A few of them are set to only show up on hover by default, but those were not compatible with my blog so I had to use this method.

Happy pinning!

P.S. Sorry to Blogger friends! This unfortunately is not available on Blogger. But I do plan to discuss topics soon that are available to both platforms — leave a comment below if there’s anything in particular you’d like to see!

UPDATE: Code it Pretty has a great tutorial to implement this on Blogger!

Discussion

  1. Kate says

    I’m so excited about this! I’ve been meaning to look into this and hadn’t gotten the chance yet- thanks for putting it all in one place for me, Lisa!

  2. ooooh this is such a good one Lisa. Definitely going to give it a go on my own (although I am completely lost when it comes to html), otherwise expect an email from me, haha.

  3. ooo I tried but it looks like I am doing something wrong here..cos it pinned every image on the website..I have no clue about html;

  4. i want wordpress just so i can have all these cool features!

  5. Lisa, I’ve missed so much on your blog in the last few weeks while I’ve been away from blogging! I love this new series, what a great idea. Thanks for sharing your tips!

  6. You are such a pal for giving away your secrets! God bless WordPress and its plugin for everything.

  7. I couldn’t get this to work on my blog (maybe because of the Lightbox plug in?), but am so glad I found your blog! Love how clean & pretty it is. Thanks for this series, esp the post on social media links–totally doing that.

  8. I just stumbled across your blog. It is FANTASTIC! Thanks for this awesome post. I am debating switching to WordPress format and I think this just sold me on the change.

  9. Thank you for the great tutorial! I have been looking for this for months!

    One question: do you know how to code the plugin so when a user pins an image from the homepage, the post permalink url is associated with the pin (instead of the homepage which makes the pin impossible to find later)?

  10. Amy says

    So cool! Wish I was on wordpress. I feel a switch coming soon :)

  11. I’d love to use this but your directions and the developers are really unclear. I can’t get it to work and I’ve been trying everything for hours

  12. Wally says

    Well I’ve installed this and it kinda works but not entirely. I’ve got images linked to an post. But with this code it links the entire image to pinterest.

    I played a bit with the css and changed with to 50% .cb_pin_link {width: 50%!important; height: 100% ;}

    But then the button only appears on certain areas of the image.

    How to get it so the button appears when I hover over the image but the link to pinterest is only on the button ?

    1. Wally says

      Okay after a few more tries I succeeded by adding background: url(/pinit-button6.png) 0 0 no-repeat !important; to .cb_pin_images

  13. This worked for me but I want to do the “advanced” way so that my header image isn’t pinnable. However I’m not exactly sure what to put where in the CSS and don’t want to screw it up. Do you have a screenshot of exactly what this should look like? Thanks!
    Doseofdash@gmail.com

  14. Thank you for this! This was a hobby plugin and it’s been a while since I have had time to play with it.. If you don’t mind the traffic I’ll update the instructions to look here before they ask for help in support.

    Thanks again!

  15. jason says

    Hello,

    I love how easy this was to install and get working on my blog page. My website has many other pages with images that I’d like the same “Pin It” button to appear on…

    Is it possible to have the “Pin It” button appear on all the images on my website?

    Thank you ever so much!
    Jason

Love this post? You'll love these, too:

about-sidebar

Hello! I’m Lisa, the web designer behind Elembee. I’m on a mission to help you look your best online so you can do what you love.

More about me

cover-ipad1

On sale now! WordPress essentials, in plain English, with step by step how-to guides and honest advice on what you actually need to know to make your WordPress site work for you.

Learn more

By the way: I really love to share. Just bought something awesome? I want to tell you all about it. Sometimes I receive affiliate payments for your click or purchase — which is really just icing on the cake for me, because I'd be happy to tell you about it anyway. Also? I really love to give advice from my own experiences in blogging, business, and design. But your situation may be totally different than mine, and I have no control over that. So, my advice doesn't come with guarantees, and the information provided here is for educational and informational purposes only. Let's keep things friendly, ok? You can find more information in my Privacy Policy and Terms & Conditions.

Weekly little notes to inspire action, so you can do what you love.