Add a Pinterest Pin It Mouseover Button on Blogger Images

Images have always played a prominent role in attracting new visitors through search engines like Google and Bing. But when Pinterest decided to enter the social media mix, it upped the ante in a big way.

Pinterest lets blog owners use their service to add a 'pin' to photos or content images on the site. When visitors of that site see a photo they like, they can choose to click on the red Pinterest button for Blogger, and add it to their Pinterest account.

The person who pressed your Pinterest button for Blogger can now see your photo on their dashboard, and share it with friends or followers on the service. They can also come across this photo when users add keywords or category tags to the image. More importantly, that photo links to your site when clicked on and will contain a description title of your blog name or post.

Therefore, adding the Pinterest button for Blogger will help you to benefit from tons of new traffic coming from Pinterest and people who had found your photos and post links using the service. Here are some steps to add your very own Pinterest button.

1. Access your Blogger Template

The first thing to do is to edit the code of your template so that it knows when to display this Pinterest Button for Blogger with the content. You can do this by logging into your Blogger Dashboard and finding your way to "Template" > "Edit HTML".

blogger template html

When the editor opens up, it may look a bit foreign to you if you don't have much experience using HTML. Click anywhere inside the code area and search by pressing the CTRL + F keys for the </body> tag - hit Enter to find it:
</body>
The body tags makes up the general content in your webpage. Think of it like the settings panel of a website. If you were to delete everything in this section your site would turn into a blank white page.

2. Add The Pinterest Pin it Script

Once you found the </body> tag, insert the following script just above it:
<script>
//<![CDATA[
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkP43oqEuoHPpxM8Lem0iBfucPlnaPkXvL5XvPzljV8v7Oj6F2RNIMtgoMp0i8hnXF_fHp6J0Caqqfgmvemeepygu9mcXaKy45dB1bNBf2PbUqqbpJyHXM9kVJ_9VUnanLnZre9KnWynBi/s1600/pinit-button.png";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='pinit-img-button' src='http://helplogger.googlecode.com/svn/trunk/pinterest-button1.js' type='text/javascript'>
// Visit bloggerchive.blogspot.com for more widgets and tricks.
</script>

adding pinterest script

3. Changing the Position of the Pin it! button

The cool thing about this code is that you have some freedom over where the Pinterest button for Blogger will go over the image. Take a look at the code that you just copied and pasted into the HTML for the word 'center'.
var pinit_button_position = "center";
To move the pin to a different area of the photo, replace center with one of these texts:
topleft
topright
bottomleft
bottomright
And to change the Pin it! button that appears on mouse over, replace the address in blue from above with your own:
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkP43oqEuoHPpxM8Lem0iBfucPlnaPkXvL5XvPzljV8v7Oj6F2RNIMtgoMp0i8hnXF_fHp6J0Caqqfgmvemeepygu9mcXaKy45dB1bNBf2PbUqqbpJyHXM9kVJ_9VUnanLnZre9KnWynBi/s1600/pinit-button.png";

pinit script

4. Save The Template

Make sure that you added everything correctly, then save the template and navigate to a recent post that you made that contain images. Hover your mouse over the image and you should now see a red Pinterest button for Blogger displayed on the image. Test it out and see it how it works.

If you want to hide the pinit button from a specific image, when you create a post, switch to the HTML tab of your post editor and type class="nopin" right before the closing slash and angle bracket of your image element, like this:

nopin pinterest

The only downside of this button is that it doesn't take the information from your custom image titles. It's automatically set to take the title of the blog post where the image is located. So, you'll need to pay closer attention to the title of the posts so that it fits closely with the images being shown.

Remember that when you have this code activated, you have to label your titles so that they are relevant to the photos you are posting. This might sound obvious, but sometimes you create a post with an image as a joke that won't make sense in the context of viewing it on Pinterest.

If you use Google Analytics, you can start to see traffic flooding into your site from Pinterest. You should also create your own Pinterest account so that you can manage the content and track how it's being shared. That's it. Enjoy and happy blogging!

Comments/disqusion
19 comments

  1. says:

    I loved this post and have already applied this blog in my blogger blog...Awesome...
    visit my site to see a preview: goo.gl/lrq4YU

  2. says:

    Very Thnxx!! I was Trying to add it from long Time... :P now I got it..!! :)

  3. says:

    Thank you. This is very helpful. I agree Pinterest is a good source of traffic.

    ❤Paulline
    www.milastolemyheart.blogspot.com

  4. says:

    Thank you :) got it and already working on my blog! ♥♥♥

  5. says:

    How do you do this for one specific picture?

  6. says:

    very helpful post,already working on my blog

  7. says:

    Thanks very much for this, I have applied your tool, images on blog go along way to help traffic increase and let ur readers share your posts, Thanks again.

  8. says:

    Thank you.Its working fine

  9. says:

    Thank you for this tip! easy and effective :)

  10. says:

    Thank you!! I added this to my art blog, exactly where this script should be! My art blog

  11. says:

    Hey, so my blog is set to have all the body images be the same width... which means when I add the "pin it" button, it's MUCH larger than I'd like it to be. Is there a way to customize this code so the pin button is a specific size?

  12. says:

    Thank you !
    www.angeleinthesky.blogspot.com

  13. says:

    Hello admin, How can i remove or pin it button from the main page ? its harassing me in the main page. But when i click post link then in post image its ok. Need to remove form the main page.

  14. says:

    Can you tell me how to remove the pin it from my main page? It's HUGE and blocking my links. Thanks!
    http://www.jennawingatedesigns.com/

  15. says:

    How to get my own pin it button...?

  16. says:

    Not working on my blog

  17. says:

    This works like a charm on my blog. Thanks a lot!!

    designzstudio.blogspot.com

  18. says:

    Why it cannot work on my blog?
    My blog: http://www.islameralobd.com
    It's a bengali Islamic blog.

  19. says:

    Hello Admin, Thank you for this pinterest button.. I'm using this button. It's showing my homepage post.... I don't want to show this button in my homepage post. now what can i do.. help me :)

    This is my Blog : Health Bangladesh