Pinterest Pin It button on image hover

Due to numerous requests from our readers, here we present yet another Pinterest pin it button widget. This time a button that appears when you mouseover or hover any image in your posts.

Pinning an image just got easier and more intuitive with this hover button. First you decide which photo to pin, then hover it to invoke the pin it button, and finally click on the button that appears on the image.

This hover button combined with Pinterest skills and strategies will definitely help you generate traffic and gain brand exposure.

Use the photo below as a live demo. Click on the button and see how the pinning works.

pinit button on image mouseover hover

Below are some of the features of the Pin It button on hover widget:

  • Auto pick up the correct post title and post URL. It doesn’t matter if you pin it from a post page or from a multi-post page (e.g. homepage).
  • Auto fill in the pin description with the title of the post.
  • Can opt to use your own button. Make your own bigger, cooler pin it button or you can get free Pinterest buttons here.
  • [Added 21 Nov 2012] Select your preferred button position (relative to the hovered image) from five available positions.
  • [Added 22 Jan 2013] You can now prevent the button from appearing on certain photos.
  • [Added 15 Feb 2013] You can now add your own text as prefix and/or suffix to the post title in pin description. This is in response to readers asking to add their blog title to the pin description.
  • Cross-browser compatible -works on Firefox, Chrome and Internet Explorer (albeit in a slightly different manner) too.
  • Should work on most Blogger, WordPress and Typepad templates. It doesn’t work on Blogger Dynamic Views or mobile templates though.

[Mar 21 2013] Replaced backlink with attribution comment.
[Jan 21 2013] Fixed this bug: Pinning doesn't work if a page is entered via the "read more" link i.e. the post's URL has "#more" at the end.

Let’s proceed with the tutorial,

  1. Blogger: Go to Template > Edit HTML.
    WordPress: Go to Administration > Appearance > Editor > footer.php.
  2. Locate the </body> tag near the bottom of the template.
  3. Copy the code below and insert it right above the tag.
    <script>
    //<![CDATA[
    var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
    var bs_pinButtonPos = "center";
    var bs_pinPrefix = "";
    var bs_pinSuffix = "";
    //]]>
    </script>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
    <script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
    // This Pinterest Hover Button is brought to you by bloggersentral.com.
    // Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
    // Feel free to use and share, but please keep this notice intact.
    </script>
    
    • Code line 7 9 is for loading jQuery library. Remove this line if you’ve already loaded it somewhere else in your blog. Hint: If your blog has an image slider, carousel or something with fading effect running, chances are it is powered by jQuery. If this widget doesn’t work, the first thing you want to do is comment out or remove this line.
    • To use your own button, replace the URL in line 3 with the direct link URL to the image. Make sure to keep the quotes.
    • To reposition the button, replace center in line 4 with the new position as listed below:
      • topleft
      • topright
      • bottomleft
      • bottomright
    • [Added 22 Jan 2013] To block the button from appearing on an image, assign “nopin” class to the image tag, like this:
      <img class='nopin' height="391" border="0" width="400" src="http://1.bp.blogspot.com/-YCbNO9wFQrQ/UPrZegPAXVI/AAAAAAAACK8/b7p-0NuZScI/s400/photo.jpg">

      You can also block it from multiple images at once. Simply wrap the image tags in a div tag and assign “nopin” class to the div, like so:

      <div class='nopin'>
      PUT IMAGE TAGS HERE
      </div>
    • To add a prefix/suffix to the pin description, simply add your text inside the quotes, like so:
      var bs_pinSuffix = " by Blogger Sentral"; 
    • Do not alter the code other than the URL and the position of the button.
  4. Save, view your blog, and start pinning.

Enjoy!

Follow me for more for more Pinterest tutorials.

172 comments to "Pinterest Pin It button on image hover"

Christophe Rigaud November 21, 2012 at 1:39 PM    

Hi, is it compatible with dynamic template?

Greenlava November 21, 2012 at 1:57 PM    

@Christophe Rigaud
Not it isn't.

Window cleaners West London November 21, 2012 at 2:55 PM    

Is this only compatible with static temples? Do you have any suggestions for dynamic temples?

ARBAL November 21, 2012 at 3:28 PM    

Very interesting solution. But would it be possible to determine the position of the button? So that was not in the middle of?

Matteo Cuzzola November 21, 2012 at 4:46 PM    

Perfect !!!!
Thanks !
Matteo

Greenlava November 21, 2012 at 8:00 PM    

@Window cleaners West London
Sorry no suggestions for Dynamic templates.

@ARBAL
Godd news, I've added the button position options :)

Lynn@ The Vintage Nest November 21, 2012 at 10:10 PM    

love it! thank you

Analyst November 22, 2012 at 1:24 AM    

Your all suggestions are implementable and can be easily executed by a novice. Keep doing great job for Blogger community.

Regards
Indian-Share-Tips.Com

Tricks Central November 24, 2012 at 2:07 AM    

Thank you for the widget!

Moonbeam November 27, 2012 at 1:51 AM    

Upon finding your site, I have been able to execute many of the additions and improvements sought after for months - in less than 24 hours! Thank you for the clarity and ease of the tutorials. I know now, that my webpages and blog sites will become successful - due to the effort and time you have spent imparting information to non-techies like myself!

Britax Car Seat November 28, 2012 at 6:25 PM    

