Learn to customize your own blog with confidence

A Pinterest Gadget for Blogger

Pinterest and Blogger together at last

Update, November 19, 2012: Pinterest has released an official blog widget! If you're looking for a tutorial on the official widget, please see New Pinterest Board & Profile Widgets for Blogger. If you'd prefer something a little different, read on :)

Blogspot bloggers can be forgiven for a little bit of Wordpress jealousy now and then, but today we can scratch one thing off the list of envy items: A Pinterest Gadget!

Yep, after a lot of experimentation, research, and teeth-grinding, I put together a rather stylish way to add a Pinterest showcase to your blog's sidebar. I'll tell you all about the teeth-grinding later when I post about how this was made. For now, let's get you going with your very own Pinterest gadget for your Blogspot blog!

Difficulty: Brave Beginner
If you're familiar with CSS at all you can do this in your sleep. If you've never worked with CSS before, wait until after you've had your coffee to try this ;)

Gadget Features:

  • Displays cropped thumbnails of your most recent Pins, or the newest pins on a specific board.
  • Cropped thumbnails expand to show full thumbnail when hovered.
  • Flexible! The gadget works as a sidebar gadget or as a horizontal gadget.
  • Customizable image size.
pinterest gadget hover effect before and after

Ready to get this going on your blog? Here we go!

Get the Code

I've posted the code for this gadget as a Gist on GitHub. We'll talk about GitHub in more detail someday, but for now all you need to do there is get the gadget code. Here's the link:

https://gist.github.com/1983220

You can either download the code or simply copy and paste it directly from the website.

Edit the Code

If you're comfortable with Blogger's HTML/Javascript gadgets, you can paste the code right into a gadget box and edit it from there. Otherwise, open the file with a code editor or a plain text editor (Notepad is built in on PC, TextEdit is built in on Mac). Please DO NOT use a word processing program!

Edit the Pinterest URL

Find and replace the text YOUR-USER-NAME with your Pinterest username. For example, I changed:

http://www.pinterest.com/YOUR-USER-NAME/feed.rss

to

http://www.pinterest.com/codeitpretty/feed.rss

This tells the gadget to get the photo feed from all of my Pinterest boards. If you want to narrow down to one specific board, use this structure for the RSS url:

http://www.pinterest.com/YOUR-USER-NAME/YOUR-BOARD-NAME/rss

Once you've done that, save the file and then let's move forward!

Add the Pinterest Logo and Latest Pins Link (optional)

Scroll down to the bottom, beneath the second </script> tag. You'll find a note there about the Pinterest logo and link. To enable this, remove these tags <!-- --> that surround the HTML.

Now, enter your Pinterest url into the quotation marks inside <a href="">

If you'd like to enable the logo, you'll need an image. You can get the official Pinterest logo on Pinterest's Goodies page. You'll need to scale it down A LOT; the image they give you is a 10,000px beast.

Once you've scaled the image down to a normal size, go into your Picasa web album for your blog and upload your resized logo there. After you upload the logo, right click it and copy the image's location.

Paste the image location url into the gadget code in the quotation marks inside <img src="">

Once you've made these changes, save the file.

You will probably need to tinker with the CSS after installing the gadget to get it looking perfect, but for now let's test it out with the built-in CSS.

Installing the Gadget

Now, open up your Blogger account if you haven't already.

  1. Go to "Layout"
  2. Click "Add a Gadget" wherever you'd like the gadget to appear.
  3. Select "HTML/Javascript" from the gadget menu.
  4. Copy and paste your code into the gadget.
  5. Save your gadget and check out your page! If it's not perfect, we'll go over how to make it perfect in the next section. If it's perfect, yay! Get back to Pinning!

Note that the gadget doesn't update instantaneously when you pin something new. New pins usually show up within an hour after they're posted. There's no way to speed that up.

Customizing the Gadget's Appearance

Now we can dig into the gadget's CSS to make some cosmetic changes if you'd like.

Customizing Image Size

The default sizing for the gadget thumbnails is 100px square. But, you may need to reduce the thumbnail sizes to fit into a narrower column, or increase the thumbnail size to go big. The thumbnail size setting is in here:

.rssBody li {
position: relative;
color: transparent;
width: 100px;
height: 100px;

overflow: hidden;
padding: 6px;
float: left;
z-index: 1;
}

You can play with those numbers to find the perfect sizing for your thumbnails, keeping in mind that the maximum width is 192px and the thumbnail heights vary. The padding can also be customized: if you're placing your gadget into a narrow sidebar, reduced padding can help make a tight squeeze a little easier.

Changing the Hover Direction

This gadget was designed with a left sidebar in mind, so when the images are hovered they translate to the left to keep them from flying too far out over the page. If you're placing the gadget in a right sidebar or horizontally, you may want to send them in a different direction. Here's where that's controlled:

.rssBody li:hover {
overflow: visible;
z-index: 1000;
-ms-transform: translate(-60px,-10px);
-webkit-transform: translate(-60px,-10px);
-o-transform: translate(-60px,-10px);
-moz-transform: translate(-60px,-10px);
transform: translate(-60px, -10px);
}

These pixel measurements are on an x and y axis. The first number controls how the image moves along the x axis (left and right), and the second number controls how the image moves along the y axis (up and down). Note: If you want to change these measurments, you need to change each set of numbers to match. The multiple vendor prefixes make sure the CSS will work in all the different browsers your visitors may be using.

Disabling the Hover Function

I think the way the images enlarge when you hover on them is cool, but if it doesn't work for your blog, you can remove that little bit of animation. To disable it, remove this section of CSS:

.rssBody li:hover {
overflow: visible;
z-index: 1000;
-ms-transform: translate(-60px,-10px);
-webkit-transform: translate(-60px,-10px);
-o-transform: translate(-60px,-10px);
-moz-transform: translate(-60px,-10px);
transform: translate(-60px, -10px);
}

CSS Experiments

That covers the basics of CSS customization options for this gadget. If you want to get a better feel for how CSS works, play around with the settings a little bit to see what you can do with the styling. You can't really hurt the gadget by tinkering with anything in the style section. It might get a little weird looking, but if you retrace your steps you can fix it! Worst case, you can grab a fresh copy of the gadget code and start over again.

So, how'd you do? Let me know in the comments. Leave your blog URL so I can go see!

BIG thanks to Richard Mackney, who wrote the Instagram RSS feed Gist I modified to work with Pinterest and Blogger. His generosity on GitHub made this possible. Thanks, Richard!

CRITICAL UPDATE March 26, 2012:
An Internet Explorer 9 link bug fix is in this post: http://www.codeitpretty.com/2012/03/updates-to-pinterest-gadget-for-blogger.html.

Mini-Update Sept. 17, 2012: I've added the "nopin" attribute to the Pinterest gadget images, so the Pinmarklet won't pick up your Pins. This won't affect any of the other content on your page, but it will keep people from "mis-Pinning" from your blog.