Pinterest Pin It Buttons And Follow Buttons For Blogger And WordPress




| | 110 comments

Grunge Pinterest Logo
In the last post guest author Christine Kane told us Why Pinterest Is The Best New Way To Promote Your Blog.With that in mind it makes sense to make it as easy as possible for visitors to your blog to Follow your pins and Pin your content.So in this post i have some cool Pinterest follow icons and pin it buttons that will work on Blogger blogs, I say this as the buttons from the Pinterest Goodies page will not work on Blogger.You can also use a very useful Wordpress Plugin to have the Pin It Button on Your WP Blog.

Important Update 15/11/2012 - I have had to update the code for the pin it buttons.If you were using the button provided before the date above you will need to switch it to the new code below.

The Pinterest Bookmarklet


First up you can add an easy Bookmarklet button on your browsers tool bar.You can find the button here and you can see video tutorials for adding the pinterest bookmark button to Firefox, Chrome, Internet explorer and more on the Pinterest YouTube Channel.

Pinterest Pin It Button For Wordpress


Download The Wordpress Pin It Plugin Here.

Pinterest Pin It Button For Blogger


Next up is the Pinterest Pin It button, Pinterest have three styles, two have counters as you will have seen on Tweet buttons.As i mentioned if you copy the code directly from Pinterest it will not work on Blogger.However the great Way2Blogging blog have a version that works perfect so we will use that.

First up we need to add a line of script to your template.

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)
</head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

<script type="text/javascript" src="http://way2blogging.github.com/blogger-widgets/w2b-blogger-pinit.js"></script>

Step 4. Save your template, your now ready to add the button.

Below I have previews of the buttons with the code for each (All button previews are working so try them out).Once you have picked the button you want find the tutorial on adding it above or below your Blogger posts below.

Basic Button




Basic Button Code

<div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton">
<data:post.body/>
<script type="text/javascript">
w2bPinItButton({
url:"<data:post.url/>",
thumb: "<data:post.thumbnailUrl/>",
id: "<data:post.id/>",
defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg",
pincount: "horizontal"
});
</script>
</div>

Vertical Count Button



Vertical Button Code

<div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton">
<data:post.body/>
<script type="text/javascript">
w2bPinItButton({
url:"<data:post.url/>",
thumb: "<data:post.thumbnailUrl/>",
id: "<data:post.id/>",
defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg",
pincount: "vertical"
});
</script>
</div>

Horizontal Count Button



Horizontal Button Code

<div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton">
<data:post.body/>
<script type="text/javascript">
w2bPinItButton({
url:"<data:post.url/>",
thumb: "<data:post.thumbnailUrl/>",
id: "<data:post.id/>",
defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg",
pincount: "horizontal"
});
</script>
</div>

Add Pin It Button At Top And Bottom Of Blogger Posts


Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template
 
Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed > Tick The Expand Widget Templates Box as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

<data:post.body/>

To have the button at the top of your posts Copy and Paste the Pin It Button code Directly Above / Before <data:post.body/>

To have the button at the bottom of your posts Copy and Paste the Pin It Button code Directly below / under <data:post.body/>

Follow On Pinterest Buttons And Icons




You can get the selection of four Follow buttons and icons in the image above on the Pinterest Goodies Page.These can be added to a html/javascript gadget on Blogger or a Text sidebar gadget on Wordpress.

That's it all the things you need to take advantage of the new Pinterest craze.Make sure to check out more of our Blog Gadgets and Social Media posts.

Drop Your Comments And Questions Below.
AuthorAuthor - Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.


If You Enjoyed This Post Please Take 5 Seconds To Share It.

Stay Connected With Free Updates

Subscribe via Email