I heard that widget before two weeks ago, but I couldn’t try it. I want to pin some images and do the hover thing for them, so I can use your tips to do it.

adrian lucernas November 29, 2012 at 3:36 PM    

Hello if i want to show this only in every post,,not in the home page..how to do? is it possible?
and can you help me about that?

Thanks:
BLOGGER Tips and Tricks!

Greenlava November 29, 2012 at 3:49 PM    

@adrian lucernas
Simply wrap the code in a post page conditional tag, like this:
<b:if cond='data:blog.pageType == "item"'>
PUT THE CODE HERE
</b:if>

Birds Party November 29, 2012 at 7:12 PM    

Hi for some reason the code works ok only on the first image of the post. When view the full post and I try to pin the other images, the button does show up ok, BUT it does not pick up the image nor description. I tried wrapping as suggested in the comment above, but it still did not work!

Please see what I mean here: http://www.blog.birdsparty.com/
Any help please?

adrian lucernas November 29, 2012 at 7:37 PM    

Thank You,, is it okay i will repost this to my site BLOGGER Heroe i will give a credit to your site,,if your ok let me know..thanks..because i really like this widget..

Loving Lunches November 29, 2012 at 8:38 PM    

That's super easy - thank you! Just have a problem with it not working properly - when I click on the 'pin' it takes me to a new tab & brings up the pinning stuff, but no picture. . . ? I've tried removing the line 7, but that removes the pin button too.
I'm rather un-techy so any advice much appreciated.
I've left the code in there - lovinglunches.blogspot.com.au

Greenlava November 30, 2012 at 4:05 PM    

@Birds Party
It does work on your blog, I tested it.
The button will be active once your page finished loading (images and all). Hovering while page is loading will not work.

Greenlava November 30, 2012 at 4:16 PM    

@Loving Lunches
It's working fine from here.

Loving Lunches November 30, 2012 at 9:25 PM    

@Greenlava - thank you - must have been my laptop (or me) misbehaving
Thanks again! Great tutorial/instructions :-D

Birds Party December 2, 2012 at 12:53 AM    

The button is active when I hover on any image - that is not the issue. The problem happens when the pin button is clicked (for ANY images on the post OTHER THAN the first image) it doesn't work i.e. a blank square appears without any description.

Any thoughts?

Tok Puteh December 4, 2012 at 10:07 AM    

terima kasih bro beritau pasal bounce rate tu.... :)

Mellie Cay December 4, 2012 at 7:44 PM    

I think what they're trying to say is that the code works fine on the main page, but not on each individual page. I'll use my blog for example:

http://www.beautytribune.com/ --> pins work great!

But on each individual post:
http://www.beautytribune.com/2012/12/found-new-wet-n-wild-fergie-centerstage.html

The pin hover doesn't work. Any suggestions?!

Mellie Cay December 4, 2012 at 7:47 PM    

ooooh I figured it out!!

It's when the #more is attached to the link that the code doesn't work!
http://www.beautytribune.com/2012/12/found-new-wet-n-wild-fergie-centerstage.html#more

Lisa @ Charlie The Cavalier December 10, 2012 at 6:50 AM    

Got it. Thanks, quick, simple, and easy directions!

Christina O December 10, 2012 at 11:32 PM    

This is fantastic. Thank you so much for the code! I especially love that people can now pin from the home page, but the link will go to the individual post. Nice work.

Personally though, I would prefer for the pin description to auto fill with my image title + blog name. Maybe in a future code for us?

Loretta E. December 12, 2012 at 10:18 AM    

Thanks so much for this! I know almost nothing about tech matters and I could easily understand...

Tiffany Le December 12, 2012 at 3:11 PM    

This was amazing. All the other tutorials I read looked much much harder.

LUCE December 18, 2012 at 3:49 AM    

This is so cool! thank you!!

Eva Black December 20, 2012 at 3:17 AM    

Is there a way to hide this on specific static pages?

Greenlava December 20, 2012 at 1:26 PM    

@Eva Black
You can hide it using a Blogger conditional tag. Read about it here: Targeting specific pages/URLs with conditional tags

Amanda - RunToTheFinish December 22, 2012 at 12:07 AM    

Love your straightforward tutorials. I can't seem to get this to work on my site. I don't believe my template is dynamic though I have certainly made updates to the site.

I pasted it right before the body tag, any other thoughts?

http://www.runtothefinish.com

dani-kittenbear December 22, 2012 at 10:58 AM    

Is there a way to lower the image opacity when you hover over the image to make the button stand out more?

Greenlava December 25, 2012 at 10:10 PM    

@Amanda - RunToTheFinish
You have line numbers in your code, causing the code to break. Please read the FAQs for the proper way of copying codes from our tutorials.

@dani-kittenbear
That's not possible right now :(

Christine December 30, 2012 at 8:54 AM    

Do you have a WordPress version? Also, can you create your own Pinterest Pin description for each image or does it only use the post title as the Pin description?

Greenlava January 2, 2013 at 1:12 AM    

@Christine
It should work on most WordPress themes.
Yes, it uses the post title by default. You can change the description manually at the time of pinning though.

Fathima K January 3, 2013 at 7:57 PM    

Thanks so much for this! Really don't like the others, a hover works so much better. The Pinterest image comes up really massive and pixelated, even when i tried my own small image... how can I make it come up at its original size?

