Pinterest: How to add the “Pin It” button to the bottom of your blog posts

by | Jan 30, 2012 | HOW TO: Pinterest | 54 comments

Pinterest_Favicon

This question, "How to add the 'Pin It' button to the bottom of my blog posts?" has been a very popular one and now I see why!

First, this is a first Pinterest post in a series of them that are coming. There are many aspects of Pinterest so I will break them out into separate tutorials. This is the first.  The next one is to add the "Follow Me on Pinterest" to the sidebar.  Then after that it will be tutorials on inviting people to Pinterest, following people on Pinterest, creating Pinboards, adding the PinIt in your browser's toolbar and more!

 

Adding the "Pin It" button

In writing this tutorial, as with others, I test the methods in Blogger, TypePad and WordPress.com (free). Although Blogger gets a lot of heat as not being "up to par" with the others, Blogger continues to be the easiest in customizing the template and overall look and functionality of a blog 😀

Ok, onward we go!

"Pin It" Button for Websites

Let me say that Pinterest does have a "Pin It" Button for Websites area (under About, Pin It Button), but it does not work for blogs the way you think it would. At least I tried a few variations and could not get it to work properly. And "that" is why I am getting a lot of inquiries about how to do it! So I found another way….

 

PinItButtonPosts

 

It is instead used to have a particular product or sample "pinned", not where it is is Pin It share button at the bottom of a post, but rather where you would show a sample of a product or project in your blog, then add a Pin It button right below it to only "pin" that specific product or project.

If you had to do this manually in every post, for every sample you were sharing, it would take a while.

So…we are going to discuss how to really create a "Pin It" button.  Where Blogger and self-hosted WordPress blogs are the only platforms (that I cover here at Blogs By Heather) that truly allow it in the post footer area.

Let's start with Blogger

  • Get to your code.
    • If you are using the Old Blogger interface, go to Design from your Dashboard, then Edit HTML.
    • If you are using the new Blogger interface, go to your blog, then from the left side click on Template, and then click on Edit HTML (and then click Proceed to see the code).
  • Click on the check box to Expand Widget Templates (see mine is checked in the sample code below).
  • Then click the CTRL + F keys to perform a "Find" and search for post-footer or post-footer-line-1.  In this example I am at the end of the post-footer-line-1 code as you can see the code for post-footer-line-2 shown.
  • I copied and pasted THIS TEXT which you can use (click here to view). It's the same for us all.  Pinterest had a different set of HTML/JavaScript that wasn't working correctly, so I found these instructions (by Kitchenmage) and made them work for Blogger and Typepad. Continue….

Here is the text copied:

<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);
e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,
&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?
r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img alt='Pin It' 
onclick='doPinIt();' src='http://i493.photobucket.com/albums/rr300/blogsbyheather/PinIt.png' 
style='margin: 0 0 0 0;'/></a>

However, click here to download/view the text file in case TypePad distorts and reformats any of the code!

 

PinIt-Blogger

 

I put surrounding <p> and </p> around the code to put it on its own line as it was not lining up neatly for me.

So when you are done copying and pasting the code above <p class='post-footer-line post-footer-line-2'/>. Click Save Changes (or Save Template as I am using the new Blogger Interface).

And that's it, you're done for Blogger!

Here is what my blog looks like now in the post footer area (www.HandStampedByHeather.com).

 

PostFooter

 

Now, let's discuss TypePad

I'm sure TypePad will put a check box for Pinterest soon enough to its Post Footer Configuration settings (Design->Content->Post Footer) where all the other Facebook, Twitter, Digg and more are currently; but for now it cannot be added to the bottom of each post (unless you are using Advanced Templates – which most people do not and I do not advise to use Advanced Templates unless you are comfortable with HTML and CSS coding).

So, the work-around is to add the Pin It button to the Navigation Bar on your blog and visitors can quickl and easily see it when visiting your blog and "pin" what they like! Click here are instructions by TypePad which is more of a link to your Pinterest site then a "Pin It" function.

In following these instructions by Kitchenmage I found on the web: 

  • From the Dashboard, go to Design.
  • Then Content.
  • Then check the check box for Navigation Bar and click the yellow Pencil to the right.
  • You are now in the Navigation Bar Configuration screen in Simple view. You need to click Advanced so it looks more like this (below).

 

