Introducing Chevron, a new theme from Typepad
Featured Blog: Little Eco Footprints

Weekend Project: Display Your Recent Pinterest Content In Your Blog's Sidebar

Important Update: We've added a built-in Pinterest widget, which can be added to your blog in Blogs > Design > Content. Read more here. Pinterest has also added easier options for displaying Pinterest content to your blog - we have instructions for that here.

Everyone seems to be talking about Pinterest lately, and for good reason - with Pinterest, you can organize and share all the beautiful things you find on the web, plan weddings, decorate homes, and even organize recipes - visually and socially.

We recently introduced the Pin It button to Typepad blogs, and we even taught you how to embed a pin in a blog post, but if you've ever wanted to display your most recent Pinterest pins on your blog's sidebar, then this weekend's project is for you. Thanks to Typepad blogger Zalary for the inspiration!

This project can be done easily with Basic Templates, and folks at all skill levels should be able to tackle it, so lets get started!


Step 1: Grab the code! Though this project is super easy, the block of code is quite large, so we've placed all of the code you'll need into a handy text file, which you can download right here. ***Note*** Make sure to open this file in plain text! For Windows users, that usually means using Notepad, and for Mac, that usually means using TextEdit. Using a rich text editor or an application like Word can break the code!

Step 2: Next, you'll be looking for a couple of lines of code in the text file, and replacing them with your relevant information. The first section of code to look for includes your Pinterest RSS URL and the number of pins you want to display, which looks like this:

$(document).ready(function () {
$('#pinterest').rssfeed('', {
limit: 6,
snippet: true,
header: true,
date: false


You'll need to change the URL there to your own Pinterest URL. To display your latest pins from all boards, use To show a specific board, use

The default code is set to display your six most recent pins side by side in your sidebar. If you want to display more or fewer pins, just change limit: 6 to reflect that.

Step 3: The next step is for folks who want to customize the size of the thumbnails to fit perfectly within their sidebars. The default code provided works great for anyone with a 300 pixel sidebar, but if your sidebar is more narrow, you'll need to resize the images and change the padding a bit. Look for this bit of code:

.square {
width: 125px;
height: 125px;
overflow: hidden;

Taking into account the 30 pixels of padding that Typepad adds to each column, decide on how large or small you want your thumbnails to be, and update the width and height values, keeping them the same to maintain the proper ratio.

Next, look for this code:

.rssBody li.odd {
position: relative;
color: transparent;
/* overflow: hidden; */
padding-right: 20px;
float: left;
z-index: 1;

And change padding-right: 20px; to coincide with however many pixels you subtracted from the thumbnail size. That's it! You're done with code changes.

Step 4: Finally, copy all of the code in the text file (which has now been updated with your changes), and go to Design > Content in your Typepad account. There, click to add an Embed your own HTML module, and paste everything into the box provided. Click OK, then drag the module into place on your sidebar, and save your changes. You're all set! You should now see your most recent pins on your sidebar.

Extras: If you'd like to display a title above your pins, just paste the code into a new Notes TypeList and add that to your sidebar instead of using the Embed module.

You can also display a "Follow on Pinterest" button below your pins, by grabbing the "Follow Button" code from here and pasting it under the code for your pins in the same space.

Want to see the project in action? You can see my most recent pins on the sidebar of my blog, Hello Melanie! And we'd love to see it on your blog, so leave a comment and let us know if you're using it!

comments powered by Disqus