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

[Shannon T]

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

[Laura Turner]

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

[Gargee]

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

[Asha@FSK]

This is awesome!!! thank you very much!

[kelly r.]

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

[Jenn Calero]

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!

[Sarah]

Thank you - that was very helpful, works great!

[Heather Wright-Porto]

HI Carole are you still have problems?

[Carole Mork]

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.

[angel]

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

[Claire]

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!

[Sonia Meyer]

Great blog. Printed it to study it further. Thank you.
Sonia Meyer
www.soniameyerauthor.com

[open source developer]

Thanks for sharing. Its good to see fresh content always.

[Catherine Hopkins]

Yay! It worked. Thanks. I too tried a couple of different ways before with no success. Awesome!
http://www.theshinypebble.blogspot.com

[Rachel]

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

[Beth Beard]

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

[Heather Wright-Porto]

You're welcome :D

[Minimal4Me]

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

[natasha`]

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

[Edille Rosario]

Hey, thanks for the tutorials :D

Have save my precious time..

Edille

[S.M.]

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!

[Georganne (LilaLoa)]

You instructions made this SO SO SO easy!! THANK YOU!!!

[Erin]

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?

[Olga]

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

[Colleen]

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