This Pin It button allows your readers to share your posts without having to leave your blog. It pulls all available images from a post and lets them choose which image to pin. It also comes with an optional counter that displays how many times a blog post has been pinned.

Adding Pin It button to Blogger post

This Pin It button goes to the top or bottom of a post. It comes with a counter that displays how many times a blog post has been pinned.

The Pinterest script in line 7 must occur only once in your blog. Omit this line if you’ve already had the script in your blog.

Button configuration

You can customize the layout of Pin It button & counter by changing the value of data-pin-config attribute in both line 4 and 5. Refer to the table below for the available types and their settings.

Button type

Value of data-pin-config

above

beside

none

Button placement The steps above position the button on bottom left of each post. To change the button position, do the following:

Position it on top of post Place the button code before <data:post.body/>, instead of after.

Button alignment Change the value of text-align property in line 3: Align right: set it to right;Align center: set it to center;

Click Save.

View your blog. The button should appear on post pages.

Adding Pin It button as a widget

To put Pin It button outside post area e.g. in sidebar or footer, paste the following code into a HTML/Javascript gadget. The button will appear on all pages (not just post pages), but it doesn’t have a counter.

95
comments to "Pinterest Pin It button with Counter (latest update)"

Thanks for this tutorial update. I have it installed at the top & bottom of each post, though only the button shows the counter. I'm wondering about your NOTE about the script in line 7. Because I have the code installed above & below, should I eliminate line 7 in one of them? ~Kim @ Sand & Sisal

I have followed everything you have outlined above and cannot get this to work.I am using Blogger,using the Awesome view and I also use a Blogger customized background from Cutest Blog on the Block. One of these options that I am using, I feel, is causing this code not to work. I would love to be able to use the Pinterest button next to each post but since I have tried numerous times I have given up.Thanks for your awesome explanations love them.

So glad to see an update. Thanks!!My one question though... I had the Pin It button with counter installed before and was having the problem of it only allowing to pin a cream colored box. The strange thing now is, I deleted all the old code and added the new, and it's working I might add, but on the very left of my pin it button is what looks like the edge of another button. If I'm very careful, I can actually select that button and lo and behold, it's the old button underneath. Am I crazy here, or doing something wrong? Is there something else I should know or do to make it go away completely?My blog is TheConcreteCottage.blogspot.com if you'd like to check it out.

I had your previous code installed and it stopped working about 2 weeks ago. I thought Pinterest was doing something so I left for alone for a while. Now I see there is a new code. I went to my HTML code and removed the previous code and added this new one.

However, when I install your current code, I don't get a button. Am I missing something?

With the "Old" code I was getting a black picture where the pinned image would be and it would never pin. I have since removed ALL Pin It code from my site. Any help would be great to get the button back and working with counts. I can e-mail a copy of the removed HTML, but can't add it here because it gives me an error message.I can be reached at Pintsizedbaker@gmail.com (sorry, no-reply commenter since G+ transfer) Thanks so much!

Thank you for that. Like Barbara I use blogger and I tried and tried and it did not like me at all. Then I copied the text from the page by copy and paste - took out the number 2 which seems to want to come with it, backspaced the lot so there was no line space where the 2 was and then it actually worked! I am definitely not computer literate when it comes to set ups and codes tho if you give me a program to use I can work out all sorts of things... Anyhow just to say thanks :)

I had the pin it button installed about 6 months ago and it worked perfectly. Then at the begining of December the counter stopped working and only the pin it button is visable not the amount of pins, so the counter isn't working anymore. I installed the code above just like you stated. All i did was take out the 1 - 9 numbers and change it from "beside" to "above and i get nothing. I tried to copy and paste the code it added but it won't let me. www.mommyskitchen.net

Thank you very much for this information.Please help me figure out why the Pin doesn't appear on the blog's main page, i.e. thevisualvamp dot blogspot dot com, yet when the title of a blog post is clicked, i.e. thevisualvamp dot blogspot dot com/2012/12/pouring-drink-from-elegant-place dot html, the Pin appears at the expected position.Thank you.

