Pinterest Pin It button with Counter (latest update)

Pinterest Pin It button tutorial latest This is the latest version of our original popular Pin It button tutorial.

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.

Here are the steps:

  1. Go to Template > Edit HTML.
  2. Back up your template.
  3. Check the Expand Widget Templates checkbox on top right of the HTML window.
  4. Look for the following data tag in your HTML. This is the tag for the post content:
     <data:post.body/>
    Normally there are two instances of the tag present in your template. Locate the the first (from top) one. 
  5. Paste the following code immediately below (after) it:
    <!-- Pinterest button Start by BloggerSentral.com -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='pin-wrapper' style='margin:10px 10px 10px 0; text-align: left;'>
    <a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
    <span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
    </div> 
    <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> 
    <style type='text/css'> 
    #pin-wrapper > a {background-image:none !important;}
    </style> 
    </b:if> 
    <!-- Pinterest button End -->

    Note:

    • 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.
  6. 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

    pin it button counter above

    above

    pin it button counter beside

    beside

    pin it button counter not shown

    none


  7. 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;
  8. Click Save.
  9. 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.

  1. Go to Layout and click a Add A Gadget.
  2. Select HTML/Javascript gadget.
  3. Copy the following code and paste it inside the content box.
    <a data-pin-config="none" data-pin-do="buttonBookmark" href="//pinterest.com/pin/create/button/"><img src="//assets.pinterest.com/images/PinExt.png" /></a>
    <script src="//assets.pinterest.com/js/pinit.js"></script>

Enjoy!

Other posts on Pinterest buttons:

If you find this post useful, please pin or share.

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

Caricatures from Photos November 30, 2012 at 8:08 PM    

Valuable codes and useful posts. Thanks for sharing with us.

Unknown November 30, 2012 at 10:44 PM    

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

Barbara Bruder November 30, 2012 at 11:59 PM    

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.

Celebrity Pictures December 1, 2012 at 4:08 PM    

nice widget. I like it. it will be more attractive if all the sharing buttons are together to add to a blog.

mpyphoto December 2, 2012 at 12:57 AM    

THANK YOU!

Greenlava December 2, 2012 at 3:43 PM    

@Kim Wilson
Yes you have to delete line 7 from either one of them.

Jeannine December 3, 2012 at 1:03 PM    

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.

Web Copywriter Services December 3, 2012 at 2:29 PM    

Wow! great post. This feature is very useful in creating technical documents. It helps in many ways.

Unknown December 3, 2012 at 8:55 PM    

Thank you! That fixed it.

Suhas Naik December 3, 2012 at 8:56 PM    

Thank you for sharing this update.

Sally December 3, 2012 at 11:12 PM    

Thank you so much! Your posts have helped me quite a bit as a new blogger!

Greenlava December 4, 2012 at 1:41 PM    

@Jeannine
Change margin-left from -44px to -46px in line 5. That should fix it.

Bethany Smith December 4, 2012 at 9:46 PM    

Barbara-I am having the exact same problem!!! Have tried it over and over again...and it doesn't work:(

amna December 5, 2012 at 1:56 PM    

thank you thank you thank you!

Unknown December 6, 2012 at 12:28 AM    

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!

Sharanda December 6, 2012 at 3:32 AM    

sorry i forget to add this. I don't see all i see is

.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);

background: $(image.background.color);
border: 1px solid $(image.border.color);

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}

.post-body .tr-caption-container {
color: $(image.text.color);
}

.post-body .tr-caption-container img {
padding: 0;

Jeannine December 6, 2012 at 9:55 AM    

Thanks so much Greenlava! That fixed it quick and simple!!

FrontierDreams December 11, 2012 at 11:21 AM    

I have a customized template and do not have "" in it... how can I add the button?

A Teacher Without a Class December 11, 2012 at 8:13 PM    

I entered the code--I have a pin it button but it still won't allow me to choose the images I want to pin--it just comes up with a blank images. Any suggestsions? ateacherwithoutaclass@gmail.com

www.ateacherwithoutaclass.com

Unknown December 11, 2012 at 8:37 PM    

I would love to add this to my blogger blog, but the script is no where to be found in my html. I have done a search using ctrl-F and none found. Is there another place in the html I could add this?

Unknown December 12, 2012 at 9:48 PM    

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 :)

Unknown December 13, 2012 at 9:53 AM    

I am having the same problem as Rachel I do not have
in my HTML code on blogger

Greenlava December 13, 2012 at 2:58 PM    

@Sharanda
@Rachel Harwood
Make sure you expand the template by checking the Expand Widget Templates checkbox before looking for data:post.body.