Erika Lauren January 4, 2013 at 9:10 AM    

Thank you so much for posting this code. It was so easy to install and works perfect! I love it.

Nik,  January 4, 2013 at 11:24 AM    

This is the exact thing I'm looking for, but I can't get it to work. I'm generally pretty good with this kind of stuff. The code doesn't seem to be having any effect on my site.

Can you take a look, here is a test page on my site: http://countrydecor.org/gallery/?p=272

Thanks

Fathima K January 8, 2013 at 2:27 AM    

Thanks so much for this! Really don't like the others, a hover works so much better. The Pinterest image comes up really massive and pixelated, even when i tried my own small image... how can I make it come up at its original size?

Sabrina @ loulousucre January 11, 2013 at 8:43 AM    

Thanks so much!! This was the easiest tutorial ever!!

Anonymous,  January 12, 2013 at 1:07 PM    

Any way to get "get this from bloggersentral" removed?

I know its a source thing but it doesn't look professional on my site.

I googled pin it hover button and your site came up first. I'm sure people can still find it.

Celyx Lim January 12, 2013 at 3:54 PM    

Thank you very much for this great post! Just added it into my blog and it works perfectly fine! Thank you very much!!

Although there's some personal thoughts that I thought could improve this button a little better:

1. Decrease its size a little more - I placed this button on the bottom right of every image and it looks quite huge. Maybe you guys could alter its size and let the bloggers to choose on suitable sizes that they would like?

2. Opacity - The button is opaque, which I personally think its too opaque lol. Maybe adjust is opacity too?

These are my personal thoughts. But overall, I am really happy with this button. Thank you for the great work! :)

http://celyx.blogspot.com

Greenlava January 12, 2013 at 9:29 PM    

@Fathima K
There is a CSS rule in your template that resizes post-body images to 550px. You need to remove that rule.

@Anonymous
Ok you win, for now :)
I've replaced "get this from bloggersentral" with "Pin on Pinterest".

@Celyx Lim
1. You can replace the button with any image, of any size. Please reread the tutorial.
2. To adjust the opacity of the button, add this rule in CSS:
.pinimg {opacity:0.4;filter:alpha(opacity=40);}
replace the values with your own.

Shanna January 12, 2013 at 11:25 PM    

Worked, thanks so much!

Fathima K January 15, 2013 at 12:56 AM    

@greenlava Thanks so much for your feedback, working perfectly now :)

Zaira Brilhante January 15, 2013 at 6:31 AM    

Hi! Thanks for sharing this code!
I was wondering if instead of using the post title, I could change it to use my alt text, so that I could have different text for different images on the same post... Is that possible?

Also, if I want certain images on my blog not to have the effect, is that a line of code I can add before them to stop it?

Thanks again, best!!!
Z

Shannon :: The Scribble Pad January 16, 2013 at 2:49 AM    

Two questions, I prefer your button choice, but would like to make it slightly smaller - say 60% of the size - is this an option?

Also, is it possible to change the default caption to be:

blog name: post title

??

Thanks,
Shannon

Jennifer from The Craft Patch January 16, 2013 at 2:49 AM    

Hmmm...couldn't get it to work for me. I have the Simple blogger template and added it in right above the body tag like you suggested. I also removed line 7 as suggested. Any suggestions?

thecraftpatch.blogspot.com

kelly thompson January 16, 2013 at 3:53 AM    

ok, I am new at this and dont know exactly where in HTML to put this= how do I find the body section, thanks

Allie Gower January 16, 2013 at 1:20 PM    

thanks, this worked beautifully!

Tracey Schumacher January 16, 2013 at 9:00 PM    

Perfect! I love this!!! Thank you :)
Tracey
The Teacher’s Chair

Fry January 16, 2013 at 9:35 PM    

Hi, like Fathima above, i add CSS to my template that resize post-body images to 700px because i want all the images on my blog to have the same size automatically.
So can you suggest me how to make the pinterest button to be small like how it supposed to, but still make all images on my blog to have a same width.

Mariel Collins January 17, 2013 at 1:02 AM    

It won't work for me at all can you please help:(

Mindy January 17, 2013 at 10:46 AM    

Worked for me. Thanks a zillion.
I found your post through a post The Weekend Homemaker did today.

SueSue January 17, 2013 at 8:17 PM    

love it, was so easy!

kelly thompson January 18, 2013 at 1:37 AM    

ok, i thought i was ok till you said dont alter except the url and the location....so do I change your bloggersentral to my own url and if so where do I add axactly....thanks

Greenlava January 18, 2013 at 2:58 AM    

@Zaira Brilhante
That's not possible with the current script.

@Fry
Try adding this rule in CSS:
.pinimg {width:72px; height:auto;}

@Shannon :: The Scribble Pad
The proper way to shrink the button is by downloading it, resize, reupload, get the URL and then use the new URL in code line 3.
The less proper way is by adding this rule in CSS:
.pinimg {width:45px; height:auto;}
less proper because it may cause the button to misalign slightly.

Greenlava January 18, 2013 at 3:24 AM    

@Jennifer from The Craft Patch
You need to put line 7 back, then let me know so I can check your live code.

@kelly thompson
Use your browser search feature: Press Ctrl+F keys, enter </body> (or /body)in the search box and hit Enter key to start searching.