Hi! I bought a new template and had the Pin it button at the bottom with all the share buttons. Now it's on each photo. How do I remove it from each photo? I've expanded widget templates and searched for "pin" "pinterest" etc....I may be blind but the code is just not there for me to remove it! Any ideas?

Hello, but how to get the image from the post? I post one image per post, and i want in to show in the pin, you know when you go to pinterest official button site you will see they ask for a image link, and this link means the one is generated by blogger post.

ok, for post link is> data:post.url, but what is for show the image? theres a part of the official pinterest code that ask for media display, like this> &media="here should be placed the url of the image".

I want to solve this or get a solution because i have the pinterest button on my blogpost's but they dont share the image and it wont display on pinterest.

Hmmm...I put in the code--twice--and nothing. No button. Nothing. I know I put it in the right place because I have similar buttons right there for FB and Twitter that are working. Drat...my old button wasn't working so I suppose I'm in the same spot still...

Hi, Like some of the others said, I'm following this step by step and can't seem to get it to work. I even went through the comments on the post to try and troubleshoot, still no luck? Should this work on all Blogger sites? Anyone else still having issues?

Hi There --- This is my 2nd time (or rather 5th & 6th) trying to do this and, like Brandy, I am not able to get it to work for anything. I followed the steps to the letter. I cannot get a button or anything to show up. What am I missing?Thanks! -Jessica

Hello! Thank you for your help and tutorials! I would like to remove the pin it buttons from my blog and use the new one you wrote about (with the hover feature) I cannot for the life of me figure out how to REMOVE the pin it buttons I have on there currently. WIll you be able to advise? Thank you so much!TraceyThe Teacher’s Chair

Thanks for this. However, I'm having trouble getting it to work. I've used a simple form, expanded the widgets, found , pasted the code after and it's still not showing. Not sure why. Previously I did have my posts set up using the code from your "Align Google +1, Tweet, Like and Pin It buttons Horizontally", but decided to go simple with just the pin-it code in this article. I did removed the original script code and followed the steps in this article. Maybe there's something else I need to do? I'm stuck and with no pin-it button. Thanks.

Please help!The pin it button stopped working a few weeks ago. Now just shows a yellow square instead of the image and opens in a new tab instead of small pop-up window as it used to. Did something change or did I mess it up somehow? Here is my blog http://wackylaki.blogspot.com/

Thank you for a clear and easy to understand tutorial. I was able to expand the widgets in the template, locate the proper position and paste the code, but could not see any changes to my blog. I tried pasting in front of the data post body thingy to see if it would show on top of the post, but without success. I'll settle for using a button as a gadget.Thanks!

Hello, this was very simple to install and I had no problems. Just wondering, though, if there is a way to exclude thumbnail photos that I have on my main page linking to individual blog posts. These are too small to use for Pinterest, yet they show up as being "pinnable". Thanks for any help!

I am using blogger and have tried to install this, but am having no luck. From previous comments, I'm wondering if Im using a dynamic template or something else that causing it not to work. Any ideas? - http://havingkidsisfun.blogspot.com/. thanks!!

Thank you so much! After other unsuccessful attempts to add "follow me on pinterest" button, I came upon your site through pinterest! The instructions were very clear and you have 3 options. Great work! Yeah it worked! Just a few other wrinkles to iron out in my 2 and a half week old blog, but you've solved this one problem for me and I am very grateful!

Ok I managed to get it into my post (not exactly where I want it but close. Now how do I get the counter to show up? Right now it is only the pin it button but no counter. Does the counter not show until 1 person pins it?

Hello, Thx for the code. It's works on dynamic template !!!!! But you must positionate in the "shareButtons" and change the DIV margin --> div id='pin-wrapper' style='margin:0px 40px 0px 0px; float: left'.

I just have a other problem..... The button come on all publications but not in the index page.... Are you an idea for i can see it on the index page.

Thank you. It did take me a few hours, because this is in my code 3 times (not just 2 times). It didn't work until I pasted the code after the 2nd occurrence.

Also to note, the Pin It button doesn't appear on posts unless only a single post is selected. If an entire month of posts is selected, the button does not appear. This is just a note for some who may have pasted it correctly but couldn't see it when they viewed their blog.