PinIt-Typepad

 

 

At the bottom of this screen is where I put the code previously referenced (click here to view the text file).  In addition I had to add a <LI> (list tag) as that is how TypePad creates the Nav Bar in Advanced mode.

So notice where I added:

<li class="nav-list-item">

paste in code in text file here…

</li>

  • Then, click OK and it closes the Nav Bar Configuration window. 
  • Then click Save Changes again in the main Content window (normally at the bottom left). Yes, both are a must!

And now you will see Pin It in your Nav Bar like this:

 

PinItNavBar

 

Of course, to make everything look nice, I would suggest having images/buttons created for all your nav bar links (Home, Archives, Subscribe, Profile, Facebook, Twitter, etc.).

Pinterest with WordPress blogs

With a self-hosted WordPress blog, like those hosted by my buddy, www.WebsByAmy.com, or Blue Host or Host Gator, can download and install a Pinterest plug-in here.  And that always seems easiest enough and why people love WordPress blogs. 

However, for the free WordPress.com you cannot add the Pin It share button in your post footer. You can however add the Follow Me on Pinterest in your sidebar! That's going to be covered this week in my next Pinterest post!

Here is where you can see a sample of how it appears in a sidebar. 

 

Pinterest-in-sidebar

 

To learn more about the difference between free WordPress.com and self-hosted WordPress blogs (not free), click here. If you need WordPress hosting, see my pal Amy Celona at www.WebsByAmy.com and tell her I sent ya! 😀

I hope you enjoyed this article, the first in a Pinterest series. Be sure to download/view the text file used (click here) when working with your Blogger or TypePad blogs.

Happy Pinning!

Heather 😀

Heather Wright-Porto
www.BlogsByHeather.com 

 