@A Teacher Without a Class
Please replace the old code with the one from this tutorial.



Christine December 16, 2012 at 12:36 AM    

Button works, but no counter is being shown
Christineiscooking.com

Radhika December 17, 2012 at 6:41 PM    

Though I could install this code in my blog and despite it working well, the button is not showing the number of counts at all in both beside and above configuration. Any idea..

Anonymous,  December 22, 2012 at 1:40 PM    

Thank you! Thank you! Thank you! I've tried several different versions on my latest blog, since the old code I had no longer works. Finally, you posted one that does. Thank you!!! ♥

Tina Butler December 30, 2012 at 10:08 PM    

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

Tina Butler December 30, 2012 at 10:09 PM    

I meant steps one through 12

The Visual Vamp December 31, 2012 at 2:23 AM    

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.

The Cream Puff Lady December 31, 2012 at 3:43 PM    

Doesn't my blog address have to be in the HTML code somewhere? I can't get this to work - at all.

Gina (Prim and Polished) December 31, 2012 at 11:15 PM    

This is not working for me. I replace the old one and then the edits will not save.

Meg January 1, 2013 at 9:54 AM    

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?

Greenlava January 2, 2013 at 1:39 AM    

@Valorie Hart - The Visual Vamp
That's how it's supposed to work.

@megrpo
The code is in a HTML/Javascript widget. Go to Layout, the widget is underneath the Blog Posts widget.

Chicky Kadambari January 2, 2013 at 2:17 PM    

Hi Greenlava. Thanks for the updated code. The PinIt button works perfect now except for the counter, as a few others have also pointed out. Neither 'beside' nor 'above' show the counter.

Meg January 3, 2013 at 1:44 AM    

Oh wow. I think I lost like 2 hours of my life going through the whole code line by line....and you're right...it was right there in layout.

Sometimes you just need fresh eyes! Thanks so much!

Lisa Weidknecht January 4, 2013 at 7:39 AM    

Woohoo!!! Thank you!!!

thinker January 7, 2013 at 3:29 PM    

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.


thank you for any help.

Anonymous,  January 8, 2013 at 1:28 PM    

It is working .

Brandy Vencel January 10, 2013 at 1:54 AM    

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...

Unknown January 10, 2013 at 9:28 AM    

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?

Andrea Nicole January 12, 2013 at 5:54 AM    

I, for the life of me, cannot get this to work. :-(

Greenlava January 12, 2013 at 5:47 PM    

@thinker
With our code, you don't need to supply the image URL. When you click the button Pinterest will show all images from the page and you get to choose which image to pin.

Tiffin Fiona January 13, 2013 at 7:15 PM    

Still can't find data:post.body/ on my blogger account (couldn't find it last time either) but was able to install the widget so thanks.

house full of blokes January 16, 2013 at 9:12 AM    

Thank you - nice clear instructions and button present and correct on my blog - Thanks

Unknown January 16, 2013 at 9:21 AM    

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

Unknown January 16, 2013 at 7:51 PM    

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!
Tracey
The Teacher’s Chair

Lisa @ On Manor Drive January 17, 2013 at 12:12 PM    

Thanks for the info! Any idea how to make the button also show up on the mobile version? I can only see it on the web version.

Well Hello! January 17, 2013 at 10:57 PM    

Hi,

I added this to my blogger blog that has dynamic views and I don't see it anywhere on my blog. Any suggestions?
http://www.sparklefashionjewelry.blogspot.com

Thanks,
Gina

Steph January 18, 2013 at 1:02 AM    

Thanks for this!!! After a few tries I was able to add a pin it button to my blogger site!

thinker January 18, 2013 at 5:15 AM    

Thanks Greenlava. will mention/recommend bloggersentral soon on my network.

Greenlava January 18, 2013 at 7:04 PM    

@Lisa @ On Manor Drive
Sorry there's no workaround for mobile template for now.

@Gina Brown
I don't think it'll work on dynamic templates.

mom of seven January 22, 2013 at 1:13 PM    

Very frustrated, I'm not getting it to work either.
kathryncrapo.blogspot.com

Debbie Smith January 22, 2013 at 10:48 PM    

Brilliant, thanks so much! It works beautifully.

Gagan Masoun January 23, 2013 at 5:24 PM    

Greenlava, you're outstanding dear. I appreciated your blogging style. Pinterest is a important part for bloggers. Very helpful article on your blog :)

Hussain January 23, 2013 at 6:21 PM    

Thanks bro to sharing this useful information follow very easily all your steps and add pinterest pin it button.

Kathy January 23, 2013 at 10:32 PM    

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.

Anutka January 24, 2013 at 3:31 AM    

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!

