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('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! :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
