March 26, 2014

How to Use the Official Pin It Hover Buttons on Blogger - Updated 2014

Pin It Buttons for Blogger

Pinterest's official hovering "Pin It" buttons have improved in 2014 — there are more button options, and they load faster than ever. And, in the year since I wrote my original tutorial, I've come up with a few new code snippets to help you control where the buttons appear on Blogger blogs. Since there's so much new stuff to tell you, it's time for a brand new tutorial. Let's get started!

What You'll Learn

This tutorial will show you how to add the official hovering Pin It buttons to your Blogger blog. The buttons will show up in the upper left corner of your post images when your readers hover over the images.

Compatibility

These buttons work on all Blogger templates except Dynamic Views, which doesn't accept customization. The buttons appear on images with a minimum width of 200px and a minimum height of 100px. Smaller images are skipped.

Get the Code

To get your own button code, go to the Pinterest Widget Builder (opens in a new window).

Make sure that the "Button Type" option is set to "Image Hover", then choose your favorite button style.

You get a choice of small or large rectangular buttons in gray, white, or red, or small or large round buttons in red. You can preview each button style to choose the right one for your blog.

Once you've chosen your button style, copy the code in the grey box below the preview image to your clipboard.

Back Up Your Template

From your Blogger dashboard, go to "Template" and click the "Backup/Restore" button in the top right corner. Save the .xml file somewhere safe.

Find the </body> Tag

Next, open your template by clicking the "Edit HTML" button below your "Live On Blog" screenshot.

When your template is open, hover your cursor over the code, click once, and press CTRL and F at the same time (PC) or Command and F (Mac). This will open a search box in your template.

Enter </body> in the search box, then press enter. The code will "jump" to the </body> tag in your template and highlight it in yellow.

Add the Code

Immediately above the </body> tag, enter the code you got from Pinterest.

Before you save your template, remove the word "async" from the code. This is important, your template will not save unless you remove the word "async".

Press the orange "Save Template" button up top to save your template. Then, go look at your blog. You should see the Pin It buttons you chose in the upper left corner of your images when you hover your cursor over each image. Nice, right?

For most blogs, that's all you need to do. Enjoy your buttons!

Advanced Options: Removing Unwanted Buttons

If you have buttons showing up where you don't want them to be, don't worry; you have options!

Remove the Button From Specific Post Images

If you want to take the Pin It button off of an image or two in a post or on a static page, you can use the "nopin" attribute. To "nopin" an image, switch over to the HTML view of your post or page, and find the img src HTML markup for the image you'd like to "nopin". It will look something like this:

HTML view of an image in Blogger

Enter nopin="nopin" right before the closing slash and angle bracket of your image element, like this:

When you save your post, the Pin It button will disappear from that image.

Remove the Buttons from a Group of Post Images

Sometimes you'll want to remove the Pin It button from a large group of images in a post or static page. After an initial setup, this method will let you "nopin" larger groups of images quickly.

First, back up your template! Then, open your template code by going to Template > Edit HTML. Find the </body> tag again, and enter the following bit of JavaScript directly above the </body> tag.


<script type="text/javascript">
var nopinimg = document.querySelectorAll('.nopin img');
 for(var i = 0; i < nopinimg.length; i++) {
   nopinimg[i].setAttribute('nopin', 'nopin');
 }
</script>

Save your template. Nothing will change yet; this code is the foundation for the next bit of code you'll use.

Now, switch to the HTML editor of the post with the group of images, and find the code for the first photo in the group. It will look something like this:

Add this line immediately above that first image:


<div class="nopin">

Then, find the last image in the group. Its code will look very similar to the code for the first image. Immediately below the last image, enter this closing div tag:


</div>

Save your post, and the Pin It buttons will disappear from all of the images you wrapped in the div. The next time you want to "nopin" a bunch of images, just wrap them in the div; there's no need to re-install the JavaScript part of this code.

There's a shortcut if you want to remove the button from all of the images in a single post — just add the first div tag above the first line of your post, and the closing div tag below the last line of your post. All of the images inside that div will lose their buttons.

Remove the Pin It Button from the Header

If the Pin It button appears on your header and you'd like to remove it, you can do it with a little snippet of code!

First, back up your template again. Then, find the </body> tag again, and enter this code snippet directly above the tag, after your Pin It button code:


<script type="text/javascript">
document.getElementById("Header1_headerimg").setAttribute("nopin","nopin");
</script>

Save your template, and the Pin It button will disappear form your header.

Remove the Pin It Button from Sidebar Images

The Pin It button may appear on your sidebar images, too. If you'd prefer that it didn't, you can add the "nopin" attribute! There are two ways to do that, and the how-to depends on how you added the images to your blog.

HTML/JavaScript Gadget Images

For images in an HTML/JavaScript gadget, open your gadget and find the <img> element(s) in your gadget. Add nopin="nopin" right before the closing slash and angle bracket of your image element(s), like this:

Image Gadget Images

If you added your images through the Image gadget, you can add the nopin attribute through the template editor. It's a little trickier than the other methods in this post — if you're not familiar with the template editor, I recommend reading How to Use the New Blogger Template Editor first to get comfortable with how it works.

Before you edit your template, be sure to make a backup.

To find your image in your template, you'll need the widget ID for your image. To get it, go to your blog and hover your cursor over the wrench icon at the bottom of your image gadget. When you do that, you'll see a URL appear at the bottom of your browser window. Look for "widgetID=" in the URL. The widget ID will say "widgetID=ImageX", where X is the image ID number.

Once you have your template backed up and know your widget ID number, go to Template > Edit HTML and select your image by its widget ID from the "Jump to Widget" menu.

The template will jump to your image widget. Expand your widget's code by clicking the small black arrows at the left of the template editor, until the code is completely expanded.

Find this segment of the code:


<b:if cond='data:link != ""'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:if>

Add nopin='nopin' immediately after 'data:width' in both places it appears in the code. When you're finished, the code should look like this:


<b:if cond='data:link != ""'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width' nopin='nopin'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width' nopin='nopin'/>
      </b:if>

Preview your template to make sure everything still looks the same before saving. If you get an error message or anything looks weird, press the "Revert Changes" button and start over. If everything looks good, press "Save" to apply your changes. When you go back to your published page, the sidebar pin it button will be gone!

Show Off Your Buttons!

Once you're done with this tutorial, I'd love to see your buttons! Leave a comment with a link to your blog, Tweet at me on Twitter, or comment on this tutorial's post on Google+.