How To Add A Pinterest Pin It Button To An iWeb Site

November 9th, 2012

A short while ago, we posted a video about Pinterest and how it is yet another social media platform that businesses can and should be utilizing. The below tutorial will show you how you can add a Pinterest ‘Pin It’ button to your site made in iWeb. The more ‘re-pins’ your images have, the more likely they are to be seen by more people. More people seeing your image could result in more traffic to your website, and hopefully more sales.


In this video, I’m going to show you how to add a Pinterest Pint It button to your iWeb site. If you are not familiar with Pinterest, please see our video tutorial outlining what Pinterest is and how to use it.

To add a Pinterest ‘Pin It’ button to your website in iWeb, visit your website and locate the image that you want to have the Pin It button for. Locate the URL of the image. You can usually find this by doing a secondary click on the image and then selecting Copy Image Address.

Open up a new tab in your web browser and visit Scroll down a bit until you see Pin It Buttons for Web Sites.

Paste the URL that you just copied into the second text box. Right above the text box it should read URL of the image to pin. Now just quickly go back to your site, and copy the URL of the page that contains that image. Then paste that URL in the first text box which reads URL of the page to pin. You can paste the page’s URL first, and then the image’s URL, it doesn’t matter, but they must go into their respective boxes. Before we do anything else, I want you to take a look at the drop down menu next to Pin Count. You have three options to choose from here, so select the option you like best.

Next, you can put in a description of what is being pinned if you’d like. You will notice that some code has appeared at the bottom after we pasted our second URL. Highlight the code in the first box, just like I am doing, and copy it.

Now open your site in iWeb to the page that contains the same image that you are pinning. Drag and HTML Snippet onto the page, and paste the code. You should notice a box appear, but that box should be empty. Expand this box a bit so that the Pin It button is a bit larger.

If you selected one of the options for showing the pin count, head back to the Pinterest page we were just on, and copy the code located in the second box. Now go back to iWeb, and in that very same HTML Snippet we pasted the Pin It button in, paste this code at the very end. If you missed what I just did, just rewind and watch this step again.

You can add as many Pin It buttons to your site as you want. Just repeat the exact same process we just did. You will not be able to see the Pin It button visible in iWeb, but once you publish the site, you will be able to see it when you visit your page online.

Leave a Reply