Subscribe by Email RSS

If you scroll down to the bottom of any post here on Kevin & Amanda, 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. Here is an example URL:

http://i238.photobucket.com/albums/ff17/kevinandamanda/pinit.gif

Note: Don’t use the URL above — there won’t be enough bandwidth for everyone and you’ll get a red X instead of the button. Bummer.

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. You’ll also want to delete the “Read More” link that will appear underneath the code when you paste it.

Where to Paste (Blogger/Blogspot)

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

Use CTRL-F to search for: <div class='post-footer'>. Paste the code right above that.

That’s it! 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.

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.

Happy Pinning!

Find me on Pinterest: http://pinterest.com/kevinandamanda/

More from Amanda:

Why Lightroom May Be The Only Photo Editor Yo...

What Settings Should I Use?

A Quick Comparison of Aperture & Bokeh

9 Quick Steps To A Better Blog Experience

Filed Under: Blog Design, Tutorials
Share: | 48 Comments