April 12, 2012

Add Pinterest "Pin It" Counter Button To Blogger


pinterest pin it button for bloggerAs I got busy with studies, a new social networking niche boosted in numbers and strength so dramatically that it has now become the social media network of 2012 with over 10.4 Million registered users and 50 million blog posts featuring Pinterest including MBT. Daily Pinterest users have increased by more than 145 percent since the beginning of 2012. More than one-fifth of Facebook users are on Pinterest every singly day (which equals more than 2,000,000 FB users). It shows how crazily this new social media platform is emerging amongst the already existing giants like Facebook, twitter, Google Plus and LinkedIn.

It therefore becomes the next important referral traffic source for bloggers to increase traffic to their blogs through Pinterest follow buttons and Pin it count buttons. For me honestly debugging the Pinterest code was the most difficult task. Pinterest Goodies Page provides a simple HTML code with a JavaScript link and it contains no dynamic variables/parameters that may work in blogger or wordpress based blogs. They don't have a developers page from where one could fetch relevant information. Thus we had to rely on forums and Wordpress plugins to rip out a code for BlogSpot blogs. This code is so sensitive that if you try to make the slightest change to it, it would not work.

You can see the demo live on our blog just below post titles. We have added a horizontal count button that increments whenever a post is pinned. You don't need to worry about the correct featured thumbnail selection because we are using a custom JavaScript code that will offer your visitors with a wide variety of images to choose from to bookmark/pin your blog post.

Don't forget to read these delicious tips and tutorials!

pinterest counters and buttons

Adding the "Pin it" button

Please don't edit the code below and neither add it inside Tables or div sections because the JavaScript is not well scripted and is sensitive to slightest of change in styling. Use it as given. I will publish fresh posts on how to add it to sharing widget below post titles and to the floating share widget.

  1. Go To Blogger > Template
  2. Backup/restore your template
  3. Click the Edit HTML button
  4. Click Proceed
  5. Click the box "Expand Widget Templates"
  6. Search for this code:

<data:post.body/>

   Now if you wish to add the count button below post titles then you will have to paste the coming codes just above the code in step#6 otherwise if you wish to display the button at the bottom of posts then add the coming codes just below step#6 code.

      7.  Paste the following code below or above (depending on your choice of location) the code in step#6

 

For horizontal count Use this code:

horizontal pin it

<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Now!</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>

For Vertical count Use this code:

<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It now!</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>

      8.   Save your template and you are all done!

 

 

How it works?

Upon clicking the pin it now button, a window will open that contains important thumbnail images on that specific blog post. The visitor will pin just one image and then he will be asked to add it to his Pin boards and share it on his Pinterest account. If suppose the visitor does not want to pin any image then he can simply click the Cancel Pin button to go back to the blog post.

cancel pin

Need help?

Follow this easy tutorial and let me know if you needed any further assistance. We have tried to add all necessary codes to make things work. the variable data:post.url is only included and we did not included one for thumbnails because it is more wise to let the visitor choose a thumbnail of his choice rather forcing him to select one that you automatically provide.  Have fun exploring this new social media bird and we will make sure to educate you with its proper use. Do not forget to Pin this post! :) Peace and blessings pals.





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

