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….
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('script');
e.setAttribute('type','text/javascript');e.setAttribute('charset',
'UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?
r='+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! 😀
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
thanks! i got the pin it in the nav bar using the instructions!
It worked beautifully on Blogger…..thank you!
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! 😀
I just embedded the code to my site on Blogger. You are a lifesaver!
Wow, thank you for the instructions. THANK YOU for having your blog!
You rock Heather!! Thanks so much.
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.
Did my comment get deleted? Not in moderation, not published… What’s up with that?
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!
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 😀
THANK YOU THANK YOU THANK YOU
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.
Followed your instructions- thank you for sharing!!!
thanks SO MUCH! i got it! been messing following other directions for 2 days! yours worked!!! thanks a million!!
thank you so much! you are the first one I’ve found with instructions that actually work!
Thank you! Your instructions are the only I´ve found that actually work!
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!
I’ve been surfing around trying to find instructions to put the button on and it hasn’t worked – yours did. Thanks!
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
Thanks! Was searching EVERYWHERE and got it to work with your help. It was quick and easy. 😉
Hi Heather!
Thank you for sharing!!!
Do you know how to put a counter??
Thanks a lot.
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/
This is the 4th blog I have looked at trying to figure it out and I FINALLY did it. Thank you!
Thanks so much! Just added it to my blog!! (And pinned your instructions!)
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!
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 😀
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
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?
You instructions made this SO SO SO easy!! THANK YOU!!!
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!
Hey, thanks for the tutorials 😀
Have save my precious time..
Edille
THANK U!This was the best tutorial i found ,and successful as well, greatly appreciated!!
Thanks so much. I’ve tried a few scripts that didn’t work. I really appreciate how quick and easy you made it.
You’re welcome 😀
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!!
Of all the tutorial, yours was the only tutorial that worked for me. THANK YOU.
Yay! It worked. Thanks. I too tried a couple of different ways before with no success. Awesome!
http://www.theshinypebble.blogspot.com
Thanks for sharing. Its good to see fresh content always.
Great blog. Printed it to study it further. Thank you.
Sonia Meyer
http://www.soniameyerauthor.com
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!
Thank you 🙂 Quick and easy!
I appreciate the time and effort you spent on this tutorial.
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.
HI Carole are you still have problems?
Thank you – that was very helpful, works great!
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!
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!!!
This is awesome!!! thank you very much!
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
Thanks so much, Heather. I’ve been trying to do this for weeks, and your instructions and code worked perfectly! Laura
I am struggling to get this to work. Is the code still valid?
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!
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
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!
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