@Mariel Collins
It will work if you use the code in step 3.

Alexis AKA MOM January 18, 2013 at 10:15 PM    

Thank you so much for all these codes for pin it!

Mollie Bylett January 19, 2013 at 8:15 PM    

Hello!
This post is amazing thank you...I have even managed to adjust the HTML so that the pin it appears on the homepage! (New to blogs!)
Only little issue i have it that the pin it link/widget appears lower than the others, would you please be able to suggest how to adjust it so that it is too, horizontal?
http://molliebylett.blogspot.co.uk/
thank you!

Greenlava January 19, 2013 at 8:53 PM    

@Mollie Bylett
I believe you're in the wrong post. Please re-post your question in the other post, I'll answer there.

Lisa Ancarrow January 20, 2013 at 1:20 AM    

Yeah - it worked beautifly - thanks for the great code

Mandi @ Vintage Revivals January 20, 2013 at 3:44 AM    

I am DYING over this AMAZING tutorial!!! Great job you guys!! My question is one that was mentioned about but not resolved. My post have #more at the end of my URL and the code doesnt work once you click in via the "read more" link. Is there anyway to fix this? Thanks!!!

love your guts
mandi

Simone Jaeger January 20, 2013 at 5:08 AM    

thanks for this great and perfectly straightforward tutorial, the code works fine on my blog! :)

whitney @ thecurtiscasa January 20, 2013 at 10:25 PM    

I was looking everywhere for a tutorial on this! Thank you!
One question - After adding my custom Pin It button, it seems to make the image (when you hover over) move over one space to the right. Every image, on the first time you hover over it. Then the image stays in that scootched-over position for the remainder of your time on my site. Do you know why this happens? Or how to stop it? It doesn't seem to be happening on your test images.
Thank you!
Whitney
www.thecurtiscasa.com

Greenlava January 21, 2013 at 1:47 AM    

@Mellie Cay
@Mandi @ Vintage Revivals
Apparently Pinterest doesn't like URL fragments (e.g. #more). Anyway I think I've got the bug fixed.
Please check.

Zaira Brilhante January 21, 2013 at 2:51 AM    

Hi, sorry to ask it again, but what about the second question. Is there a code I can add before certain images to stop them having the hover effect?

Neely January 21, 2013 at 3:00 AM    

Hi. I tried adding social media buttons to the bottom of my blog from sharethis.com. When I did this, it made the hover disappear. I tried removing line 7 and the hover is still gone. When I remove the code for the social media buttons, the hover comes back. Is there any way to have them both on my page at the same time? Or will I just need to remove the code for the buttons at the bottom of my post if I want the hover?

Thank you. :)

Do you get any sort of notification when someone pins one of your pictures/posts?

Mandi @ Vintage Revivals January 21, 2013 at 5:48 AM    

FIXED!! I dont know how you did it but I am SO grateful!!! xoxox

Natalie January 21, 2013 at 8:01 AM    

great post--just tried to do this but got the following message when i previewed the post and put the mouse over a picture: Pin It On Hover Widget: Please restore the backlink

any idea what i need to do? thanks!

Nat January 21, 2013 at 8:03 AM    

Thanks for such an easy tutorial!

Christi Fultz January 21, 2013 at 1:00 PM    

Would there be any reason this displays sometimes, but not always? For example, right now I can see it on "older posts" page 2, but none of the rest. Sometimes it doesn't load at all.

www.msfultzscorner.com

Greenlava January 22, 2013 at 1:41 AM    

@Zaira Brilhante
No, there's no option for that right now. I'm thinking about it though.

@Curtain Up Cookie Design
No.

@Natalie
That happens if code line 10 is removed.

Is there a way to add text to the Auto text of the pin? I like that it auto picks the name of the post, but I would also like the name of my blog to automatically be included in every pin.

Michelle {The Purple Pumpkin Blog} January 22, 2013 at 4:14 PM    

A nice and easy to follow tutorial...but it's not working for me on my blog: The Purple Pumpkin Blog

I get the hover button, but when I go to pin the image and description is blank - have tried removing the ajax line, doesn't work, so put it back in...any thoughts?! Thank you :)

Peter Learoyd January 22, 2013 at 6:05 PM    

Thanks very much for this. Works a treat.

Greenlava January 22, 2013 at 8:18 PM    

@Michelle {The Purple Pumpkin Blog}
It should be okay now.

Michelle {The Purple Pumpkin Blog} January 22, 2013 at 10:20 PM    

@Greenlava - thank you very much - indeed it is working...thank you (whatever it was that you did!) however, one weird thing, before the description of all of the pins it puts a "0"...what do you think might be causing that??

I'm so glad you helped me to get this to work - I LOVE it!

jiff0777 January 22, 2013 at 11:08 PM    

I had it with the previous template. but with the new template, it works only on the home page. not on the post page. Help plz... www.spicytec.com

boyishchic January 22, 2013 at 11:52 PM    

Hi!

I love this tutorial. Thank you. My question is: right now only my post title shows up in the Pin It stage. Is there a way to get it to be - blog title, blog post title? I'd really prefer if the blog title was in the pin!

Thanks!!

Melissa SerendipityandSpice January 23, 2013 at 10:47 AM    

Thank you! I'm an airhead when it comes to HTML! This is going to make life so much easier! But, I can only get it to work on my first page- it won't work once I go to the page of the post I want to pin. Is there anyway to get the code on all the pages...easily?

