Adding a 'Pin It' Button





I have gotten a couple of emails asking me how I added the 'Pin It' buttons to my photos. Well, it took me awhile to research how to do it so I thought I would show you (an easy) way how to add a Pin It button when you use your mouse to hover over a photo. 

The Fine Print: I am no means an expert. And I know this works for Blogger. So if you have your blog on another platform (like Wordpress), well, then, you're on your own. 

Let's get started.

1. In Blogger, go to "Template" > Edit HTML.

2. Find the </body> tag that is near the bottom of the template.

3. Insert the following code (found below) and insert it right above the tag.

<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYCDVWaSsy_7Y_DFSx6k9NrYKGj9GR5V3gECyjJ3EizXiLwDihNt9p7NCH-Ub3XvMeodueljFBukm7g624BzVGCxi1DkGCAUfUrB6-lznYoC5VVB83_sW9gzTq3mT7acMQcza40D-UfhFq/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>


4. To move the location of the pin it button, delete 'center' in line 4 and replace with one of the following: 

      top right

      topleft

      bottomleft

      bottomright

5. Thats it. Easy Peasy. All you need to do now is hit 'save'. 

Thanks for stopping by today. I hope I helped you learn a new trick for your blog. ;) 

(Most of the info for this tutorial was picked up from this site. Awesome site. So much good info there!)

13 comments

  1. Being technically challenged, I always need good directions like yours, thanks so much for sharing :)

    ReplyDelete
  2. That.was.awesome! Thank you sooooo much! I'm finally on Pinterest! I gotta tell you though, I was very nervous about hitting that SAVE button, but I'm so glad I did! You rock!

    ReplyDelete
  3. Well, I think you're an expert. I've Pinned it and am going to try this for myself Melissa!

    ReplyDelete
  4. Does this language get automatically added to each post? Ok I'm being lazy- I will go try it out- thank you so much for this info! I've been wondering about this for months now!

    ReplyDelete
    Replies
    1. yes!! It goes to every photo - there is a way to make it not be added, but I have not perfected that method enough to share it just yet! ROFL

      Thanks for stopping by!

      Delete
  5. I have a question. My Pin it Button will only work if I upload my picture directly from the computer I edited it on. If I upload my picture to yahoo and then download it to my laptop from yahoo, then upload it to blogger the "pin it" doesn't work. Do you have any suggestions?

    ReplyDelete
  6. thaaaaaaaaank u this is the easiest way i found to add the pin it button thaaaaank you again

    ReplyDelete
  7. OMG.. You are a life saver! Thank you so much for this post! It was so easy to do!

    ReplyDelete
  8. I second that you are a big help, Tyvm for this post have a sweet long weekend :) xo

    ReplyDelete
  9. Thank you sooo much! Greetings from Greece!♥
    Eva
    .•*¨`*•✿.Jajala Majala.✿•*¨`*•.

    ReplyDelete

Thanks for stopping by! Let me know what you think!