54 Comments

  1. Jessica Lamb
    Jessica Lamb on January 30, 2012 at 8:47 am

    thanks! i got the pin it in the nav bar using the instructions!

    Reply
  2. Sharon
    Sharon on January 30, 2012 at 4:53 pm

    It worked beautifully on Blogger…..thank you!

    Reply
  3. Heather Wright-Porto
    Heather Wright-Porto on January 30, 2012 at 5:02 pm

    Hi Sharon! Hi Jessica!
    Thank you ladies for testing my instructions – on Blogger and Typepad. Very cool and very much appreciated. Thank you for testing! Thanks for following me!

    More Pinterest to come! 😀

    Reply
  4. Dana Rice
    Dana Rice on January 31, 2012 at 6:55 pm

    I just embedded the code to my site on Blogger. You are a lifesaver!

    Reply
  5. Annie
    Annie on January 31, 2012 at 9:51 pm

    Wow, thank you for the instructions. THANK YOU for having your blog!

    Reply
  6. Jill Coleman
    Jill Coleman on February 2, 2012 at 1:09 pm

    You rock Heather!! Thanks so much.

    Reply
  7. kitchenMage
    kitchenMage on February 3, 2012 at 3:15 pm

    Hey, thanks for spreading the word. If you go back to kitchenmage, you’ll see I now have the cute button with number of pins at the top of the posts. (Excuse me while I dance.) Need to tweak a few things before I release the code but if you have advanced templates it’s actually pretty easy.

    Reply
  8. kitchenMage
    kitchenMage on February 3, 2012 at 8:48 pm

    Did my comment get deleted? Not in moderation, not published… What’s up with that?

    Reply
  9. Heather Wright-Porto
    Heather Wright-Porto on February 4, 2012 at 4:38 am

    Hi Kitchenmage!!!!
    That is very, very cool!
    Let me know when it’s ready to go and I’ll try it and then update a post about the “upgrade” to the Pin It you did.

    Thanks for visiting and for letting me know!

    Reply
  10. Heather Wright-Porto
    Heather Wright-Porto on February 4, 2012 at 4:39 am

    Hi again Kitchenmage!!!

    Yes, I have the comments on “moderation” because I get too much spam (drives me nuts). LOL.

    So it normally takes me a day to get to them. Sorry about that. But thank you for commenting and let me know when you’re new Pin It code is ready!

    have a great weekend!
    Heather 😀

    Reply
  11. Tiffanie
    Tiffanie on February 6, 2012 at 9:21 am

    THANK YOU THANK YOU THANK YOU

    Reply
  12. Melissa
    Melissa on February 6, 2012 at 9:09 pm

    Hi Heather! You are a genius, and thank you so much for the informative post! I just started my blog, and now I have a Pin It button thanks to you.

    Reply
  13. Kylie
    Kylie on February 7, 2012 at 1:58 pm

    Followed your instructions- thank you for sharing!!!

    Reply
  14. melissa punt
    melissa punt on February 9, 2012 at 7:49 pm

    thanks SO MUCH! i got it! been messing following other directions for 2 days! yours worked!!! thanks a million!!

    Reply
  15. Heather
    Heather on February 11, 2012 at 1:48 pm

    thank you so much! you are the first one I’ve found with instructions that actually work!

    Reply
  16. cernamoora
    cernamoora on February 17, 2012 at 7:06 pm

    Thank you! Your instructions are the only I´ve found that actually work!

    Reply
  17. Lisa
    Lisa on February 21, 2012 at 8:00 am

    Thank you so much Heather! I’d noticed people were ‘pinning’ some of my things and wanted to make it easier on them and you made that possible. Your instructions are well-done and easy to follow. Thank you again!

    Reply
  18. Gleeful
    Gleeful on February 21, 2012 at 7:46 pm

    I’ve been surfing around trying to find instructions to put the button on and it hasn’t worked – yours did. Thanks!

    Reply
  19. Ambien Side Effects
    Ambien Side Effects on February 25, 2012 at 11:51 pm

    Great, thank you very much for this tutorial. I was looking for following button on my blog as I feel that Pinterest is surely going to grow more and that’d help get more traffic to the blog!

    Sahil

    Reply
  20. Tania
    Tania on February 26, 2012 at 8:27 am

    Thanks! Was searching EVERYWHERE and got it to work with your help. It was quick and easy. 😉

    Reply
  21. Alex
    Alex on March 1, 2012 at 7:02 am

    Hi Heather!
    Thank you for sharing!!!
    Do you know how to put a counter??
    Thanks a lot.

    Reply
  23. Elle
    Elle on April 12, 2012 at 11:56 am

    This is the 4th blog I have looked at trying to figure it out and I FINALLY did it. Thank you!

    Reply
  24. Nikki Mans
    Nikki Mans on April 20, 2012 at 8:01 pm

    Thanks so much! Just added it to my blog!! (And pinned your instructions!)

    Reply
  25. Jennifer
    Jennifer on April 26, 2012 at 11:04 am

    I looked at a lot of directions to do this and tried out what they had listed. Yours is the only one I found that is correct and did the job. Thank you so much for sharing!

    Reply
  26. Colleen
    Colleen on June 3, 2012 at 5:05 pm

    Have been trying to get the button to work for months and yours is the first tutorial that was able to get it in working order! Thank you so much – it’s appreciated more than you know 😀

    Reply
  27. Olga
    Olga on June 9, 2012 at 10:49 pm

    oh I need help!
    I get confused after I find the post footer line 1..THEN What? where do I paste the code? Please help me!
    vintageprettyo@gmail.com

    Reply
  28. Erin
    Erin on June 11, 2012 at 11:15 am

    I’ve tried this several times with blogger, but keep receiving error messages when I try to preview it, so haven’t saved anything yet. I’ve backed up my blog template but I don’t want to go through the mess of trying to restore it. Not sure where I’m going wrong. Any ideas?

    Reply
  30. S.M.
    S.M. on June 19, 2012 at 7:48 pm

    I just came across this! Thank you soooo, much! I have wasted 2 days trying to figure rhis out from 2 other blogs, but your worked on my first try! Again, thank you!

    Reply
  31. Edille Rosario
    Edille Rosario on June 30, 2012 at 10:57 pm

    Hey, thanks for the tutorials 😀

    Have save my precious time..

    Edille

    Reply
  32. natasha`
    natasha` on July 19, 2012 at 5:31 am

    THANK U!This was the best tutorial i found ,and successful as well, greatly appreciated!!

    Reply
  33. Minimal4Me
    Minimal4Me on August 14, 2012 at 6:40 pm

    Thanks so much. I’ve tried a few scripts that didn’t work. I really appreciate how quick and easy you made it.

    Reply
  35. Beth Beard
    Beth Beard on August 21, 2012 at 8:43 pm

    Thank you Heather! You made it so easy and I have searched all over and had my blog all wonky and couldn’t fix it. You Rock!!

    Reply
  36. Rachel
    Rachel on September 18, 2012 at 5:32 pm

    Of all the tutorial, yours was the only tutorial that worked for me. THANK YOU.

    Reply
  40. Claire
    Claire on October 7, 2012 at 6:54 pm

    WOW-you’re a lifesaver-pulling my hair out since August trying all sorts of “pin it” buttons-yours worked like a charm-thanks for your clear and precise tutorial-appreciate your tech brain!

    Reply
  41. angel
    angel on October 11, 2012 at 12:53 pm

    Thank you 🙂 Quick and easy!
    I appreciate the time and effort you spent on this tutorial.

    Reply
  42. Carole Mork
    Carole Mork on October 25, 2012 at 7:01 am

    I am trying to do this but when I click the CTRL + F keys to perform a “Find” to search for post-footer or post-footer-line-1, two of them come up. One is highlighted in blue & one is highlighted in yellow. Which one do I post the code after? I am using Blogger. Thanks.

    Reply
  44. Sarah
    Sarah on November 14, 2012 at 11:38 am

    Thank you – that was very helpful, works great!

    Reply
  45. Jenn Calero
    Jenn Calero on January 9, 2013 at 5:53 pm

    Hi Heather, thank you so much for this tutorial! I had tried several others from various sites and none worked. I was loosing my mind trying to find one. Yours did it! Thanks!

    Reply
  46. kelly r.
    kelly r. on January 13, 2013 at 3:09 pm

    OH MY GOODNESS! Thank you so much! This is the first tutorial that worked for me and that made sense as I was reading through it! Thank you, thank you! I’ll be sharing this on my blog tomorrow!!!

    Reply
  47. Asha@FSK
    Asha@FSK on February 14, 2013 at 10:13 am

    This is awesome!!! thank you very much!

    Reply
  48. Gargee
    Gargee on March 5, 2013 at 6:47 am

    Thanks! This helped a lot. I have no clue about coding. I just followed your instructions.
    However, the pin doesn’t appears in the same line as the other buttons. I am on Blogger. Can you help? Thanks again

    Reply
  49. Laura Turner
    Laura Turner on March 27, 2013 at 7:57 pm

    Thanks so much, Heather. I’ve been trying to do this for weeks, and your instructions and code worked perfectly! Laura

    Reply
  50. Shannon T
    Shannon T on April 27, 2013 at 10:46 pm

    I am struggling to get this to work. Is the code still valid?

    Reply
  51. Deb@CookingOnTheFrontBurner
    Deb@CookingOnTheFrontBurner on May 8, 2013 at 8:31 pm

    Thank you so much!!!!!!!! After spending 2 hours of my life that I won’t get back, I was thrilled to find you and this tutorial! It works perfect and was exactly what I was looking for!

    Reply
  52. Wendy AppleApricot
    Wendy AppleApricot on June 22, 2013 at 2:07 am

    Thank you Heather!!!!! I’ve changed the button though to a custom one by replacing your image url to my own in photobucket. Thank you so much, this was really helpful! Happy day to you, Wendy

    Reply
  53. homepage
    homepage on September 13, 2013 at 9:15 am

    Hi! I’ve been reading your website for a while now and finally got the courage to go ahead and give you a shout out from Huffman Tx! Just wanted to say keep up the good job!

    Reply
  54. Jonathon
    Jonathon on October 7, 2013 at 9:42 pm

    I really like your blog.. very nice colors & theme. Did you make this website yourself or did you hire someone to do it for you? Plz reply as I’m looking to create my own blog and would like to find out where u got this from. thank you

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *