April 9, 2012

Add Pin It Buttons to Your Blogger Posts

pin it buttons for blogger

Update: May 2013 Many more Pin It options for Blogger have become available in the year since this post was written — including new, easy-to-use official Pin It buttons! See The Big Guide to Pin It Buttons for Blogger for an overview of 6 different options.

Ah, the Pin It button. If you follow the official Pin It button installation instructions on the Pinterest site, it is the clunkiest, hardest-to-implement social media button ever. An active blogger could spend the rest of their life trying to add the button with those instructions.

In my quest to find a non-ridiculous way to add Pin It buttons to post images in Blogger, I Googled around and tried a bunch of different tutorials. But, I wasn't thrilled with what I found. So, I took my search off Google and on to Github, where I found a script I could modify to work on Blogspot blogs in a way that makes me happy. Perhaps it will make you happy, too!

Today I bring you:

How to Add a "Pin It" Button for Each Photo in a Blogger Post


Difficulty: Brave Beginner to Intermediate
The default installation is simple cut & paste. The optional advanced customizations require extra time and attention.

What the Code Does:

  • Gives every image in your blog post its own Pin It button.
  • Automatically fills in the Pinterest description with your post title (this feature can be disabled).

Demo

I've installed these buttons on my demo site at codeitpretty.blogspot.com.

Button Requirements

Note: This will not work on the old "classic" templates (like Minima) or Dynamic Templates blogs. Some custom templates are also not compatible with these buttons. A list of known incompatible templates is here. Be sure to test your blog for timestamp links with the instructions below before continuing with the tutorial.

Before beginning this tutorial, enable the timestamp links for your blog posts by going to "Layout" and clicking the "Edit" link in the "Blog Posts" column. Make sure the timestamp option is checked like in this screenshot:

blogger post options screen with a highlight on the timestamp link option

Once you've checked the timestamp link, press save and look at your blog. You should see clickable timestamp links in your post footer. The timestamp link is highlighted in this screenshot:

screenshot of a timestamp in a post footer

If you don't see timestamp links in your post footer, these buttons are not compatible with your template. Sorry! There are other Pin It button options available for Blogger.

Suggested Layout

These buttons look best on blogs that have at least 40 pixels of space between the right edge of the widest photos in the content column and the left edge of the right sidebar. This extra space is not required for the buttons to work, but it helps make them look good. If your content column and sidebar are very close together, the button placement can be unpredictable.

Recommended Browsers

You will have an easier time copying and pasting this code into your blog if you're on Firefox, Chrome, or Safari. Internet Explorer users sometimes have formatting issues with copied code. For best results with this code (and pretty much everything else on the Internet), don't use IE!

All set? Let's get started!

Basic Installation

Before You Do Anything: Back Up Your Template! Seriously, do not skip the backup. And don't come crying to me if you make a mistake and don't have a template backup!

Add jQuery to Your Blogger Template

You need to add jQuery to your template for this code to work, so we'll do that first.

  1. In Blogger, go to Template > Edit HTML
  2. Find the pair of <b:skin> </b:skin> tags in your template. They're up near the top, usually within the first 20 lines.
  3. Paste this into the template, just above the <b:skin> </b:skin> tags :
  4. <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
  5. Press the orange "Save Template" button.

(By the way, if you have installed my Pinterest gadget for Blogger on your blog, you can safely remove the jQuery script link from the top of that gadget after adding jQuery to your template.)

Now, let's move on to adding the Pin It buttons!

Get the Code

Here it is!

Install the Code

