How to add "Pin it" button on Each Image of a Blog Post

Hey guys, it's been a long time since I ever posted a blogger tip. You've probably noticed 
a pin it button (bottom right side of each image) that appears when you hover on any image 
within my posts. It's a very helpful widget, cause it's easier for your readers to pin the image 
they want without having to scroll down. Today, I'm gonna share with you how I added that 
button with the help of those great guys. It's an easy-peasy tutorial. So here we go:


Step 1:
Blogger: Go to Template > Edit HTML > Expand HTML
Wordpress: Go to Administration > Appearance > Editor > footer.php.
Step 2:
Locate the  </body> tag near the bottom of the template
Step 3:
Copy the code you see here-below and paste it right above the </body> tag.
01<script>
02//<![CDATA[
03var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitqHHFm1FvMmsVZN7Vmet8GmhygJ-mtQEvq-FXBNau4xoq0-qUAIuum8PwcPUpxFHy8oGq9pS20EYwNUlxtwWMsCgM2dtLnCgqoIJ28BTE6Ro4cAtTLIOkj9j1hq87Vz4m9YH6brYNmYnl/s1600/pinterestx1_72.png";
04var bs_pinButtonPos = "center";
05//]]>
06</script>
07<scriptsrc='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
'
type='text/javascript'></script>
08<script src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js
'
type='text/javascript'></script>
09<!-- please do not alter or remove the following code -->
10<div id='bs_pinOnHover'><ahref="http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html">Pin It button on image hover</a></div>

Tips:
- You can choose any button icon you prefer. Find free pin it icons: here here here
- To use your own button, replace the URL in line 3 with the link URL of the image you've chosen. Make sure to keep the quotes.
- To re-position the button, replace center in line 3 with the new position as written below:

  • topleft
  • topright
  • bottomleft
  • bottomright

Preview your blog and you should now be able to see the pin it button where you have 
placed it to be. Hit "Save" button and you're all set!
Enjoy endless pinning!
Pinned Image
Photobucket 
Thanks for Making This Possible! Spread The Word!

25 comments:

  1. Thanks for the tip and the links to the buttons. I'm gonna give this a try later and cross my fingers that I don't mess it up. Liz

    ReplyDelete
    Replies
    1. Everything will be ok! Just to make sure, preview it first and if all ok then hit save!

      Delete
  2. I did what you said to do and totally messed up my script?? Help me! Can I send it to you and maybe you could fix it?? I get an error message..

    Your template could not be parsed as it is not well-formed.

    I knew I should not have tried this...lol
    Sandy

    ReplyDelete
    Replies
    1. Sandy I'm so glad you fixed the problem. Probably you had forgotten to hit the "expand widget" button!

      Delete
  3. Thank you for this tutorial! I was wondering yesterday how to do this.

    ReplyDelete
  4. Awesome! Thanks for sharing! Tracy @ the2010shousewife.com & https://www.mythirtyone.com/292516/

    ReplyDelete
  5. I'm in need of this! Thank you so much for the info. Have a wonderful day!

    ReplyDelete
  6. I'm alreay using pinit button below each post:)

    ReplyDelete
    Replies
    1. This is a button for each image of a blog post!

      Delete
  7. You rock! Many thanks...it works!

    Stopping over from Making Memories. I enjoyed your blog and will subscribe for sure

    I blog over at http://thehandleyhome.blogspot.com ...stop by if you have a chance!

    ReplyDelete
  8. Thanks I so needed this. Only today I was looking up how to do it. Thanks!

    ReplyDelete
  9. Thanks for the helpful post! I just pinned it :) Thanks for linking up to check me out saturday on a vision to remember
    http://iamonly1woman.blogspot.com

    ReplyDelete
  10. Thank you for the detailed tutorial. I really enjoyed making them.

    ReplyDelete
  11. couldn't get it to work, kept getting error message. are you supposed to copy each line of code separately? I did it both ways, including just how it is with the numbers before each line and then separately without the numbers because you can't copy the whole thing without including the numbers. Sorry to be so dense lol!

    ReplyDelete
    Replies
    1. Further to our email exchanges, I visited your blog and I'm glad that now it's working properly!

      Delete
  12. Thanks for sharing at Fluster's Creative Muster. I'm looking forward to seeing what you link up next week.

    ReplyDelete
  13. Όλγα μου,στον ουρανό σε γύρευα στην γη σε βρίσκω...Θέλω την βοήθειά σου!!!!!Δεν βλέπω κάπου το μειλ σου...γράψε μου εσύ να μιλήσουμε!!lgas@otenet.gr

    ReplyDelete
  14. Did you notice that the "pin it" button comes up on top the social share buttons below the post?

    ReplyDelete
  15. I'm trying my darnedest to get this code in my blog template....I semi-know HTML but still getting an error. I'm adding it to the right area but no where in the HTML area do a I see an "EXPAND HTML" button. It keeps giving me errors about the <ahref= so not sure what to do. I appreciate your tutorial but do you have any ideas for me?

    thanks,
    Suzanne J Dean

    ReplyDelete
  16. Thanks for the tutorial! I entered the code and received the same error message as Suzanne J Dean <ahref=. After I changed the code to <a href= it accepted the code. However, the pin it button is not appearing on my post pictures. I've tried this several times and wondering if you have any suggestions?
    Thanks,
    Marie
    www.interiorfrugalista.com

    ReplyDelete
    Replies
    1. Marie hi, as I've already replied Suzanne by email (I should do it here though), there have been some changes in blogger recently and it won't let us "expand html". I know as I was trying to perform a little hack myself and it just wouldn't let me. If I'll figure out how to do, I'll post an update on this post. Meanwhile, are you sure it doesn't work? You have to view your blog and hover over an image to see the button.

      Delete
  17. for me its not working.. its showing me an error with scriptsrc must be followed with < <' symbol.. wat do i do?

    ReplyDelete
  18. for me its not working.. its showing me an error with scriptsrc must be followed with < <' symbol.. wat do i do?

    ReplyDelete

Your thoughtful comments keep me going! Feel free to share them!
However, I reserve the right to delete all anonymous comments and restrict comments that are irrelevant to the article, contain profanity or lack respect, personal attacks or those that seek to promote a personal or unrelated business.

Related Posts Plugin for WordPress, Blogger...
Icon Icon Icon Icon Follow Me on Pinterest

spice up your blog
Pin It button on image hover