January 15, 2013

Add a Pinterest Mouseover Button to Your Blog Images

Follow Kevin and Amanda on Pinterest.

Have you noticed this trend on blogs lately? This is a new feature I’ve seen popping up everywhere. When you put your mouse over an image on the blog, a Pinterest logo pops up prompting you to “Pin” the image. At first I wasn’t sure if I loved this feature or hated it. But after giving it a chance, I’ve decided I love it. :) I don’t know about you guys, but most of the blogs I visit have SO many gorgeous photos to pin. It seems like every photo is “pin-worthy!” Sometimes I have a hard time choosing which image from a post I want for my Pin board, and by the time I finally make the decision, hit the “Pin it” bookmarklet in my toolbar at the top of the screen, and the Pinterest pop-up screen appears with all the tiny square thumbnails, I’ve forgotten which image it was that I wanted to pin — or worse, I can’t tell which image I wanted to pin because the thumbnails are too small! So this is a feature I’ve grown to immensely appreciate, since now I am able to simply pin the image I want right there from the blog post while I’m reading.

If you’ve got a blog and want to add this feature to your photos, here’s how you do it.

 

WordPress

If you’ve got a self-hosted WordPress blog, you can use the Pinterest Pin It Button For Images plugin.

  1. Simply download the zip file from the above link, go to your WordPress Dashboard, click Plugins > Add New > Upload and upload the zip file.
  2. Activate the plugin, then from your WordPress Dashboard, go to Settings > Pinterest Pin It.
  3. Under the heading Show “Pin It” button on following pages, click All Pages. Click Save.

This plugin comes with the default “Pin It” button as seen in the image above. If you like it, that’s it!

You’re done! :)

You now have a Pin-It button that will appear when a reader puts their mouse over any image on your blog.

If consider yourself tech-savvy and you’re up for a little bit more of a challenge, you can also choose to use your own button style in just a few easy steps.

 

Customizing Your Button

You can make your own personalized button, or here is a link with some gorgeous, free Pinterest buttons. You’ll probably want to make sure that the button you choose has a transparent background and is saved as a PNG file, otherwise, if it has a background, it will be white on your image. Once you’ve chosen your image, here’s what you do:

  • Open the pinterest-pin-it-button-for-images.zip file you downloaded.
  • Drag and drop the new Pin It button into the pinterest-pin-it-button-for-images folder.
  • Open the ppibfi_pinterest.css file in Notepad or Text Edit and find the following code (it’s right there at the top, very easy to find! :))

.pibfi_pinterest .xc_pin {

width: 80px; height: 50px; /* Please note that the button is 80px x 50px. If you use a different size button, change this */

background-image: url('ppibfi_button.png'); background-repeat: none; /* This is the buttons image. Image can be found in the plugin folder */

It’s easy going from here. As the instructions say, if your button is a different size, change the code to your button’s width and height. Then change where it says ppibfi_button.png to the name and filetype of your image. Save the file.

If you’d like your button to be in a different position, look just underneath the previously mentioned code and find where it says

top: 5px;
margin-left: -1px;

Change these numbers to shift your button to a different position. I changed mine to top: 15px; margin-left: -15px;. You can also change top to bottom to have the button appear in the bottom corner.

Once you’re done editing, save the ppibfi_pinterest.css file, then zip up the pinterest-pin-it-button-for-images folder.

  • On a Mac, you can just right-click on the folder and choose Compress.
  • On Windows, I believe you can right-click on the folder and select Add to Zip, although I haven’t used a Windows computer in a good seven years, so my information might be a bit outdated. :)

Then follow the previously mentioned steps to install the plugin to WordPress, starting with Step 1.

That’s it! You should now have your own customized Pin It button that will appear whenever anyone puts their mouse over an image on your blog. :)

NOTE: If that all sounded like Greek, you can always just use the button that comes with the plugin. It looks great! :)

 

