Adding A Pinterest Pin To Blog Photos

I've been seeing the Pinterest "Pin It" hover icons, in various blogs, for a few weeks.

Today I decided to try adding an icon to this blog. I spent more time reading the instructions, then installing the icon.

Adding a Pinterest "Pin It" icon, to the photos in the blog, is extremely simple.

Just visit the Pinterest Widget builder page, select the right options, and copy the code provided.

<!-- Please call pinit.js only once per page -->
<script async defer data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

That's the gadget installed here. It has one option.

• "Button type". I selected "Image Hover".

The Pinterest instructions make it harder than I found it to be.

Paste the code just above the closing </body> tag of each page where you want the button to show up on your site.

Who wants to spend time editing the template, to insert two lines of code? Fortunately, that's easily avoided.

From the Blogger dashboard Layout page, use "Add a gadget", add an "HTML / JavaScript gadget", and position the gadget in the footer (out of sight, out of mind). Paste the Pinterest code into the gadget content window.

Save the gadget, Save the Layout page, load or reload the blog, pick any photo, mouse over the photo, and you're done.

There's your new "Pin It" hover button.

A visit to the Pinterest Widget builder page.

A new HTML / JavaScript gadget, stashed in the footer.

And that's the "Pin It" icon. You have to mouse over the photo, and there it is.


And that's it. Far more time consuming to write about it, than to do it.

You next setup a Pinterest profile - and a board or two to post into. But that's another post, later.