Adding a Pin It Button to your Posts - Revised!!

Well.... all that trouble trying to figure out how to add this little button to a post!

Then you figure it out and they change it! Well, this time for the better!

 has made it much easier to add the 'Pin It' button to your posts so your readers can pin you to their boards.


Now you can go to their 'goodies' section on their website, enter in your details and get the code all written out for you!
Click here, scroll down to "Pin It" Button for Websites and you will see this:

Fill in the info asked for, the URL of the webpage you want the pin on, the URL of the image, and the description you want. The description is not necessary but it gives your readers a place to start and can be changed/ replaced by them. You can also specify if you want your pin count next to or above your button, or not at all.

So, now that you have all this fancy code, you can copy and paste it into your blog post in the 'Edit HTML' mode and voila! You have your pin it button.
For specific instructions on which url's to use, see this post Adding Pin It To Your Posts.

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

Testing Pin It

Pin It