Pinterest - Adding the Pin It to your Posts

Added Friday, August 5th: These instructions still work, but Pinterest has made it easier for you! New post to come Monday!

I guess you all noticed that I posted a strange post a few days ago. I was doing my best to figure out how to add this button to the bottom of a post. I think I finally have a version of this that works!

 is the new 'Virtual Pinboard' site. As you surf the web and find pictures of things you love or want to try, just 'Pin It'. Then people will hopefully follow you and you follow them and back and forth, you get the idea.

If you need an invite, leave me your email address and I will send one to the first five requesters.

So Emily of Sweetly Scrapped and I had the idea of putting a 'Pin It' button at the bottom of our blog posts. Pinterest says it is Oh So Easy! just go here: Pinterest Goodies, scroll down to Pin It Button for Websites, grab the code, and voila! Pin It button.

Ok... not so easy!

Here is their default code:

<a href="http://pinterest.com/pin/create/bookmarklet/?media=http://d3io1k5o0zdpqr.cloudfront.net/images/PinterestLogoNew.png&url=http://pinterest.com/&description=Pinterest%20Logo" id="PinItButton">Pin It</a><script type="text/javascript" src="http://d3io1k5o0zdpqr.cloudfront.net/js/pinit.js"></script>

Below that it says "
Customize your “Pin It” button by modifying this default code with the following parameters:

1. Specify a domain — the domain of the page the user is on
2. Specify a media — the image the user is pinning
3. Specify a description (optional) — the description of the image the user is pinning "

Trying to figure out these customizations was fun! (Not) LOL. If you just put in their default code, your Pin It button will not work!

So here is what we did to make it work:
1. Do not change the first part of the code: <a href="http://pinterest.com/pin/create/bookmarklet/?

2. Decide which image you want to be 'pinned'. Place that image in your post in edit mode. Once you have done that, right click on your image in your 'compose' box.   Choose 'copy link location' and you will have something like this: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYg6K9VCcEv05WGrekj3hFImY0X12o4WBPqsngBbGTn4SQ3-f4VY5HhmDy4o4rFoM3JQ_2BhkNskITozgpUtuF8l12miA80Ka87YNx8LE_swO5KCevG7vecRDgMwg7ZxZdLzVd0pB_Z4w/s1600/Image5.jpg   Place that code after .media='

3. After 'url=' We had trouble here.  What we finally did that worked was this: First you need to actually publish your post. Then go to the post's actual page, not your blog's home page, copy that url which in this case looks like this: http://kzembroidery.blogspot.com/2011/07/pinterest-adding-pin-it-to-your-posts.html and use that.

There may be a better way, but this is what worked for me.

4. Add a description of your image that will post to Pinterest. After 'description=' in place of Pinterest%20Logo  I changed it to say description=Add Pin It Button Explained

Got all that? So to put the pin it button at the bottom of this post I used this code:


<a href="http://pinterest.com/pin/create/bookmarklet/?media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYg6K9VCcEv05WGrekj3hFImY0X12o4WBPqsngBbGTn4SQ3-f4VY5HhmDy4o4rFoM3JQ_2BhkNskITozgpUtuF8l12miA80Ka87YNx8LE_swO5KCevG7vecRDgMwg7ZxZdLzVd0pB_Z4w/s1600/Image5.jpg&amp;url=http://kzembroidery.blogspot.com/2011/07/pinterest-adding-pin-it-to-your-posts.html&amp;description=Add%20Pin%20It%20Button%20Explained" id="PinItButton">Pin It</a><script src="http://d3io1k5o0zdpqr.cloudfront.net/js/pinit.js" type="text/javascript">
</script>

And when you click on it you should see this:

Hopefully this will make it a bit easier to add the button to your posts!

Pin It