110 comments:

  1. Brilliant! Been waiting for a Pinterest follow me button for ages. Thanks!

    ReplyDelete
  2. Thank you so much! I've been trying to figure it out for a few days. You guys always have the answers.

    ReplyDelete
  3. Thank you!!!! I've been trying to do this all evening and every other tutorial/piece of code I found didn't work. This is perfect!

    ReplyDelete
    Replies
    1. I tried adding a pinterest button to a post but it erased my posts from my blog. I don't know anything about html coding and am afraid to try again. Any suggestions?

      Delete
    2. I think the code for blogger may have an error - my client added it and we add all sorts of problems with our posts. Please check the other website where you got the info from and see if there is an error so others don't end up with the mess we did!!

      Thanks. :)

      Delete
  4. How to add it to floating share icons widget, please guide me ! Please!

    ReplyDelete
  5. Thank you I have been able to add some really nice gadgets to my blog. So happy you have the Pin it button now. I appreciate how easy your site is to use.

    ReplyDelete
  6. Well this is a great idea. to add pinit button.really i liked it.Thanks For Posting !

    ReplyDelete
  7. Thank you for your help! I couldn't figure out how to add Pinterest to my blog before I found your site. I love smart people!

    ReplyDelete
  8. Thank you so much. This is a great idea. Now I will know what to do if I'll face this problem. :)

    ReplyDelete
  9. This only pins the site, not the individual blog post. Is there a way to just pin a post?? Thank you!

    ReplyDelete
  10. I see that it will pin the individual blog post if readers have clicked on that to read, just wondering if there's a way to do it from the home page? Thank you!

    ReplyDelete
  11. Thank you SO MUCH!!!! I appreciate all your posts and because of this website, it helped me to improve my blog much more!
    Thank you

    ReplyDelete
  12. Amazing article....
    Everytime I am in a dilemma related to my blog I take a visit of your blog to find a solution and everytime I found one.

    Really your work is superb.......

    ReplyDelete
  13. Thanks for this tutorial. I'm still a puter novice and sometimes struggle with HTML and understanding computer language.

    It took sometime, but I got there, x

    ReplyDelete
  14. These are vey nice Pinterest Buttons. Can we just use them freely? If so, that would be awesome.

    ReplyDelete
  15. yes! I now have my "pin it" button on my posts! Thank you so much for the easy how-to steps that made this possible!

    ReplyDelete
  16. Thanks so much! This helped me a lot! :)

    ReplyDelete
  17. Thank you I have added to my blog! :-)

    ReplyDelete
  18. Invite me please... @johnnywsandjojo
    may God bless ya

    ReplyDelete
  19. Thank you so much for your help it works great. Thanks for all your timely helpful tips.

    ReplyDelete
  20. Paul, how did you get the Pinterest counter on your widget on the left side of the page?? Love that...I tried copying the code above into my similar widget but it just came in as a text link...

    ReplyDelete
  21. Thanks so much. This worked very well. Just one question: How do I move the button to the far right of my post?
    Thanks.
    Barb

    ReplyDelete
  22. thanks so much! I've tried several and this works!

    ReplyDelete
  23. Thank you sooooooooo very much for this. This is the very first one that came up when I did a search. Thanks again! You saved me a lot of mess.

    ReplyDelete
  24. Tried several snippets of code before landing on yours and it was the only one that worked! Thank you!
    One question, though. Where would I add "target="_blank" to open it in a new window?

    ReplyDelete
    Replies
    1. I had this question too. Here's the answer! In your code: a href="http://pinterest.com/yourpage/" target="_blank"

      Delete
  25. I tried two other codes and they didn't work. Yours did. Thank you! :D

    ReplyDelete
  26. This was the only tutorial I came across that was extremely helpful...thank you!

    ReplyDelete
  27. Worked like a charm first time! You are brilliant ;)

    ReplyDelete
  28. This is very informative and helpful. Thanks so much :-)

    ReplyDelete
  29. can you help me out? the button came out right on the first post but on the succeeding posts it came out beside not picture and not on top of it the way i want it. what should I do? www.shootfirsteatlater.com

    ReplyDelete
  30. This is great but when I use it to pin a photo, the photo options are distorted and it is hard to pick which photo you want pinned .. ? Any help with that?

    ReplyDelete
  31. Moreover while searching i know only about joomla pinterest. but now in wordpress!!! Gr8

    ReplyDelete
  32. Thanks so much! It's looks great on my blog.

    Dee

    ReplyDelete
  33. It's amazing...!!! thanks a lot Sir..

    ReplyDelete
  34. I desperately want a FB, G+, Pinterest and Twitter "link, button (whatever it's called) to show up on each post for people to share that post, AND a "follow" me button for each social media listed above as well.

    I am having a hard time finding a post anywhere that tells me how to get them all to line up (like yours are).

    Do you have a blog post like this? I don't even know what to search for :( I never thought that becoming a photographer would entail learning how to become a computer scientist! ;)

    ReplyDelete
  35. Should I be able to seeit in the preview before i hit save??? cause I can't see it anywhere??

    ReplyDelete
  36. I notice your example showing how to edit html is for the old style blogger.. I have the new style. I put it exactly where its supposed to go and nothing happened. does this not work with the new blogger set up??

    ReplyDelete
  37. Thanks So Much , was easy to do even for a guy like me that knows little about HTML !

    ReplyDelete
  38. OH MY GOSH thank you so much for making this so idiot-proof. I am desperately tech-challenged and if I can do this successfully any one can. I reshared on Facebook, Im pinning this AND im following your blog now for more good ideas. Awesome, thanks!

    ReplyDelete
  39. Now the only bummer, though (and of course this isnt anyone's fault) but if you use the Pin It button fro the main home page, it will pin to the blog, not to the post that the pin it button is attached to. Thats sort of a drag if someone is trying to pin from your main page but... Oh well, I get why it works out that way. Thanks again!

    ReplyDelete
  40. Thank you so much for posting the tutorial and giving the visual images. It took less than 10 minutes!!

    ReplyDelete
  41. this is quite helpful. my blogs have pinterest button now, thanks to this tutorial :)

    ReplyDelete
  42. Worked like a charm, thanks!!
    lacidtoes.blogspot.com

    ReplyDelete
  43. Thank you so much! It's working! :D

    ReplyDelete
  44. Thank you! This is the only one that worked for me.

    ReplyDelete
  45. Finally...you rock! I have been trying to do this for an hour and a half, and your tutorial worked the first time. Thanks so much!

    ReplyDelete
  46. Great, easy to read and apply instructions. Thanks! I now have it set up on my blog, and I'm happy as can be.

    ReplyDelete
  47. thanks so much for this post. i'd read the info on the Pinterest site, and, in hindsight, it makes sense now, but your blog post made so much more sense! i now have the PinIt button after every posting on my blog. can't thank you enough. added you to my RSS feeds as well so looking forward to more tips for a newb like me!

    ReplyDelete
  48. Great post. I will be using your code to put my pinterest button on my blog. Nice share and good timing!

    ReplyDelete
  49. 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
    Replies
    1. Sure Preity, before you click pin highlight the text you want as a description and that will be used.

      Delete
  50. Oke.Now, my site it's ready to pin it..thanks Paul

    ReplyDelete
  51. Thanks,
    Was finally able to get the pintrest button on my blog. I tried using the code from Bloggar Sentral but couldnt get it to work after several tries, however, yours worked perfectly. Thanks once again.

    ReplyDelete
  52. Thank You!!!! It worked perfectly!! I put the "pin it" button under my post!! I feel so powerful:)
    theblueberrymoon.blogspot.com

    ReplyDelete
    Replies
    1. Your Welcome BlueBerry - You've Got The Power !

      Delete
  53. Couldn't find the HTML code to paste it after. The closest I could find was this:

    .post-body {
    position: relative;
    }

    Can you advise how to proceed? I use the Awesome template.

    ReplyDelete
    Replies
    1. R.D. - Did you tick the 'Expand widgets template box' ?

      Delete
    2. I can't even find the expand widget template box on mine. I need help.

      Delete
  54. Paul, I did this and was able to find the relevant code. Thanks for letting me know I had to do this before proceeding.

    ReplyDelete
  55. Thank you so much for this post. Ive been looking for a free way to do this!!

    ReplyDelete
  56. thank you!! i've been wanting a "pin it" button for a while now, cheers!
    http://craftycatchoo.blogspot.ca/

    ReplyDelete
  57. Thank you so much for this post. Pin it button is now on all of my posts! YAY

    ReplyDelete
  58. I use the dynamic view blogger template and followed your instructions excatly but nothing happened. Any idea what I have done wrong?

    ReplyDelete
    Replies
    1. Jenn; this will not work on the Dynamic Views templates.The make up of those templates is different.

      Delete
  59. I use Dynamic View on blogger as well and it did work. However my comment section on my blog would not work and someone told me I had to take the BLOG1 and change it to "BLOG2" instead, neatless to say changing it to BLOG2 made my comment section work again, but the PIN IT button disappeared and so did the rest of my social plugins, geez.

    ReplyDelete
  60. It did not work for me. The first time I did it, nothing showed up, so I thought I put under the second , but then I tried that and it erased all of my posts. SO I deleted the code. then I must have done something to really screw it up because when I search the html for the code again, it says "not found" . HELP!

    ReplyDelete
  61. Question: My PIN IT button is only showing up on individual FB and Twitter posts (not on ALL posts showing on my HOME tab. Any ideas?

    ReplyDelete
  62. Hi there. I have a question. I have a blog/website that's hosted by google sites:
    https://sites.google.com/a/novamenteaz.com/http-www-novamenteaz-com/

    every time I add the Follow me on Pinterest button as a gadget on my home page it shows up but when you click on it a big fat ugly "UNAUTHORIZED" message pops up. Do you have any thoughts or information on why this is happening? It is frustrating me. I'm pretty website retarded this is the first i've built really so, I am learning the ropes but I am just plain old stuck. Thanks!

    -Gina

    ReplyDelete
  63. it works but only when if I don't put a search description in when I post a new blog!! Anyway to correct this.
    For example: I create a new post and publish it and the pin it button is there! However, when I creat a new post and add a search description and then publish it, the pin it button does not show????
    Please help!
    Thank you

    ReplyDelete
  64. Hi! I have an issue, there is no: I tried to search for it manually and with ctrl-f, hat can I do

    ReplyDelete
  65. I read four other tutorials before finding this one, which made sense immediately. Thank you!

    ReplyDelete
  66. Ok... so great tutorial. Made it easy to do. BUT... I was successful in adding the pin it button... but when I tested it and clicked pin it... there were no images that appeared. What did I do wrong?

    ReplyDelete
  67. Thank you so much! ;) i have bookmarked your blog. I have read many other tutorials/articles about adding pinterest button .. yours was the easiest and i finally managed to add the pin button in. !

    ReplyDelete
  68. Thank you for this great post. Worked like a wonder.

    ReplyDelete
  69. I tried this and it didn't work for some reason. I pasted the code directly underneath the first "". Hmmm, what am I doing wrong?

    ReplyDelete
  70. I am having the same issue as Angie. None of my images appear in the preview screen and I just get a blank box. Any idea what causes this?
    http://colorfulengineer.blogspot.com/

    ReplyDelete
  71. Thank you so much for this! My pin it button was working great, now suddenly it's not fetching photos. Do you think I should reinstall or maybe it's a pinterest issue?

    ReplyDelete
  72. Thank you so much for your post. I had been searching for a long time and I came across your blog and it was just on point.

    ReplyDelete
  73. It seems as though it stopped working completely today. Anyone else have this problem?

    ReplyDelete
  74. Thanks for this. Appears and has the count right but will only bring up the first pic of each post and fills the text in with half the text from the post. Is this code definitely working now? cheers and appreciate it :)

    ReplyDelete
  75. how it works when it apear only on image only, not on sidebar or widget?

    ReplyDelete
  76. I have three show up when I search in the edit html area. Where do I paste the code? I tried pasting it after the 1st and 3rd and it didn't work. After reading some fo the comments I am nervous to try anything else. Please help. Thank you!

    ReplyDelete
  77. Okay, I'm pretty good with HTML, I get by, but...HELP! I am doing a new blog and I have successfully added the "follow me on Pinterest" badge, but I CANNOT add the PinIt counter button. I actually had 2 "" in my HTML, so I didn't know which one to add before. I did the first one, but nothing happened, the PinIt counter is nowhere to be found...HELP!!!

    ReplyDelete
  78. Hi Paul! Great tutorial, thank you! I tried another and kept getting errors. Yours finally seemed to work, but I don't see the Pin It button on my blog. I use blogspot. I am a complete novice with html, but otherwise having the same problem as Tamara C. Any ideas?

    ReplyDelete
  79. Hi,
    I tried adding the pinterest button on my Blogger site. I followed all te steps you describe, but when having to add the Pin-button code, I find 3 times the code...
    So do I need to copy the button code 3 times? (I tried it, but without any luck)
    Can you give me any suggestions what might be wrong or what I might be doing wrong?

    Thx!

    ReplyDelete
  80. I have tried to add other codes and yours, and followed the directions exactly, on all and still cannot get it to shop up on my posts...??? I need help!

    ReplyDelete
  81. 3 hours later, I got nothing. Bless your heart, you did a great job with your tutorial. I'm just an idiot and HTML hates my guts. *sigh* I guess I'll just pay someone to do it.

    ReplyDelete
  82. Thanks so much for the great insight!

    I just wanted to pass along another tool called Tint. It lets you display any Pinterest account pins or any Pinterest board pins to your likening. You can totally curate to your preference and then embed it into your website. It took me about 5 minutes to create and integrate into my site with no technical expertise needed. They have infinite scroll and multiple themes to choose from too!

    Feel free to check it out here: tintup.com/blog/the-best-pinterest-for-a-business-widget/

    Thanks,
    Tim

    ReplyDelete
  83. I am so excited! After days of trying to add a Pin It button to my blog your instructions were the only ones that worked. I'm following by email and I've pinned your site to Pinterest under best tech help. It must be your Irishness that finally brought me the luck I needed.
    Blessings to you,
    Patti(Downey)@ OldThingsNew

    ReplyDelete
  84. i am really excited to try this but has there been an update buttons like proceed and expand widges dont show up nor does the code i am stumped

    ReplyDelete
  85. I cannot seem to make this work... nor any of the other tutorials. I thought it made be because I didn't check the 'expand widgets' box, but... there is no 'expand widget box' !! What do I do? I would love this to work!

    ReplyDelete
  86. Hello! I want just a simple "follow" button on my "blogger" blog. Is there even such a thing? I see "follow by email" as an option, but I just want a button so that my readers can follow my blog.

    Or do I just add a "RSS" button - and if so, how???

    Thanks so much for your help!

    ReplyDelete
  87. I think I have really come on the right place for getting the perfect info.
    get pinterest repins

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us