Life etc... January 23, 2013 at 3:04 PM    

I'm having the same problem as an earlier commenter - the Pinterest button is coming up huge because I have my photos set to autosize. Any way I can fix this without removing the CSS code that adjusts my photos? Blog is: life-etcblog.blogspot.com.au

Thanks!

Becky January 23, 2013 at 11:38 PM    

Hi! I've added the code to my blog, but can't seem to get it to work. I've tried removing line 7 and I've waited for all pictures to load. Any way you could help me figure out why it's not working? Thanks!! http://thetwobiteclub.blogspot.com/

Amanda January 24, 2013 at 3:46 AM    

Thanks so much for this, I am so excited about it. I just have a question about one of the above comments. I am trying to make it so you can see the hover-over on the actual post and not just the homepage. When you say this:

Simply wrap the code in a post page conditional tag, like this:

PUT THE CODE HERE


Does that mean just add those two lines to the beginning and end of the codes and paste it in the same place (above body)? Or am I putting that somewhere else in addition to the code I added over the body tag? Does that make sense? Sorry I'm an idiot.

Greenlava January 24, 2013 at 10:25 PM    

@Michelle {The Purple Pumpkin Blog}
0 is the number of comments, from the comment bubble incorporated in your post title.

@jiff0777
I see jQuery library called twice in your source code.
You need to remove line 7.

Greenlava January 25, 2013 at 4:29 AM    

@boyishchic
There no way to do that automatically at this point. I guess you have to ad it manually every time you pin.

@Life etc...
Read my answer to Fry in reply #57.

@Amanda
That's right, "just add those two lines to the beginning and end of the codes and paste it in the same place".

Greenlava January 25, 2013 at 4:35 AM    

@Becky
The value for bs_pinButtonPos should be "bottomright", not "bottom right".

Amanda January 25, 2013 at 7:03 AM    

Thank you!!!

Jennifer @ Dimples and Tangles January 25, 2013 at 12:01 PM    

Thanks for a super simple tutorial! I love this feature and easily added it to my blog. Will be sharing and linking to your post if that ok with you.

Durai sankar January 25, 2013 at 2:43 PM    

I am searching for this codes for many months.finally I found this in your blog.thank you very much:)

Jacolien January 25, 2013 at 11:52 PM    

I'd love to get this on my blog, but it doesn't seem to work...
I followed your instructions.
I found the /body and pasted the code above that tag.
Saved it and it doesn't appear on my pictures.
Can you help me out?

Jacolien January 25, 2013 at 11:54 PM    

Oh, nevermind. it seems to work...

Greenlava January 26, 2013 at 12:21 AM    

@Jennifer @ Dimples and Tangles
Thank you for sharing this post with your readers :)

Michelle {The Purple Pumpkin Blog} January 28, 2013 at 3:16 AM    

Ah, thanks - that makes sense now, since I saw some with different numbers! Probably no way to get rid of that, unless I get rid of the bubble right?

Hoping pinners have the sense to remove the rogue numbers!!

Anna @ IHOD January 29, 2013 at 12:09 AM    

