Skip to main content

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.

Comments

Lori E said…
Who da man? You da man!!! Unless of course you are not a man... then you know.... You da woman!!!!
So simple. Thanks.
Rita said…
Oh my gosh! How I have struggled with the instructions from countless others. How simple was that. Thanks a lot!

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".