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

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

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

 

 

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!

 

 

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

 

 

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

 

 

 

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:

 

 

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. 

 

 

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

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

Heather Wright-Porto
www.BlogsByHeather.com 

 

Comments

[Jennifer]

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!

[Nikki Mans]

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

[Elle]

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

[Soccer Mom Style a.k.a. Maya]

Thanks so much, Heather!!! It worked for my old blogger and I am so excited. Can't thank you enough. btw, I tried to do it from Pinterest before and you're right it did not work for me.
xx
maya
http://byebyesoccermom.blogspot.com/

[Alex]

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

[Tania]

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

[Ambien Side Effects]

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

[Gleeful]

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

[Lisa]

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!

[cernamoora]

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

[Heather]

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

[melissa punt]

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

[Kylie]

Followed your instructions- thank you for sharing!!!

[Melissa]

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.

[Tiffanie]

THANK YOU THANK YOU THANK YOU

[Heather Wright-Porto]

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

[Heather Wright-Porto]

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!

[kitchenMage]

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

[kitchenMage]

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.

[Jill Coleman]

You rock Heather!! Thanks so much.

[Annie]

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

[Dana Rice]

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

[Heather Wright-Porto]

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

[Sharon]

It worked beautifully on Blogger.....thank you!

[Jessica Lamb]

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