barb January 25, 2013 at 4:58 AM    

Thank you for your excellent instructions. This newbie blogger is very grateful!

kirsten@FarmFreshFeasts January 25, 2013 at 10:14 AM    

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!

Gome January 28, 2013 at 11:10 AM    

Thanks - this was very easy to follow!

Chareen January 28, 2013 at 1:07 PM    

Thank you for this update. It works well :)

Adam January 30, 2013 at 2:09 AM    

Under "Adding Pin It Button as a Widget", the 'img' tag needs an 'alt' attribute to validate. Thanks for the post!

.../images/PinExt.png" alt="Pin It">

Tokotua Forex February 5, 2013 at 4:33 PM    

Thanks for tips

Shirley February 6, 2013 at 11:40 AM    

Thank you, this works perfect.

Debbie February 9, 2013 at 4:58 AM    

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!

Annie February 19, 2013 at 11:49 PM    

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!!

Denise Annemarie February 22, 2013 at 12:53 AM    

I used to have the pinterest button with counter. Now it no longer works. I've tried reinstalling and now I don't even get a button. I do have this line of code:

Should I remove this and try again? I do have a pinterest button to pin my whole blog but I would also like one for each post. Thanks for your help

HaviRose February 23, 2013 at 4:02 AM    

Thanks so much for this! Adding the button worked perfectly. It's incredibly annoying that Blogger has so many social recommend buttons and yet doesn't have Pinterest.

LM February 28, 2013 at 3:07 AM    

I cannot find the anywhere. I've looked and looked. I checked the expand widget box. Is there something wrong I'm doing?

Thanks

Akshay@Wordpress Plugins February 28, 2013 at 9:52 PM    

Thank you sir, It is a Great post and Implemented on my Blog.

Lucy March 6, 2013 at 10:57 AM    

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!

Unknown March 9, 2013 at 9:45 AM    

Thanks so much!

Unknown March 9, 2013 at 8:14 PM    

THANK YOU! I finally got it! I much appreciate your straightforward post. :)

Unknown March 10, 2013 at 6:01 AM    

Thank you for the code, works perfectly. One thing I would like to add is having that Pin button on the main page as well - is it possible? Thanks!

Thank you very much!

Espiritu April 2, 2013 at 4:33 PM    

Thank yo a lot =)

KsuhaK April 3, 2013 at 6:37 PM    

Thanks for useful info, planning to use it on my blog.

Courtney Milburn April 14, 2013 at 11:04 PM    

When I go to edit html there is no expand widget template button. When I copy and past the html line to search for it nothing shows up. What should I do?

Courtney Milburn April 14, 2013 at 11:41 PM    

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?

Courtney Milburn April 14, 2013 at 11:42 PM    

Nevermind...just tried and that is exactly what it needed. thanks!

Jay April 17, 2013 at 8:49 AM    

Hi! I'm not finding the expand widget checkbox! I know it was there at one time, because I've used it before. Wondering if Blogger has changed things around.

Jessy's Kitchen April 19, 2013 at 5:31 PM    

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.

Sorry for my english
Thx

Anonymous,  April 22, 2013 at 1:27 AM    

It work, thanks you !!

ColetteH,  April 24, 2013 at 11:27 AM    

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.

Sarah Smith May 13, 2013 at 11:18 PM    

Blogger has gotten rid of the "Expand Widgets" button. Instead, it now has "Jump to widget" with a large drop down list of widgets. Do you know which one contains the text?

Sasha Peterson May 24, 2013 at 4:01 AM    

@Colette H, THANK YOU SO MUCH!! I have been working on this for about 2 hours and couldn't figure out why the button wasn't showing up!! Thanks for shedding some light on to this! :)

meowser June 6, 2013 at 4:43 AM    

Thank you for the easy instructions!

googled-it,  June 7, 2013 at 3:41 AM    

For those who were wondering, the Expand Widget checkbox has now been replaced by arrows within the code itself. Click on the arrows (next to the line number) to expand the widget code.

Olivia July 10, 2013 at 11:54 PM    

Um I cannot figure this out. I have blogger. Why don't they just offer pinning as an option? Every woman in america pins!

Uzzal Hossen September 4, 2013 at 2:56 AM    

Your blog are impressive to each other.I read your blog its very good and friendly, Helpful for all.

Mazharul Islam September 4, 2013 at 2:57 AM    

Thank you very much for publishing this kind of article. I like your article very much.

Karen M December 31, 2013 at 3:34 AM    

Hi, I've just found this...brilliant help and easy to understand. Thank you!

Mrs. B February 5, 2014 at 3:13 AM    

yayyyyy... I did it finally...

Thank you sir.