Learn to customize your own blog with confidence

A Pinterest Gadget for Blogger - Updated 2015

A New Pinterest Gadget for Blogger - Completely Updated in 2015

Back in March 2012 I published Code it Pretty's first tutorial, "A Pinterest Gadget for Blogger" (now redirected here). That tutorial introduced me to a lot of very cool bloggers, and it's been a pleasure to see the gadget on so many different blogs.

At the end of last year I went back through my archives to update older tutorials. And honestly, I cringed hard when I looked at the code for the Pinterest gadget. It just does not represent me as a developer anymore.

So, I took the whole thing apart and rewrote it from scratch.

Today I'm very pleased to share the new & improved version of my Pinterest Gadget for Blogger. It's faster, prettier, and easier to install than ever before!

Demo

There's a working demo in the right sidebar of my test and demo blog.

Features

This is an unofficial Pinterest gadget. If you're looking for instructions for adding the official Pinterest widget to Blogger, see this tutorial instead: How to Install the Official Pinterest Widget on Blogger.

This gadget displays a gallery of cropped, square thumbnails for up to 25 of your latest Pinterest pins. You can choose to display your most recent pins from all of your boards, or just pins from one specific board.

example of pinterest gadget on blogger

When your readers click on the thumbnails they'll go to the full-page version of your pin on Pinterest. You can choose to have the Pinterest links open in a new window or stay in the same window.

The code comes with editable CSS that you can modify to change the size of the gallery or the size of the thumbnails. CSS help is included at the end of this tutorial.

Template Compatibility

This works on all standard Blogger templates except Dynamic Views, which does not accept custom HTML/JavaScript gadgets.

Installation

Step 1: Copy the Code

Select and copy the entire code from the code box below. Just copy the code, not the line numbers.

If the embedded code doesn't load for you, or you're having trouble selecting it, you can copy it here.

Step 2: Add the Code to Your Blog

Open Blogger in a new browser window or tab. Go to "Layout" and click an "Add A Gadget" box wherever you'd like to place your gadget.

On the window that pops up, select "HTML/JavaScript" from the menu — scroll down to see it.

Paste the code into the "Content" field of the gadget.

After you've pasted the code into your HTML/JavaScript gadget, enlarge the gadget window. Then click & drag the lower right corner of the "Content" field to expand the text area. That gives you more space to work comfortably with the code.

animation of expanding the HTML/JavaScript editor on Blogger

Performance Tip: If you already have jQuery installed in your template, you can remove the jQuery script link in this code. The jQuery script link is at line 44 of the original code and looks like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Step 3: Enter Your Settings

Scroll down to the line that reads //GALLERY SETTINGS. That's where you get to tell the gadget what to do!

gallery settings

Each of the settings starts with the word "var" and ends with a semicolon (;). When you edit your settings, make sure not to delete them or your code won't work.

Set Thumbnail Count

The thumbnailCount setting lets you choose how many images to show in your Pinterest gallery. You can set this to any number from 1 - 25.

Set Your Username

Enter your username inside the quotes for the username setting. For example, my username setting would look like this:

var username = 'codeitpretty';

Choose a Profile or Board Gallery

The default settings of profile = true; and board = false; will show your latest pins from all of your boards. If that's what you want to do, you can skip this setting and the next one.

If you want to show the latest pins from one specific board only, set the profile setting to false and set the board setting to true.

Specify the Board for a Board Gallery

If you selected a profile gallery, skip this setting.

After setting board to true, go to your Pinterest profile and click on the board you'd like to use. Copy your board's name as it appears right before the last slash (/) in the URL in your browser's address bar.

Then, paste the board name inside the quotation marks for the boardname setting.

For example, if I wanted to show pins from my Code it Pretty board only, the boardname setting would look like this:

var boardname = 'code-it-pretty';

Make the Links Open in a New Window

Set the newWindow setting to true to open the Pinterest links in a new window/tab.

Save Your Settings

After you've entered all of your settings, click the "Save" button to save your gadget. The gadget should appear with its default size settings. If you like how it looks, you're done! Enjoy your gallery.

If you get an error message, follow its instructions to correct the error.

If you'd like to change the size of the gadget or the thumbnails, or you want to move the gallery to the left or right, you can edit the CSS with the instructions in the next section.

Style the Gadget

Change the Gallery Width

Open your gadget and find the CSS rule that looks like this:


#pinterest-gadget {
  overflow: auto;
  width: 210px;
  list-style: none;
}

Change the width from the default to 210px to your preferred width.

Change the Thumbnail Size

In your gadget code, find the CSS rule that looks like this:


#pinterest-gadget li {
  float: left;
  width: 100px;
  height: 100px;
  background-size: cover;
  margin: .1em;
  padding: 0;
  border: none;
}

Change the width and/or height inside this rule. Keep in mind that the maximum width of a pin is 236px, and the height of each pin will vary. If you keep to a square shape (identical height and width) you can be sure that all of your pins will line up with each other without unsightly gaps. Rectangles can also look good for some boards. Feel free to play around!

Move the Gallery to the Left or Right

If you want to move the gadget to the left or right, you can add a bit of CSS to the #pinterest-gadget rule.

Open your gadget and find the CSS rule that looks like this:


#pinterest-gadget {
  overflow: auto;
  width: 210px;
  list-style: none;
}

Add a margin-left or margin-right rule immediately below the list-style: none; declaration. For example, if I wanted to give the gallery a left margin of 25px, I'd change the #pinterest-gadget rule like this:


#pinterest-gadget {
  overflow: auto;
  width: 210px;
  list-style: none;
  margin-left: 25px;
}

Make sure to leave the closing curly brace (}) in place at the bottom of the rule.

Show Off!

I'd love to see your Pinterest gallery! Show off in the comments here, Tweet at me @MMosley, or leave a comment on this tutorial's post on Google+.