My Thoughts on This Plugin

  1. What I really like about this plugin is that if the image is a link to another page, you can still click on the image to get to the link. For example, you can click on any photo on my blog to see the camera, lens, and settings used to take that photo. Also, when I share links or lists and use an image, I will link the image as well so all you have to do is click on the image to get to the page. This plugin does not interfere with that. It will only Pin the image if you click on the actual Pinterest button in the corner of the image. Click anywhere else on the image to be taken to the link.
  2. When someone pins an image from your blog using this plugin, it will automatically fill in the description box with the title of your post. This can be a good and bad thing. Some bloggers (myself included) prefer to write their own description for each image, which may include hashtags or a link back to their blog. This plugin overwrites any custom description you may give your images and replaces it with simply the title of the blog post. So that may not be ideal. However, for older blog posts where you may not have set up a custom description (which is probably the majority of your blog posts, if you’ve been blogging for any length of time) this can be a great thing. It will now automatically fill in the description box with your post title. So as long as you have descriptive post titles, you’re golden!

 

Blogger / Blogspot

If you’ve got a Blogger or Blogspot blog, there’s a super-easy tutorial to get this working for you as well.

  1. Follow this tutorial at BloggerSentral.com: Pinterest Pin It Button On Image Hover.
  2. See this in action on my Blogger Test Blog. (Please excuse the mess! I just use this blog as a place to test out code when I’m writing tutorials for you guys. :))

 

So what do you do if you’re not a blogger and a blog you love doesn’t have this feature?

Great news! If you love this feature but visit a blog that doesn’t have it, there’s an easy solution. If you use Firefox or Chrome, you can install a plugin where all you have to do is Right-Click on any image to Pin it.


As you can see in the image above, the Chrome plugin automatically fills in the description box with the post title and the name of the blog. I love this! With the Firefox plugin, the description box is blank. Boo!

If you use Safari or Internet Explorer, I’m afraid I couldn’t find a plugin for this trick. If you know of one, please feel free to leave it in the comments! However, you can always install the Pin It toolbar button at the top of your screen.

 

So what do you think?

I’ve installed this plugin so you guys can see it working on my site. Feel free to pin any image from this post! I haven’t decided if I’m going to keep it yet though. What do you guys think of Pin It buttons that pop-up when you put your mouse over an image? Is it annoying and “in your face” by saying “Pin me! Pin me!”? Or is it a helpful tool that makes pinning quick and easy? What are your thoughts?

Follow Kevin and Amanda on Pinterest.



See More Posts About: Blog DesignTutorials

192 Comments





118
Heather April 27, 2013 at 5:26 pm

Thank you! Just what I was looking for. And so easy.

Reply

119
Amy April 30, 2013 at 12:05 pm

Hi! :)

Quick Q…I just installed my pin it button {AWESOME!} however it’s only grabbing the first word of my blog title instead of the entire name of the post when I go to pin it…any suggestions? My blog address is:
http://blog.clickimagery.com/

Thanks so much in advance! :)
~Amy

Reply

120
Tara May 1, 2013 at 1:11 am

Do you charge for adding the mouse over button? I can’t seem to get it to work for me. Thanks.

Reply

121
Ces May 9, 2013 at 4:25 pm

Great tutorial! I installed the plugin and it works great! Thanks! :)

Reply

122
Catherine Holt May 15, 2013 at 4:39 am

This is awesome, thank you. I have been looking at how to intergrate something like this for a while and this has worked perfectly. I have installed it and going to trial it to see if it helps people to PIN from my site. Thanks :-)

Reply

123
anar May 15, 2013 at 12:31 pm

Please, would you suggest how i can add such a button on weebly. thanks.

Reply

124
Ramakrishnan May 16, 2013 at 6:56 am

Thanks for this great tutorial. Gonna try this for sure in my blog. Thanks again

Reply

125
Bianca May 17, 2013 at 11:58 am

I followed the link to the blogger tutorial – I’m not an HTML gal AT ALL and I’ve got it uploaded onto my blog in less than 2 minutes. Thanks for sharing the link & the tutorial! I’ll be checking out your other blog resources.

