How to add a PIN IT button to your blog

If you scroll down to the bottom of any post here you’ll see a “Pin It” button that you can click on to pin the image of your choice onto Pinterest. Adding a “Pin It” button of your own is so ridiculously simple to do! Here’s a quick tutorial that will show you how to automatically add a “Pin It” button of your own down at the bottom of every post on your blog, for Blogger, Blogspot, and self-hosted WordPress blogs.

Choose an Image

First you’ll need to choose the image you want for your “Pin It” button. Here’s the one I use. Feel free to right-click and save it to use for your button, too.

You can also do a Google Image search for Pinterest Icon for more button options.

After selecting your image, upload it somewhere so it will have its own URL, like Flickr or Photobucket. 

The Code

Here’s the code you’ll use to place the “Pin It” button on your blog.

<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!" style='border: none;' src="INSERT IMAGE URL HERE"/></a>

Paste this code onto your blog (I’ll show you where below), then replace the INSERT IMAGE URL HERE with the URL for your button.

Note: Be sure to place this exact code on your blog, or else it won’t work. 

Where to Paste (Blogger/Blogspot)

From your Blogspot Dashboard, click on the  Design tab, then Edit HTML. Click the Expand Widget Templates checkbox.

 Where to Paste (WordPress)

For a self-hosted WordPress blog, navigate to your WordPress Dashboard, look for the Appearance heading, then click on Editor. From there, select Single Post (single.php).

Use CTRL-F to search for php the_content. It might look something like this: 

<?php the_content(‘Read more &raquo;’); ?>. Paste the code below that. Save and view your blog!

Note: If you need extra spacing between your post and the “Pin It” button, just add 

<br /> above the “Pin It” button code. You can add as many as you want, above or below the code, for as much space as you need.

Troubleshooting

What if the image doesn’t appear? What if I only see a red X? What if it only shows text and not the image?

Double check and make sure the Image URL is correct. It will just show text if there is something wrong with the image or the image URL. For Photobucket, use the Direct Link as your URL.

To test: Copy and paste the Image URL into a new browser window and confirm that the image appears, and just the image — not a webpage with the image on it. If just the image appears, that is the correct Image URL.

Good luck and Happy Pinning!