How To Put a Pinterest Pin It Button On Your Website

  • follow us in feedly
Published February 11, 2013 by Brad Knutson
Pinterest Pin It

Unlike the previous share button tutorials I’ve gone over, there isn’t one single solution for a Pin It button with a counter. The previous share buttons all shared the page the visitor was viewing, but the Pin It button shares an image from a specific page. Since there can be multiple images on a single page, we have a few options.

The first option is to allow the user to manually select the image on the page they want to pin. The code for this option is short and easy to work with.

Include this code where you want the button to appear:

Then include this code, preferably immediately above the </body> tag:

The Result

I’ll include some random images so you can see the visitor is the one that chooses which image to pin.



The second option is a little more labor intensive. The easiest way to generate the code is to use the widget builder on Pinterest: http://business.pinterest.com/widget-builder/.

You’ll need three pieces of information. The page URL (could be auto generated by using PHP or jQuery if you wish), the image URL, and the description. I’ve inserted the following three pieces of information into the widget builder and here is my code:

As in the first example, you also need the script call for this to work, preferably immediately above the </body> tag.

The Result

The first option seems much easier, and much more user friendly, so I would strongly suggest you choose that option.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

4 thoughts on “How To Put a Pinterest Pin It Button On Your Website

  1. Patty

    I was happy to find an easy (generic) way to add the pin button to my web pages that allows someone to choose from multiple images without going through the pinterest build process. Unfortunately, when I added the code to my page http://www.heartfeltimpressions.com/itty_bitty_bichons.htm, pinterest displays a cream-colored square instead of the images on this page. When I attempt to pin to a board, I get the pinterest error message “Image not found. Close the window and try again”. The line of script code I add to my page just above the /body tag turns red after I insert it on the page, which make me think that dreamweaver sees an error in the code. What am I doing wrong? I’ve used the pinterest builder to add pin buttons to other pages, but it is tedious. I like your solution much better if I can get it to work for me, thanks.

    Reply
    1. Brad Knutson Post author

      It looks like you’ve got some invalid HTML at the bottom of your page, and your link to the Pinterest script is invalid, which is why you’re encountering errors. Your link to the Pinterest script has http”// instead of http://

      You have <script type="text/javascript" src="http"//assets.pinterest.com/js/pinit.js"></script>

      If you fix that, you should be OK. If you want to give my solution a try, let me know how it goes and if you need any assistance.

    2. Patty

      Hi Brad, I did a copy/paste of the code above ()
      After reading your comment, I replaced the quotation mark after http with a colon, which gave me the expected result. Thanks!

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">