Reply

126
@PamelaMKramer - A Renaissance Woman May 17, 2013 at 6:27 pm

OK – Now that is cool. I can’t believe I was able to customize mine. I don’t like the position so I have to go back and tweak the position but thank you!!!!

Reply

127
@PamelaMKramer - A Renaissance Woman May 17, 2013 at 6:32 pm

Found a problem. If you have images smaller and centered it moves off the image. ???

128
cathy May 19, 2013 at 3:26 pm

I wish I could get this to work…. it finally was able to save onto my html but it still does not add the pin button anywhere even when I mouse over my photos :( Im going to sadly have to wait for blogger to add it as an easy gadget, I am so bummed everyone else had no issue….

Reply

129
Shanna May 20, 2013 at 12:39 pm

This was so helpful to me just now — thank you for writing such a clear, easy-to-follow tutorial!

Reply

130
Athaya S May 21, 2013 at 3:12 am

Hey, I was just wondering if I want to do it on my blogger, where do I put it? Would it be possible to give the instructions then? THANKS xx

Reply

131
Heather May 23, 2013 at 2:13 pm

Definitely book-marking this for when our office sets up their architectural website. I have a Wordpress-hosted site. Does it work for that one too? Or just wordpress self-hosted?

Reply

132
Kelly May 25, 2013 at 1:37 pm

Thank you so much for this tutorial!! Found this link on Pintrest, of course, and thanks to this easy guide I was FINALLY able to get the button on my images!!

Thanks again!

Reply

133
Pamela May 28, 2013 at 11:11 am

Thank you so much Amanda. I have been searching for this ages ago. You are always detailed oriented which I love and truly care about sharing. Thanks again!

Reply

134
Vacation Advice 101 May 29, 2013 at 3:37 pm

Thank you so much! I have a vacation blog and pictures are the lifeblood of the blog. However, all my blog posts feature multiple images so this is a great solution to those wanting to pin single images.

Reply

135
Sita May 30, 2013 at 5:51 am

Does this work on Tumblr too?

Reply

136
Teresa June 6, 2013 at 12:26 am

Wonderful tutorial! If it wasn’t for this tutorial the plugin wouldn’t be installed as it was conflicting with a different plugin. With the editing, I was not only able to move the button, but customize the image. I will say that I backed up my original file and then edited the file directly on the server (no need to zip and reload the plugin). Thank you very much!

Reply

137
Kristin June 11, 2013 at 12:58 pm

Just wanted to say thank you for sharing! Super easy to follow, and now I’ve got a super cute custom Pin It button on all of my images. Thanks! :)

Reply

138
dee June 18, 2013 at 1:28 am

How about tumblr users?

Reply

139
liz June 19, 2013 at 2:40 pm

Hi Amanda! I tried using the blogspot totorial- but my blog is just empty after I save it….
any advice?
i posted the text on top of …. not sure what I did wrong.
thanks!

Reply

140
Kate (Lavender Collective) June 22, 2013 at 4:36 am

This is fantastic – I’ve been looking everywhere for this

Thanks so much for sharing :)

It works on my blog yay Lavender Collective Blog

Reply

141
Jessica June 22, 2013 at 3:15 pm

Thanks for the tutorial! Very useful :)

Reply

142
David Andrei June 23, 2013 at 4:08 pm

This is an awesome feature, but my question is if it’s possible to change the description of the image being pinned from just the title to something like title + link to the article. It would be awesome if you could help me with this. Thanks. :D

Reply

143
Jemma Taylor June 27, 2013 at 5:04 am

Hi thanks for sharing a great post I am just feeling my way with pinterest and this plugin will be of great help. I have tried to share photos on pinterest…., really nice and i also installed extension in my browser!!

Reply

144
Amy @ The Little Honey Bee June 27, 2013 at 10:25 am

Does adding a “pin it” button only work for Wordpress self-hosted blogs? Mine is not self-hosted (yet!)

