Addicted to Pinterest? Display your most recent Pins in your blog's sidebar!

  • Announcement
  • Updated 2 months ago
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!

Pinbar

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.

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('http://pinterest.com/username/feed.rss', {
limit: 6,
snippet: true,
header: true,
date: false
});
$('.nailthumb-container').nailthumb();
});



You'll need to change the URL there to your own Pinterest URL. To display your latest pins from all boards, use http://www.pinterest.com/USER-NAME-HE.... To show a specific board, use http://www.pinterest.com/USER-NAME-HE...

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!

Melanie, Community Manager

  • 373 Posts
  • 12 Likes
  • stoked!

Posted 2 years ago

Ashley@Alizabet.com

  • 2 Posts
  • 0 Likes
I've been looking for this for awhile! My blog is hosted with Tumblr, can I use the above instructions anyway? I hope so! Let me know, I would greatly appreciate it!

Melanie, Community Manager

  • 373 Posts
  • 12 Likes
Hi Ashley! You should be able to use it anywhere. :)

Cheers,
Melanie

Ashley@Alizabet.com

  • 2 Posts
  • 0 Likes
thanks! it worked and looks so great!!!

Lindsay Templeton

  • 1 Post
  • 0 Likes
Just used this code! Thanks so much for the help! http://brokeandbougie.blogspot.com/