This is the super-easy part. Just paste that code into an HTML/JavaScript gadget on your blog (if you don't know how to add a gadget, you can find the official Blogger instructions here).

Press save and you'll have a Pin It button next to the bottom right corner of every image in your posts.

Test the buttons out and make sure they pin properly before you move on. If they don't, make sure you've turned on the post timestamps, and that the timestamps appeared in your post footers. These buttons need working timestamps to function correctly.

Advanced Customizations

There are a few options to customize these buttons for your blog.

Move the Button Onto Your Images

The default code puts the button next to the bottom right corner of the photo. If you like it there, cool! I like it there too. But, if you prefer, you can move the button onto the photo with a little bit of CSS.

To add custom CSS to your blog:

  • go to Template > Customize > Advanced
  • Click Add CSS

Enter this CSS into the Add CSS box:

a[class*='pin_it_button_inline'] {
position: relative;
right: 45px;
bottom: 10px;
}

You'll need to play with those right & bottom numbers to get the perfect placement on your photos — it's going to vary from blog to blog. Once you have it in the right spot, press the "Apply to Blog" button to save your CSS.

If you're going to place the button on the image, you may want to turn off the counter. Instructions for that are below.

No Pin It Button on "Signature" Images

If you use an image "signature" or another decorative image in all or most of your posts, you probably don't want Pin It buttons on that image. You can hide the button on those images with CSS.

To add CSS to your template:

  • go to Template > Customize > Advanced
  • Click Add CSS

Copy and paste the following line of CSS into your "Add CSS" box, then replace "your-filename-here" with your signature image's filename. Make sure to include its file extension (.jpg, .png, .bmp, or .gif):

img[src*="your-filename-here"] + a[data-pin-log='button_pinit'] {
visibility: hidden;
}
For example, if your signature image is called "signature.png", the CSS rule to hide the button from that image would be:
img[src*="signature.png"] + a[data-pin-log="button_pinit"] {
visibility: hidden;
}

Press the "Apply to Blog" button once you've entered your signature image's filename into the CSS.

No Pin It Button, Sometimes

Sometimes, you may want to hide the Pin It button from a certain image without affecting the other images in that post or on your blog. You can do that with CSS! Here's how:

First, add this piece of CSS to your template by going to Customize > Advanced > Add CSS.

.nopin a[data-pin-log='button_pinit'] {
visibility: hidden;
}

Then, go into the HTML view of the post and find the HTML for the image you'd like to "unbutton". You can quickly find it by doing a find on page for your image's filename. Find the "separator" div that wraps your image. It will look something like this:

Enter the word nopin immediately after the word separator, like this:

Save your post, and the Pin It buttons will disappear from that specific image, but will still appear on the other images within your post.

Turn Off the Pin It Counter

The Pin It buttons have a counter by default. All of the counters on an individual page of your blog will increase by one when any image from that page is pinned. Based on feedback on the old version of the button code, I know that really bothers some bloggers! There's no way to change how the counter works, but if you'd like to hide the count, change count-layout="horizontal" to count-layout="none" in line 7 of the gadget code.

Disable the Title as Description

This code uses your post title as your images' description. That works nicely for most blogs, but if you frequently use double quotes, ampersands (&), or other special characters in your titles, you'll notice that the description cuts off at the first special character. There are two good alternatives to using the title as the description:

Alt Text

If you add alt text to your images, you can use the alt text as your image description instead. To do that, change:

+ $title +

to:

+ $(this).attr('alt') +

in line 7 of the code.

Blank Description

You can leave the description field blank by changing:

+ $title +

to:

+ ' ' +

in line 7 of the code.

Remove Pin It Buttons from Static Pages

If you don't want the buttons to show on your blog's static pages, I've posted instructions for removing the buttons from static pages in the Appendix.

Show me your buttons!

Leave a comment or tweet me so I can see where you're using the buttons! And, of course, let me know if you have any questions!

Special thanks to the Githubber who wrote the Pinterest button script I based this on!

Strawberry Tart photo CC-BY-SA Michael Phams

A Note About Comments:

This button tutorial has been updated five times. If you have a problem with the tutorial, please don't try any of the suggestions from comments before February 7, 2013. Instead, check the steps again and make sure you didn't miss anything. If you're still having trouble after double-checking the tutorial, leave a comment and I'll do what I can to help you out :)