Reply

145
Shani July 2, 2013 at 5:52 pm

Thank you so very much for this easy post. I was able to do this in a matter of moments.Awesome :-)

http://goosebumpmoments.blogspot.co.nz/

Reply

146
Nisha July 3, 2013 at 2:19 am

ummm i would need to use the blogger tutorial…thanks for sharing the link to bloggersentral, will try that out on mine!

Reply

147
Matt McVicker July 7, 2013 at 7:44 am

Should of known it was gonna be pretty simple. Thanks for the recommendation on a great plugin. Just installed it on my blog this morning!!

Reply

148
Shawna @DakotaCreekChic July 11, 2013 at 12:00 pm

Thanks for the tip…so easy!! Yay! Had to tweet about this one!
Shawna

Reply

149
Carly @mochihome July 18, 2013 at 12:27 pm

Thanks for this! Super helpful.

In the end, this plugin seemed to conflict with some of my other plugins. So, I ended up using this similar one: http://wordpress.org/plugins/pin-it-button/

So far so good. Also, if the “Title” field is blank in your image info, the button won’t work. So be sure to go in and fill that out…

Reply

150
Mand My Ordinary Outfit July 21, 2013 at 2:24 pm

Hey, it’s been days and days since i’m trying to get it right on my blog images but can’t find a way :(
The thing is : I upload my blog posts images via Picasa (through a picasa plugin) and not directly via wordpress . Maybe anyone could help me with that ? I’d be soooo incredibly grateful !
here is my blog :
http://www.myordinaryoutfit.com

Xo Mandy.

Reply

151
Melanie July 22, 2013 at 11:13 pm

Thank you so much! Worked perfectly!

Reply

152
Ned July 31, 2013 at 8:32 pm

Very VERY nice plugin! Very nice and very light weight. Love it!! Nice work!

Reply

153
laura@imnotatrophywife.com August 3, 2013 at 11:03 pm

It worked! The first time!!! Thank you! laura

Reply

154
Jenn @ Simblissity August 7, 2013 at 7:19 am

What do I think? I think I need chocolate chip lava cookies! :D

Reply

155
heather August 19, 2013 at 10:03 pm

Is there a way to make it work on a Wordpress.com site? There’s no plugins section on my Wordpress.com site. Thanks!

Reply

156
Amanda Jillian August 20, 2013 at 5:46 pm

The link for the blogspot one works great on my free blog but again using the plugin for my self hosted wordpress was a no go. Which is a same cause I like the pin it button it shows better than the only one I have found to work. Thank you so much for the link for the blogspot one!

Reply

157
Rachel September 3, 2013 at 5:29 am

I would love this feature. How would I do this for a Weebly based site?

Reply

158
Ivan Widjaya September 10, 2013 at 12:36 am

Hey guys,

Many, many thanks for the tutorial. I am making my site Pinterest-friendly, and your tutorial has helped me in boosting my image shares on Pinterest.

I like your round Pinterest rollover button – so I use it for my image, too – check it out: http://www.noobpreneur.com

Cheers :)

Reply

159
Ayan's Blog September 10, 2013 at 12:40 am

Great! I saw Pinterest in one of my favorite blog and I was like Ghoss! this stuff is so good. Actually, I wanted to say that the P sharing icons that appears on your blog images are much better. It’s kinda stylish like your blog and I like it.

Thanks, I really appreciate…

Reply

160
Sharon September 13, 2013 at 7:41 am

Wow, thanks. Your tutorial was easy enough for this noob to understand! My nerd kids keep telling me I need to learn html – ha ha. Oh well, very thankful for people like you who can assist with these great tutorials. I even figured out how to place my own custom Pinterest button!! Come on – somebody high five me already!?! LOL.

Reply

161
Erin @ The Spiffy Cookie September 13, 2013 at 10:12 am

I successfully installed this widget but have been getting complaints because it also appears over my print/pdf friendly button causing people to be directed to pinterest instead of printing or saving the recipe. How do I prevent it from appearing on tiny images like that?