Loved this tutorial - thank you! I installed and it worked perfectly, but when I put a link up party today on the blog, the pin it hover button was blocking the thumbnail links from working (see example here: http://inhonorofdesign.blogspot.com).
Is there a way to install it and manually block it from appearing on certain images? The code you shared above is not the type of html that appears in my post.

Your code suggestion above class= 'nopin' does not work on my images because the code is not the same as your example.
My image code does not include size specifications. I would paste the code to show you but it won't accept it in the comments section.

Thanks in advance for the feedback!

Dean,  January 29, 2013 at 2:09 AM    

Hi,
I have tried this and it works in ie and firefox but not chrome...pls help?

Unknown January 30, 2013 at 8:22 AM    

Hi There! Thanks for the tutorial... Got it to work last night and then this evening, its back to showing me a question mark instead of the "pin it" button I selected. I then tried to copy and paste your code with the Pinterest red button your provided and I'm getting the same results... Any help?

Thanks, Lisa

Becky January 31, 2013 at 1:25 AM    

Amazing. Thank you so much. I adjusted the opacity as well and it's perfect! You rock!

Oeendree Mukherjee January 31, 2013 at 4:35 AM    

Thank you so much! It works!!! Was looking for this since ever...

<3 from: www.thedocndiva.com

Greenlava January 31, 2013 at 10:42 AM    

@Anna @ IHOD
Try this:
Put your linky script in a div tag and assign "nopin" class to the div, like this:
<div class='nopin'>
PUT LINKY SCRIPT HERE
</div>

Kristin @ Simply Klassic Home January 31, 2013 at 12:55 PM    

Thank you so much for the fabulous tutorial! I've got it working on my blog great, but when you hover on the picture, the pin it button doesn't go away, like I see your do. It just stays on the image. Any way to fix that?

Kriztine January 31, 2013 at 4:57 PM    

Hello! Excellent tutorial! It's working on my site!
But, when you click OLDER POSTS, the PIN button doesn't show.

Sample link when OLDER POSTS is clicked --> http://www.kurizutin.com/search?updated-max=2013-01-23T22:16:00%2B08:00&max-results=7

Regards,
Tine

Kriztine January 31, 2013 at 5:14 PM    

Hello again. Thanks for the great job. But it doesn't seem to work in IE (version 9 I think). It's displaying a script error when the mouse is hovered in the image. I asked my friend to check it on his PC, he's also seeing the script error.

Photonica January 31, 2013 at 6:09 PM    

Hi!great tutorial, but I would like to open Pinterest in a Pon Up, how can I do?

lake shore lady February 1, 2013 at 9:46 AM    

This is AWESOME. So easy!!

www.lakeshorelady.com

Becca Acker February 3, 2013 at 5:21 AM    

THANK YOU! I knew there had to be an easy way to have a pin-it button, but had no clue. THANK YOU so much! So excited! :D

lauralevydesigns February 3, 2013 at 6:14 AM    

i love this, thank you so much! one question, is there a way to use a smaller icon? this one is a little big for my images.

thanks!

karatootie February 3, 2013 at 1:12 PM    

thank you! thank you!! thank you!! I have been messing with jquery code for months...and you made it so simple!! Hugs, Ingrid

Kim @ design + life + kids February 3, 2013 at 1:38 PM    

I can't get this to work... can you help? Here's the error message I receive: Error parsing XML, line 7, column 2: The markup in the document following the root element must be well-formed.
Save templatePreviewClear editsClose

Kim @ design + life + kids February 3, 2013 at 1:45 PM    

disregard! i figured it out, i was putting the code in the wrong spot.
however, how can I get the 'pin it' window to open in a small mini window instead of a separate big window?
Thanks so much!

NotRachaelRay February 4, 2013 at 1:30 AM    

Thanks--it's looking great and I love it!

Lisa Lara February 4, 2013 at 8:10 AM    

Thank you so much. awesome. I did it.

Debbie Booth February 5, 2013 at 10:42 AM    

Can't believe it but I just did it! Your directions were very clear and made it simple. Thanks so much!
Debbie

Goldenberry February 6, 2013 at 2:36 AM    

I followed every steps but it just doesn't want to work on my blog ! Though, I'm using and old and classic blogger template.
Any suggestions ?
THANK YOU

Goldenberry February 6, 2013 at 2:37 AM    

Ok leaving you a comment just make the magic happens !
It works so THANK YOU :, your code made my day!

Janet Perafan-Babar February 6, 2013 at 4:52 AM    
This comment has been removed by the author.
Ali @ JamHands.net February 8, 2013 at 3:51 AM    

Thank you so much for this code. It looks gorgeous and was super simple to install. Thank you!

FranklyBecca February 8, 2013 at 12:47 PM    

Just added this to my blog, but I was wondering is there any way I can edit the text that automatically goes on the pin to include my blog name?

LatteLisa LisaHjalt February 9, 2013 at 3:58 PM    

I have been using this code on my blogs and it works perfectly, thank you very much.
I have one question. Is it possible to let the photo + description appear in a pop-up window instead of a new window when pinning a photo?

ohcikgu February 10, 2013 at 1:30 PM    

this is nice. Thank you. :)

Carrie @carrieloves February 11, 2013 at 11:56 PM    

ridiculously awesome! thank you so much :)

Kristine Wittenbols February 12, 2013 at 5:06 AM    

The pin works great on my computer but I tried it on a much larger screen at work and my custom pin it button is "outside the picture" as opposed to the right corner of picture...Any suggestions how I make that happen?

www.thegirlandthefrills.blogspot.com

Carrie @carrieloves February 12, 2013 at 8:27 AM    

I was wondering if instead of using the post title, could it use the alt text... Is that possible?

ⓜⓔⓔⓝⓐ February 12, 2013 at 9:42 AM    

That is so cool! Thank-You!

Greenlava February 13, 2013 at 6:44 PM    

@Kim @ design + life + kids
@LatteLisa LisaHjalt
@Carrie @carrieloves
That's not possible at the moment.

@FranklyBecca
I'm working on it.

Helen Matthews February 14, 2013 at 2:40 AM    

Thank you! I love this but I'm having a lot of trouble getting it to work. I have the simple template style on my blog.(agirlwithpaint.com) Is this style considered a dynamic template? I'm not sure why it won't work for me.

Jess February 14, 2013 at 6:21 AM    

@Greenlava,
Great Tutorial! I had this on my blog once.. but I had to reset my simple template. Now that I have, the pinterest button is gone.. I tried just putting it back with your code.. but nothing happens when I look at my blog now. I checked if line 7 was already there, it's not. What should I do? My blog is http://jmnway.blogspot.com Thanks!

anyonita February 14, 2013 at 9:24 PM    

All right, so this is one nifty bit of code; thanks for sharing. I've uploaded it to one of my blogs (a blogger blog) & it's perfect. But I want it on my website as well, which doesnt have a blog interface. (I built it using Webplus). Is there anyway to tweak the code so that it's compatible with straight javascript to work on non-blog websites?

Helena mimaletayyo February 15, 2013 at 9:03 PM    

I've been loking for this script a long time and it seemed to work in my blog at the beginnig but I have notice that if I install it, the tabs at the sidebar of the blog (I have some tabs with twitter, facebook and daily motion boxes) stop working (and they put one after another).
If I remove the line 9 of the script as you say, the tabs are ok, but the script and the "pin it" buttons don't work. I don't know how to fix it. Would you mind to take a look at my blog and let me know if there's an easy way to fix it (www.mimaletayyo.com).
Thank you and forgive my english but I'm spanish ;)

