Updated 2014
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. The code will look similar to this:
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.
Open the Template Search
Next, open your template by clicking the "Edit HTML" button below your "Live On Blog" screenshot.
We're going to use the template search feature to search your code. Your browser's search function can't search the code, so be sure to follow these directions exactly.
- Place your cursor on the template code.
- Click once.
- Press CTRL and F at the same time (PC) or Command and F (Mac).
The search box will open in the upper right corner of the template editor.
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 words "async defer" from the code. This is important, your template will not save unless you remove the words "async defer".
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?
Now, let's check out some more advanced things you can do to customize how the buttons work on your blog.
Advanced Options
Link "Homepage" Pins to the Right Post
If you do a lot of Pinterest browsing, you've probably had this happen to you: you click on a Pin for a recipe you want to try or an article you want to read, and end up on the home page of the blog, not the post you wanted to see! That happens when a reader Pins from the home page of a blog that doesn't have Pinterest's data-pin-url attribute on the images. You can add that to your blog with the code from this tutorial: Link Pinterest Pins to the Right Post on Blogger.
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:
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