Reply

162
Amanda September 13, 2013 at 12:19 pm

Hi Erin!

You can try adding a piece of code to your print button image like this:

class=”nopin”

So right after where it says

add the code so it looks like this

Then in WordPress, go to your Settings />Pinterest Pin It then look under Advanced > Exclude classes and confirm that nopin is there.

This should make the button not appear on your print button image.

Hope this helps!

163
Erin @ The Spiffy Cookie September 13, 2013 at 12:45 pm

I found that code but cannot figure out where to add it for my print button, since I use a widget to form the print button as well. I tried digging through the html formatting but it’s a bit confusing haha.

164
Sarah September 29, 2013 at 9:09 pm

This is an awesome post! Thank you so much for the helpful tips!!! This is very useful!

http://www.buttercreambakers.com

Reply

165
Ananda October 2, 2013 at 2:33 pm

Great Post! I just followed your instructions, changed the icon for the one I wanted and it worked!
THANK YOU!!!

Reply

166
Jenny October 3, 2013 at 11:41 pm

For some reason, the file I downloaded is only a folder and there is no .zip file inside. Any suggestions?

Reply

167
Jenny October 4, 2013 at 12:02 am

UPDATE: While logged into my Wordpress account, I was able to search for the plugin and get it uploaded, but I can’t find out how to get the logo on each of my images. There is no Settings/Pinterest Pin Button option or anything. I’m sort of stuck!

168
Amanda October 13, 2013 at 10:03 pm

Like Shelby’s comment above (april 16), my ‘pin it’ button will, too, only show up if I hover the mouse over the top right corner of the image where the button shows up – is there a way to fix this? I’m not sure why that’s happening…. thanks!

Reply

169
Helga October 17, 2013 at 10:46 pm

I have tried to do this a few times and can not get it to work… I am using a Mac and have a WP website… any suggestions? :)

Thanks :)

Reply

170
The Gifted Gabber October 19, 2013 at 10:25 am

This tutorial was so very helpful! I have searched and searched and tried several other tutorials to no avail. Thank you!
At a blogger’s conference I attended last month, your name and blog were mentioned by one of the presenters. It seems you are quite the big deal in the blog world. :)

Reply

171
Jamie Snyder October 23, 2013 at 9:45 am

Amanda,

Once again you have been super helpful. I saw this post when it first came out and I was not actively blogging. I am now and went back and used this post. I also found on their support page that you can make it so when it posts to Pinterest it will use the title of your image instead of the title of your post. Here is the link. http://wordpress.org/support/topic/display-the-title-of-the-image
Hope you find it helpful. I was able to get it to work on my site. Now I am off to figure out how to center my pinterest logo when hovering. :)

http://www.Snyderiffic.com

Reply

172
Kay @Kays Little Korner October 24, 2013 at 3:58 pm

I love your tutorial, however, that plugin is not tested on the most recent version of WP. I was wondering if you had played with the jQuery plugin and could that one be customized? Or any new plugin you would recommend for this effect now?

Reply

173
Sol de Dezembro November 11, 2013 at 3:39 am

This tutorial is exactly what I was looking for.
However, I can’t find the Plugins in my wordpress dashboard…

Reply

174
onel November 29, 2013 at 5:24 pm

Thanks a lot for the tutorial! The hover button works like magic! :)

Reply

175
Darcel {The Mahogany Way} December 3, 2013 at 12:51 pm

I just did this and it worked! I love it! Thanks so much for the quick and easy tutorial.

Reply

176
Brittnee December 6, 2013 at 12:21 am

Thanks so much – this was REALLY easy! Got my blog up and pinning in like 5 minutes! THANK YOU!!!!!

Brittnee
http://beautyproductaday.blogspot.com

Reply

177
Goldi December 27, 2013 at 8:23 pm