Akuthota Rakesh February 16, 2013 at 1:03 AM    

Thanks a ton for an awesome post

Sentimental Scrapper February 16, 2013 at 5:18 AM    

Thank you! Thank you!!!! :)

jennifer visser February 16, 2013 at 11:10 PM    

I added the button and it works great - but when I try to change the location and the image, neither are working. I kept the quotation marks for the image and I have "topright" in there and it's not working. Any suggestions?

Thanks!

www.reimaginedblog.com

Arissa February 17, 2013 at 5:00 AM    

This is such a great tutorial, thank you so much!
I am completely new to the blog, and I added this and it worked great, however I would like to have a different image, but not sure how to do so. You have a link with other pinterest images but they are all downloads and I see you said to replace the URL on line 3 to get a different image and not sure how to do that. I was wondering if you could help me out. thanks so much!

Docerela February 17, 2013 at 8:14 AM    

Hi there, I tried to do this to my blog but it's not working either. Maybe I have something on settings blocking the pin it to show? If your on my blog and you click the picture it pops up does this make a different?

http://blog.docerelashop.com/

Thank you so much

Shaffer Sisters February 17, 2013 at 8:44 AM    

Big Thank YOU!

Greenlava February 17, 2013 at 9:13 PM    

@Helen Matthews
Yours is a layout template. It should work, but I do not see the button code in your template. Have you removed it?

@anyonita
Sorry it won't work on your website.

@jennifer visser
Make sure you have the correct image URL. Usually that's the culprit.

@Arissa
1. Download the image to your PC.
2. Create a new post. (you will not publish this post. The sole purpose of this post is to upload your image to Blogger server)
3. Add the image to the post.
4. Once you see the image in your post, click the HTML button(top left). You will no longer see the image. What you see now is the HTML representation of the image.
5. Look for the attribute src in the code. You should see something like this:
src="http://3.bp.blogspot.com/-ngj2bxHAzEI/UKKBYmrrxxI/AAAAAAAADsM/Czc2ty0o9Do/s320/image_name.png"
The URL after src is the URL of the image, the URL you want.
6. Copy the URL and use it for bs_pinButtonURL.
7. Do not publish the post. Keep it in draft just in case you forget the URL. Even if you delete this post, the image stays (in Blogger server).

@Docerela
You need to enter URL of the image, not the HTML. It should be like this:
var bs_pinButtonURL = "http://i1210.photobucket.com/albums/cc417/docerela/pinterest_zps1d200c1b.png"

Arissa February 18, 2013 at 1:21 AM    

OMG! You are awesome! THANK YOU so much for your help!

Crystal Johnson February 18, 2013 at 4:47 AM    

I have a simple Blogger template and I tried to upload this code above the close body tag in the HTML and it is still not working.
I did the image code by uploading a false post image of the image I wished to use and then used that HTML code, changed the position to topright and added a suffix By The Angelorian Tradition to insert into Pinterest upload.
Can you please tell me what I am missing to make it work. Thank You So Much!

Helen Matthews February 18, 2013 at 9:14 AM    

@Greenlava Sorry, yes I had removed it since it wasn't working. I added the code back in and the button is still not showing up. I'm not sure what I'm doing wrong. I did notice the code changed slightly when I updated it. (it automatically removed the script tag at the end of lines 9 and 10.)

Breezy Brie February 18, 2013 at 12:22 PM    

THANK YOU!

Greenlava February 19, 2013 at 2:53 AM    

@Helen Matthews
The button works on post pages from here. But it doesn't want come out on homepage, I'm not sure why.

@Crystal Johnson
You made one mistake. Please read the first item of the FAQs.

Ash February 19, 2013 at 10:56 AM    

Thank you, this worked perfectly for my blog!

Hollie @ I'm Busy Procrastinating February 19, 2013 at 11:56 AM    

Worked like a charm. Still trying to get the "Pin It" button to show up at the bottom of my posts like it used to. It's not been working for some reason.

Anonymous,  February 20, 2013 at 2:27 AM    

Cant get this to work on following blog: http://wedding-blog.absoluteperfection.co.uk
Any advice welcome. Static

Krystal K. February 20, 2013 at 6:00 AM    

This worked perfectly!!!! Thank you!!!!

Emily Kirchner February 21, 2013 at 3:23 AM    

This worked perfectly! Thank you! I would like to offset it from the corner of the image. I set mine at bottom right, but I would like for there to be a little space between the button and the corner of the image. Is this possible?

Hannah @ Just Call Me HaHa February 22, 2013 at 2:00 AM    

Thank you thank you! I've spent a decent amount of time trying to figure this out and googling and your post is so collective and user friendly.

Hannah @ Just Call Me HaHa February 22, 2013 at 2:23 AM    

Hi there, thank you so much for posting this! It's worked perfectly! I am having one small issue and that is no matter which location I type in line 4, besides leaving at "center", by hoover icon appears at the bottom light of the post, not on the picture (nor in the proper location of topleft or topright like I'd prefer). Any suggestions?

Thanks!
Hannah
justcallmehaha.blogspot.com

Greenlava February 22, 2013 at 2:26 AM    

