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!

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. ***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('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-HERE/feed.rss. To show a specific board, use http://www.pinterest.com/USER-NAME-HERE/BOARD-NAME-HERE/rss

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

Jennifer Hayslip

Love the feature!! Unfortunately I spent well over an hour following your step by step directions and I had zero luck. All I keep seeing is code in my sidebar. :(

Katey

Same here, Jennifer! This would be awesome to add to my blog, but I only see code :(

Account Deleted

I only see code as well! Then I tried using the blogger created HTML and saw only the copyright info? Going to spend some (more) time tinkering with the code, but I am no expert :(

Account Deleted

Okay so it is working BUT and it's a big but - it only works when I'm previewing a post. When I view the blog either through the dashboard or via entering actual url it's not there. After I make changes to the code and use preview on the design page I also don't see it. I can get the header "recent pins" to appear, but not the pins. Note I made changes to the code for sizing purposes for my sidebar and it all works great in preview post mode. Any help would be great!

Casa Pinka

Sadly, can't get it to work, either. I think more explicit instructions would be helpful. For example do we replace our USERNAME with our Pinterest username in all caps? What if we don't want the specific board? Do we cut out any of the copyright info and instructions in the text file? This would be great in the sidebar but just isn't working after 30 minutes of fiddling. Would appreciate more help!

Melanie

Hi Jennifer! Did you download the file that we linked at the beginning of the post, and then paste the entire big block of code into an Embed Your Own HTML module or a Notes Typelist, or were you only pasting the small snippets of code that are in the post?

If you can tell us more about the steps you took specifically, we can help. :)

Melanie

Hi Katey! What steps did you take? Did you download the file that we linked at the beginning of the post and use that, or did you paste only the small snippets of code that are in the post?

Melanie

Hi Robin - we've been successful in all of our tries, so knowing the exact steps you took will be super helpful. Did you download the file we provided at the beginning of the post and use all of that code?

Melanie

Hello! I tried to be as explicit as possible in my instructions, and had several people test it out to make sure nothing was missing, so I'm sorry if it was difficult for you to follow!

You do not need to use all caps, no. That was simply used to draw attention to the space you needed to change. There are instructions on what to change if you don't want to use a specific board:

"To display your latest pins from all boards, use http://www.pinterest.com/USER-NAME-HERE/feed.rss"

So for me, I used http://www.pinterest.com/helveticablack/feed.rss

Does that make more sense?

If you can let me know all the steps you're taking, I'm happy to help more.

Melanie

One more quick thing! Make sure you're opening the plain text file in plain text - using Word or another rich text editor can break the code, which would explain seeing code instead of pins in the sidebar.

Melanie

One more quick thing! Make sure you're opening the plain text file in plain text - using Word or another rich text editor can break the code, which would explain seeing code instead of pins in the sidebar.

Melanie

One more quick thing! Make sure you're opening the plain text file in plain text - using Word or another rich text editor can break the code, which would explain seeing code instead of pins in the sidebar.

Jennifer Hayslip

Hi Melanie! Thanks so much for your help and additional tip. I was not opening the text in the plain text. So I can now see my pins, only half tho. They are cut off. Im trying to figure out how to resize the thumbnails since my column margin is 200px and still be able to show all 6 pins. You can take a peek and see what I mean.
Any tips would be much appreciated! Jenn

Jennifer Hayslip

One more thing...it helped me to make a new typelist and add it as a note. I followed exact instructions (and additional info Melanie provided) and it DOES Work. :) Now Im just trying to figure out how to tweak my measurements so it all fits on my sidebar nicely. :)

Melanie

Wonderful! I'm happy to help you get the sizing and everything right - which blog are you using it on, the main blog at sweeteyecandycreations? I can check it out for you.

Melissa@Pink Paper Peppermints

Thanks Melanie, it took a few tries, but I got it to work, Yay! (and I love your cute blog!)

Melissa~

Jennifer Hayslip

Sweeteyecandycreations is my main blog. I was able to fit them all in but sadly my squares are so little you cant really tell what they are. ha! ha! Maybe if I only have 3 larger size thumbnails in a vertical row? hmmm..No worries if it doesn't happen. Thank you for all your help!

Melanie

Hey Melissa, thanks for the compliment! And hooray! It looks *great* and your blog is awesome! We should feature it here on Everything Typepad! :D

Melanie

Hi Jennifer! I fiddled around with the code a bit and updated your design. Do a hard refresh and check out the sidebar - you have one column now that fits nice and big in your sidebar instead of two!

Jennifer Hayslip

Thank you SOOOO much Melanie!! Looks amazing! I appreciate all your help! Yippee!!

Account Deleted

Okay so I think I'm going crazy! Today when I FIRST looked at my blog they were there and now they are not! I typed the code directly into my Custom HTML sidebar item and edited it there. I've managed to resize the squares to fit my sidebar (but I'm getting cropping? I must be doing something wrong there) anyway when I preview my post it's fine otherwise it's not working. NOTE - I redirect my blog to my domain not sure if that's causing issues. I've also cleared my cache and cookies so unfortunately it's not a cache issue. I grabbed a screen shot of my preview which I can send if need be. Thanks!

Robin

Account Deleted

Okay so I think MAYBE it's working now. I did it as a note although sometimes when I refresh they disappear...Melanie where in the code do I change not just the thumbnail "container" (for lack of knowing what to call it) but the actual thumbnail itself - mine are cropping too much. Thanks (again)

Robin

Melanie

Hi Robin! I've checked your blog over the course of the day and the pins have been there each time - your blog looks great! You might just need to clear your cache or do a hard refresh on the blog to make sure you're always looking at the newest version. Great job on your blog!

Account Deleted

Thanks for checking - they've been there most times when I checked today, but for some reason sometimes if I just do a refresh they go away. I've tested on your site and yours stay so I'm not sure what's going on, but I've decided not to sweat it at this point! Is there a way do stop the cropping? Thanks soooo much for your support on this! I remember when I first saw pins in the sidebar on a blog I follow and I spent hours trying to figure out a way to get them onto mine, but atlas my CSS skills is limited to copying and pasting and I for the life of me couldn't disect the wordpress widget!

Melanie

I am so excited to see it put to such good use - it's always a thrill to be able to make my blog look exactly like I want it to, and I knew that it would come in handy for other bloggers who are also compulsive pinners like me!

Account Deleted

Excellent script! I love being able to feature the Pinterest thumbnails. Thanks so much. http://www.deadseafun.com/

The comments to this entry are closed.