Hi there!
THis was one of the easiest things I’ve been able to do! Great, simple tutorial. I just have one problem. WHen I activate it I get this message : “Your maximum image width is thought to be 1024 pixels. This might be incorrect and might affect the functionality of the Pinterest Pin It plugin. Please check the plugins settings.”
I haven’t a clue how to find out my max width! Do you know how I can find that out? Obvi Im new at this wordpress thing!
THank you!

Reply

178
Cassie January 4, 2014 at 9:34 am

Thank you so much for this! I was having trouble finding how to add the pinterest pin it for images for Wordpress. Was only finding blogger info. This worked great! Thank you for your help :)

Reply

179
Gurvy Green January 16, 2014 at 12:54 pm

Thanks for the tutorial. I am running a self-hosted blog on wordpress.com and do not have a plug-ins option on my dashboard. The widgets I can use are also limited to their selection. Hoping you can help me navigate another option to include the Pinterest hover button. Thanks!!

Reply

180
Gurvy Green January 22, 2014 at 2:33 pm

Hello, thank you for giving clear steps on adding a hover it pinterest button to my images. I run a self hosted blog on wordpress.com and I don’t have a plug ins option on my dashboard (anywhere), I have a select few to choose from in widgets and any other items I add I use the html code and place it into a text box. Can you please guide me through steps on how I can include this Pinterest hover button on my images. Much appreciated!

Reply

181
Ashley Rowe January 31, 2014 at 11:44 am

I just deleted my plugin that added the “pin it” button to the bottom of my posts. I was hoping this would work for me, but doesn’t seem to. I installed and activated it, but I don’t see the button on my images when I hover over them. Super frustrating. Any ideas?
Thanks so much!

Reply

182
Jordan February 18, 2014 at 1:32 pm

I CANNOT find the “body” tag( trying to add this to my blogger page) I am looking for! Is there a way to search for it..it’s step 1 and I can ‘t seem to find it :(

Reply

183
Kashis Boutique March 16, 2014 at 4:36 pm

So what if we don’t use wordpress? Is there a way for Blogger?

Reply

184
Bri | Bites of Bri March 20, 2014 at 3:15 pm

Thanks for this tutorial! I’d been trying to figure this out for a few weeks and your tutorial helped me through it in just a few minutes.

Reply

185
Laurrita March 25, 2014 at 11:25 am

Hey, thanks! Amazingly helpful post…

Reply

186
Michelle March 31, 2014 at 7:34 pm

I really like the idea of having the pin it button on all images for easy pinning/sharing but when I installed it, some of my larger images (which had been reduced to a smaller view on the pages) were reset to their original HUGE size… Is there a workaround about that?

For now I’ve deactivated the button and left the original pin it button I had on the pages…

Thanks!

Reply

187
Joanne Mason April 1, 2014 at 12:42 pm

Any step by step process for Tumblr users? I have been wanting to add this feature to my blog but can’t find a sufficient tutorial.

Appreciate any help you can provide:)

Joanne

Reply

188
Jenniemarie @ Another Housewife May 17, 2014 at 1:09 pm

Thank you for helping me accomplish my goal today in a matter of minutes. A quick google search led me to you and because I have a self hotsed word press blog it took me literally seconds to add the plug. Thank You

Reply

189
Ferry Bachtiar May 26, 2014 at 3:09 pm

Nice article.
Thak you very much :)

Reply

190
Emily July 14, 2014 at 5:19 am

Thank you for this easy tutorial! Just read someone else’s post about the same exact plugin but they were instructing to change the code for EACH picture. This is much easier–Thank You!!

Reply

191
Shannon August 29, 2014 at 12:03 am

Okay so question… I used the blogger tutorial about a year ago but noticed recently it has two “pin it” buttons showing up. I was able to remove the one but not the other. I tried going through all the code to see if I had missed some and no luck. I was going to comment on the original tutorial but he closed the comments section. Any ideas on why I am not able to get rid of it?? Any help would be oh so appreciated! Thanks!!!!

Reply

Comment Pages: « Previous12

Leave a Comment