@Anonymous (wedding-blog.absoluteperfection.co.uk)
I don't see the jQuery library call anywhere in your template. You need to add it back.

@Emily Kirchner
Try adding this rule in CSS:
.pinit-wrapper {margin:-10px;}
(Negative margin pushes the button inwards)

fashionme February 22, 2013 at 8:58 AM    

wow . . . nice script for try

Jenni Bost February 22, 2013 at 1:08 PM    

Thank you for the tutorial... worked like a charm!

Susie Buetow February 23, 2013 at 1:11 AM    

You are so awesome for sharing this! I just did it and it works perfect for me. I will share this on my blog with a link to you! xoxo susieQTpies

kailyn marie February 23, 2013 at 4:21 AM    

Can I add image opacity to the hover as well?

Marcia V. February 23, 2013 at 5:18 AM    

Please help, I've tried posting the code as indicated in your tutorial and I've read through most of the solutions in the comments, but I can't seem to get it to work.

www.preciousstyleonline.com

Thanks.

Kimmie February 23, 2013 at 7:04 AM    

Great tutorial. Very helpful! I have one issue, though. The text "Pin it button on image hover" is showing up on subsequent posts on my blog and is disrupting the flow. I can't figure out how to remove or hide the link without removing lines 11 and 12. Please help :)

Greenlava February 24, 2013 at 1:29 AM    

@Hannah @ Just Call Me HaHa
It's working fine when I tested it.

@Kimmie
You've placed the code at the wrong location. Please reread step 3.

Mere February 24, 2013 at 12:26 PM    

Hi! Is there any way to tweak this so that it works with typepad? I added the code to my footer, and I was able to get my pin it button to scroll over all the images on my site, but when I click on the images it just opens the image source instead of the "pin it" function. I have searched extensively for a similar tutorial to get the hover button on typepad, but I can't find it anywhere. Do you have any idea where I could look or how I could tweak this to make it work on typepad?

thanks so much!

Brittany February 24, 2013 at 2:22 PM    

Thank you for this post! I have tried sever different ways to do this, and this is the only one that made sense and worked!

Greenlava February 24, 2013 at 8:38 PM    

@Marcia V.
Your URL you gave bs_pinButtonURL is not a direct URL. You need a direct URL, a direct URL ends with an image file extension such as .png, .jpg or .gif.
Flickr's image URL usually starts with "http://farm..."

Greenlava February 24, 2013 at 8:40 PM    

@Mere
I've updated the script to include Typepad. It should work now.

Kate February 24, 2013 at 9:26 PM    

Awesomely easy and much nicer than the static Pin It button with stats!! Thank so much for this easy to follow tutorial!!!

Emily @ RemarkableHome February 25, 2013 at 12:46 PM    

I added this html a few days ago and it works great so thank you so much! I am trying to make it so when people click an external link in my blog it will open in a new window but when i add the following code to do it it makes it so my hover pin buttons dont work. it says something about fixing the backlink to bloggersentral. the code is found here:
http://www.richinfosite.com/2012/07/how-to-open-links-in-new-window-in.html#.USroWaWG3Ig its the last code box of the post.


I figure it is the jquery thing but i can't figure out what exactly to take out. Can you help? thanks!

Remi February 25, 2013 at 4:21 PM    

Awesome tutorial! But for some reason I can't get it to work. I've read through all the comments to make sure I wasn't making any of the same mistakes, I'm not getting any kinda error or anything. What am I doing wrong?

http://apeachykeenday.blogspot.com/

Brittany Castellano- A Handcrafted Home February 26, 2013 at 12:41 PM    

Thank you so much for sharing this! It worked wonderfully for my Blogger template!

Omkarr singh February 26, 2013 at 2:56 PM    

Have u find any solution for "read more" link Actually i m having "Read more" link in my site and i also want to a pin button for every image......Thanks if you can help...!!!!
sciencerelief.blogspot.com

Greenlava February 26, 2013 at 8:18 PM    

@Emily @ RemarkableHome
Try the following code instead:

<!-- start of external links new window -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function () {
$(&quot;a[href*=&#39;http://&#39;]:not([href*=&#39;&quot;+location.hostname+&quot;&#39;],[href*=&#39;http://www.bloggersentral.com/&#39;]),[href*=&#39;https://&#39;]:not([href*=&#39;&quot;+location.hostname+&quot;&#39;])&quot;).attr(&quot;target&quot;,&quot;_blank&quot;).attr(&quot;title&quot;,&quot;Opens new window&quot;).addClass(&quot;external&quot;);
});
</script>
<!-- end of external links new window -->

Greenlava February 26, 2013 at 8:27 PM    

@Omkarr singh
The problem had already been solved. Please read the update.

Anonymous,  February 26, 2013 at 11:13 PM    

I can't get the "no pin" on an image in a post in blogger. Is there specific instructions?

Natalie February 26, 2013 at 11:25 PM    

Thanks for the tutorial! Unfortunately, it doesn't seem to want to work on my blog. Any ideas? http://www.onceuponacuttingboard.com/

Anonymous,  February 27, 2013 at 6:57 AM    

@Remi, you need a higher version of jquery such as version 1.6.2 or higher. Prop function is not available in 1.4.2 which is being used for this feature.

South Your Mouth February 27, 2013 at 9:15 PM    

AH. MAZE. ING. Thank you!!!

Click to go to top Click to comment