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

Add A Custom Redirect, If You Change A Post URL

When you rename a blog, the most that you can do, to keep the old URL useful, is to setup a stub post , with a clickable link to the new URL. Yo! The blog is now at xxxxxxx.blogspot.com!! Blogger forbids gateway blogs, and similar blog to blog redirections . When you rename a post, you can setup a custom redirect - and automatically redirect your readers to the post, under its new URL. You should take advantage of this option, if you change a post URL.

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?".

Blogger Magic - Adding Label Search URLs

One of the simplest ways to make a blog useful is to add label searches. Adding label searches, in page / post text, is not easy - unless you know how to build the URLs. Here's a label search from this blog. http://blogging.nitecruzr.net/search/label/Blogger%20Magic All that I want, when using that label search, is to add another reference to my "Blogger Magic" post series. " Blogger Magic " emphasises how easy it is, to use Blogger. How easy is it, to remember that syntax - to add a label link? Maybe, a " Blogger Magic " reference, in this post?