Add a Pin It Button to Your Posts

If you are like me, you may have a love of all things Pinterest. I recently added a Follow Me on Pinterest button link to the left side of my blog, but I wanted to be able to add a Pin It button to each of my posts as well. I found quite a few blogs that had tutorials on how to do this, but wanted to share with you the simplest method I've found for doing so. So this tutorial will show you how to add a Pinterest Pin It button to the bottom right of each post. Note that this is just for Blogger users. Follow the steps below.

1. First you need to download one of the Pin It buttons in my Box.net box below. You can use or make your own too, of course. But I wanted to provide some options for you to start with. So grab the one you like. Upload it to your favorite photo hosting site, and get its URL. You will need it later.

2. Next you need to go into your blog's Template area to edit the blog's HTML. In my blog it says Template, then Edit HTML, but yours might say Design then under that it would say Edit HTML. It just depends on which version of Blogger (old vs new) you are using.

3. Before you go any further BACKUP your blog's Template! You never can be too safe where your blog is concerned. So whenever I am going to edit my blog's HTML, I always back it up first. There is a button or link that says Backup/Restore. Click that and choose the option to Backup Full Template. I'm just going to say that I am not responsible for any issues with your blog as a result of you using my tutorial. But you will have no worries if a problem arises if you have backed up the Template first so that you can Restore it to its previous state if need be.

4. Next you need to click that Edit HTML link. It may give you a warning window about editing the HTML, so click Proceed or OK, or whatever option provided that lets you get to the HTML.

5. Then check the option that says Expand Widget Templates.

6. Now you need to use your browser's Edit > Find menu to search your Template for the following line of code: <div class='post-footer'>

7. Once you have found the footer code, copy and paste in the code below immediately beneath it:

<div style="float: right; margin: 4px;"><a href="javascript:void((function(){var%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)})());"><img alt="Pin It" class="aligncenter" src="PutYourImageURLHere" border="0" /></a></div>

Replace the text that says PutYourImageURLHere with the actual URL of the image you uploaded to your photo host in Step 1.

8. Save your Template (or Preview it first to make sure you can see the Pin It button OK, then Save).

Note: If you want to make the Pin It button appear at the bottom left side of your posts instead of the bottom right, then replace <div style="float: right; margin: 4px;"> in that line of code with just <div>.

This is the exact way that I added my own Pin It button here at Tattered Sisters. If you use WordPress.com, I haven't found a way to add the Pin It button there, since there are restrictions and limits where the Template, JavaScript, and HTML are concerned. But if you have a self-hosted WordPress.org blog, there is a Plug In you can add now that I added to my Art Chick Studio blog last night. Click Here for --> WordPress Pin It Plugin

Ok gang, Happy Pinning!