84 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Nice Widget Sir,Really I was waiting for your post,Thanks,And really appreciated....but i am thinking pintrest will going to flop...what you say...

    ReplyDelete
  2. @faizan
    if you are thinking that we are wasting time on pinterest because it will flop, lamme clarify you that even if it is the case, even then we can not afford a distance from it because right now, it is in!
    To lead the market,you can not wait and see what will stay and then start accepting it...
    And why are you thinking that they are gonna flop? They have come up with a new idea and most probably a proper marketing plan.

    @apache
    he is pursuing his bachelor's degree in computer systems engineering.

    @mohammad
    nice question asked, what are you studying:p?
    and now kindly reply to all those waiting for you.Don't study that much, you will get sick:).

    ReplyDelete
  3. Nice Button , Just started with Pinterest.

    @faizan Wait and See .....

    Computer Tips and Tricks

    ReplyDelete
  4. Your simple guide was very helpful. It was a success to install Pin on my blog.

    ReplyDelete
  5. Well Google+ now have changed the look completely. FB purchased instagram. What next??

    Pinterest still have lot of things to improve and I think they will. I am not adding the button right now because of no styling. Will be waiting for the next version.


    @Faizan
    We shouldn't care if its gonna be flop or hit if we are looking to drive traffic from it. As bloggers we should take the benefit before it dies :)


    @Rahmeen
    I don't want Mohammad to fall sick :)


    @Mohammad
    Come on Mohammad drink milk or lemon juice, orange juice and best of Watermelon juice daily in this hot season.

    ReplyDelete
  6. @Rahmeen Ahmad Khan
    API you answered why it is flop the reason why it is new.People newer accept new things you can take example of FB Timeline..And in my first look its interface is full of bugs..as i already said it is not allowing me to pin a single topic...

    @Bhavesh Pamecha
    BRO i agree with you totally but if it is unable to bring traffic then why we need to waste our time on it.

    I might change my opinion but currently i still think it will take time...

    ReplyDelete
  7. Oppes i am just changing my opinion after going through my first pin successively at Pinterest I feel its really good for bloggers as currently i have no followers on pinterest but still i got 10 likes for my pin in just 2 minutes and even 2 users repinned it :) really enjoying it now....:D

    ReplyDelete
  8. This post was really helpful and I am thinking of adding to my new blog!

    ReplyDelete
  9. interesting article. thank you for sharing the post.

    ReplyDelete
  10. thnxx bro requested for blogger box templete i subscribe but there is no downloading link on my email my email is yasirsalman57@gmail.com plzzz send me link

    ReplyDelete
  11. Thank you for this great reference. I tried some code from another source and while the Pin It button displayed and I got the popup window, there were no images to select from! Seemed rather pointless.

    Is there a way to have the Pin It image selection window open in a different window or popup? Right now, it uses the same window as the blog.

    ReplyDelete
  12. how to add this pinterest button to the floating widget on the left..otherwise it looks clutterede

    ReplyDelete
  13. Nice trick. Now i am using my blog.
    Visit my blog: Premium Blogging Tips.

    ReplyDelete
  14. Thank you so much, I have tried a number of different guides to adding this button, but only yours has worked for me. Many, many thanks

    ReplyDelete
  15. Thanks for the how-to! I used it and it worked! Genius! Sharing on FB....

    ReplyDelete
  16. hi there, i followed the instructions and get the pin it button at the bottom of the post, but can't seem to get the counter. have tried repeatedly. any suggestions?

    i also have a facebook button nearby; do you think that impacted it?

    finally, any way to make the fb button better or put them all one one line?

    thanks much.

    ReplyDelete
  17. Thank you so much!! I have been trying to figure this out and thanks to your post I've done it! I was so tickled to see that one of recent posts has over 225 pins! So excited! Thanks again! Gonna mention this on FB too!

    ReplyDelete
  18. hi tried to do this but the count is not showing.. i already pinned from several past posts and not even "1" shows.. please check if you can help me. thanks!

    ~K

    ReplyDelete
  19. Thanks a bunch, this was the only one I tried in blogger that actually worked! Watch out Pinterest!

    ReplyDelete
  20. So far this was the only script that we found working. At present I am having exams and not able to create new versions. Remember that you may not add the above code inside a table or any bullet list because the script function works only when there is no close div container around it.

    @hulie

    Please make sure you are not pasting the code inside a div tags or similar. Add the post directly just below data:post.body and it will work just fine.


    I am glad it worked for most of you pals. Let me get free pals. I would surely publish more exciting versions of it and will add them to floating sharing buttons and others.

    ReplyDelete
  21. Thanks for this!

    Added it to my blog easily and I'm excited for any new traffic it brings!

    ReplyDelete
  22. Hello, what if I don't want any counter on my pinterest button? Thanks in advance for your help.

    ReplyDelete
  23. Add pinterest like Back To top button to blogger

    ReplyDelete
  24. You are awesome :) This was so much easier than all the other tutorials out there!

    ReplyDelete
  25. Finally, I get a simple tutorial to install this button from here ... fiuh!

    Thanks in advance buddy... :)

    ReplyDelete
  26. You, sir, are awesome! Thank you so much for making this information available in such an easy form! I used it on www.ceilingcatisblack.com and I also posted it to www.serpiethespider.com (a rough little blog I made with the tricks I'm learning as I go along). Thank you!

    ReplyDelete
  27. Thank you for this wonderful tutorial!
    Since yesterday pinterest button does not report the number of pins: (
    I do not know what to this problem.

    Thank you very much!

    ReplyDelete
  28. My "pin it" button appears at the end of each post and it works, but it catches all the images of the homepage instead of only the ones in the actual post.
    And if I open the post itself, the button doesn't appear at the end.

    Any thoughts on how to solve it?

    ReplyDelete
  29. Hi, I also discovered that the Pinterest button doesn't show the number of pins. Is something wrong?

    ReplyDelete
  30. This comment has been removed by the author.

    ReplyDelete
  31. Thank you so much for this, I found it really helpful and have successfully added 'pin' to my own blog. However, for the less computer savvy, can I suggest you add the instruction 'control + f' when trying to find the first code ? :) Thank you again!

    ReplyDelete
  32. My pin-it button is now showing numbers. Thanks!

    ReplyDelete
  33. I tried to install the pin it buttoon on top of the post but its not showing up...i followed the procedure and i have a facebook like button on top..is this the reason for its not showing up???

    ReplyDelete
  34. Nice post. Great blog. Thanks for the share. Keep posting such kind of information on your blog. I bookmarked it for continuous visit. Thanks once again.
    html5 hosting

    ReplyDelete
  35. Great it worked, I couldn't get last two tutorials to show my pin it widget. Now it shows but on the left hand of the picture, and I would like it to be on the right hand side. Also noticed that when I click pin it on one article it shows all images from my site.

    Is there a way of restricting it to the picture the button is next to?

    Thanks

    Andy

    ReplyDelete
  36. This is great. Thank you very much.

    ReplyDelete
  37. This is really helpful , but i want to ask you that is there an option to show few lines of our post , instead of the blog description. Like rss graffiti in facebook shows few lines of the 1st post instead of description about the blog

    Heres my blog

    http://www.makeupreviewshall.com

    ReplyDelete
  38. Hi, great code! just want to ask if you have any idea how to integrate your pininterest board to blogger? I mean instagram pics can be integrated to blogger, just by accessing this specific program. I made a page on my blog where I placed my instagram pics, what I want to do is to put another page where I can place my pinterest board-do you think that would be possible?

    ReplyDelete
  39. Very helpful post and easy instructions made adding the Pin It button to my blog a success. Thanks!

    ReplyDelete
  40. Thanks Mohammad,
    Is there a way to incorporate the pin it button to all of the other links (emial,blogger,twitter and facebook and google plus)?

    thanks

    ReplyDelete
  41. Hello i already Follow your instruction but the counter is not woking..here is my blog,,please tell me,

    http://tag-picture.blogspot.com/

    ReplyDelete
  42. Thanks for this. It worked for my blog except for the fact that the button appears on the first line of text in the post. (I put the PIN button below the post heading). Is this normal? www.coconutxoxo.blogspot.com Thanks :)

    ReplyDelete
  43. I have looked in the coding and cannot find- data post body to install PINTEREST at the bottom of a post. Can you direct me where it could be, I know everyone's coding is different but is it possible direct me approximately? Thank you B

    ReplyDelete
  44. HI and thank you for the easy step by step method on how to add the pin it button with a counter.

    I followed everything and I do not see my pin it button. Where could I be going wrong? There are a few on my HTML so I posted the PIN IT code right under the first one. Did I do this correctly? Please advise...

    ReplyDelete
  45. This comment has been removed by the author.

    ReplyDelete
  46. Oh god the code got messed up in the previous comment and hence removed.

    @FAITHtastic
    Yeah it doesn't work for me as well. Try this code but I don't know if it counts the number of pins. Let me know.
    Pinterest Button Code

    --
    Top Blogging Ideas

    ReplyDelete
  47. worked perfectly, thank you!

    ReplyDelete
  48. i search and found two occurrences of in my blog html code. I tried to pasting the code after the first occurence but it doesnt work. Similarly when I tried at 2nd one. I'm using dynamic view template for my blog.

    ReplyDelete
  49. Thank you so much! This worked wonderfully.

    ReplyDelete
  50. Hello!

    Thank you for this wonderfull tutorial.

    I have a problem, this script not work if the botton is in a Blogger Page. It's fun in a Blogger Post but not in Blogger Page

    Any idea?

    Thank you very much

    ReplyDelete
  51. Thank you so much for these instructions. I was terrified to make changes to my codes, but your instructions worked like a charm! THANK YOU!!!!

    ReplyDelete
  52. thanks now i can pin to my pintr... account.

    My Blog . Rom Downloads

    www.freegamedownloads-everthing1.blogspot.com

    ReplyDelete
  53. it worked perfectly.thankyou so much.my html template had three data:post.body tags.
    if its not working for somone try pasting the code above/below each of it in turn.in my case it was the second tag.

    ReplyDelete
  54. @amna fatima
    Hi Mohammad,
    Hi Fatima, Mohammad,

    Could you please have a look how the code looks after I pasted it, as it is not working, the p icon is not showing above or below.
    http://bilkaskincare.blogspot.co.uk/

    Many thanks!
    Bilka.

    ReplyDelete
  55. Hi, tried your code and it shows the pin it button with counter at the bottom of my posts as you said, but when I click on the pin it button...I get an error page "Internet Explorer cannot display the webpage" I have tried several versions of this code and always get the same message. How can I fix this?

    ReplyDelete
  56. great tutorial - i'm not tech savy at all and i was able to successfully add this to my blog.

    ReplyDelete
  57. Thanks for this post, they are very helpful!

    ReplyDelete
  58. I used your code and it was working until recently, there's no option for a photo - is anyone else having this problem?

    ReplyDelete
  59. @Maureen Heck

    Yes!! It was working fine last week and this week I only have the option to Pin a cream colored square. Boo!!!

    What's wrong??

    ReplyDelete
  60. @Maureen Heck
    I have the same problem.
    The code suddenly stopped fetching the photos.

    ReplyDelete
  61. This comment has been removed by the author.

    ReplyDelete
  62. @Maureen Heck

    just pasted the code for my blog and I'm having the same issue. No option for a picture just a cream colord box. Everything else is ok. Am I missing something?...

    ReplyDelete
  63. I really appreciating your efforts.. I'll add it soon..

    Vivek recently posted about Aakash 2, Worlds Low Cost Tablet Specifications

    ReplyDelete
  64. SALAM Muhammad its working but when some one click on it, the number(inside in box) isn't counting, reamins on [-]

    ReplyDelete
  65. I have the pin code installed but the counter isnt working. I have had this problem since early december. I removed the previous code I had installed and added your code, but all I get is the pin it button and no counter. www.mommyskitchen.net

    ReplyDelete
  66. This comment has been removed by the author.

    ReplyDelete
  67. Hi Hohammad,
    I installed the code, but when I click on the "pin" button, I do no get any image options to pin. HELP!

    Tamara

    ReplyDelete
  68. thanks a lot. it was a great help :) May Allah bless you (ameen)

    ReplyDelete
  69. Thank you for this post! I have tried a few other sites and their code wasn't working but it finally worked with your code!

    ReplyDelete
  70. Thanks a lot for this tutorial. My only problem with this is that the pin it button does not show on my blog front page but only when i choose to view the post separately. I would like the pin it button to show always? is it possible?
    retseptikatel.blogspot.com

    ReplyDelete
  71. I do not see image either. any thing extra i need to perform ?
    -www.ncooltips.com

    ReplyDelete
  72. Thanks for this! I could not get the horizontal code to work, but was able to get the vertical code to work. For those having problems, try posting it above/below your second instance of in the code. I tried and tried with the first one I found and it would not work. After about giving up I decided to try the other instances of it and it worked on the second.

    ReplyDelete
  73. Please keep updating us with good posts like this!! Thumbs up for this one too!!
    go to market plan

    ReplyDelete
  74. Hurrah, that’s what I was trying to get for, just what a stuff Presented at this blog!! Thanks admin of the site.
    statics

    ReplyDelete
  75. No doubt Pinterest helps in getting traffic to your blogs, I really appreciate the quality content and thanks for the information on how to “pin it”.
    web counter

    ReplyDelete
  76. I think I have really come on the right place for getting the perfect info.
    purchase social

    ReplyDelete
  77. Pinterest helps in getting traffic to my blog also :) thanks for this awesome post.
    Regards,
    Clipping Path

    ReplyDelete
  78. It Isn't working on Blogger SIMPLE template. Any reason? or I've done something wrong?

    ReplyDelete
  79. Wasp dudes! Amazing stuff continues the good work.

    buy cheap likes

    ReplyDelete