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

Thanks for Making This Possible! Spread The Word!

Pin It

25 comments:

Liz @ Quirky Vistas12 February, 2013 13:54
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
Sandy12 February, 2013 21:09
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
Design_Fluff12 February, 2013 23:14
Thank you for this tutorial! I was wondering yesterday how to do this.
Tracy13 February, 2013 15:34
Awesome! Thanks for sharing! Tracy @ the2010shousewife.com & https://www.mythirtyone.com/292516/
Brooke 13 February, 2013 17:12
I'm in need of this! Thank you so much for the info. Have a wonderful day!
Deco Review14 February, 2013 08:03
I'm alreay using pinit button below each post:)
Helen Handley18 February, 2013 04:00
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!
Carol18 February, 2013 19:41
Great tip.
Nita Stacy19 February, 2013 01:14
Thanks I so needed this. Only today I was looking up how to do it. Thanks!
avisiontoremember20 February, 2013 06:11
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
from point of sale australia23 February, 2013 20:08
Thank you for the detailed tutorial. I really enjoyed making them.
Lucydesignsart.com25 February, 2013 15:16
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!
Fluster Buster26 February, 2013 06:23
Thanks for sharing at Fluster's Creative Muster. I'm looking forward to seeing what you link up next week.
Λαμπρινή27 February, 2013 10:48
Όλγα μου,στον ουρανό σε γύρευα στην γη σε βρίσκω...Θέλω την βοήθειά σου!!!!!Δεν βλέπω κάπου το μειλ σου...γράψε μου εσύ να μιλήσουμε!!lgas@otenet.gr
Oyon Boyon07 March, 2013 12:44
Did you notice that the "pin it" button comes up on top the social share buttons below the post?
Suzanne J Dean23 May, 2013 02:41
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
Marie-Interior Frugalista27 May, 2013 18:33
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
askhan24 January, 2014 00:02
for me its not working.. its showing me an error with scriptsrc must be followed with < <' symbol.. wat do i do?
askhan24 January, 2014 00:03
for me its not working.. its showing me an error with scriptsrc must be followed with < <' symbol.. wat do i do?

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.