Pinterest is all the rage lately. Show off all of your beautiful pins in style by following this very simple tutorial. Your end result will look like little Pinterest Polaroids. Here is a screenshot of what it will look like when we’re finished:
{click images to view full size}
This tutorial is for WordPress based websites. Because WordPress is awesome.
Alrighty we are going to start by installing the Pinterest RSS Widget Plugin.
On your dashboard go to Plugins > Add New, then search for “Pinterest RSS Widget” and install.
Next go to Appearance > Editor.
Scroll down to the bottom of your CSS (Style Sheet) and paste the following code:
|
1 2 3 4 5 6 7 8 9 |
.pins-feed-item { padding: 7px !important; background-color: #fff; border: 1px #ddd !important; margin: 0 0 12px 12px !important; -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999; } |
Click “Update File”
Next click on Appearance > Widgets.
Locate the “Pinterest RSS Widget” in your available widgets section and drag it to the sidebar of your choice.
My settings displayed below will work perfectly with the Adorable WordPress theme.
You can adjust these settings until your widget looks the way you like. You will also want to take in account the 7px padding and the 12px margin between the images added in your CSS.
Hi! After downloading the Pinterest RSS Widget, I’m not able to see the Plugin tab on my Dashboard. Did I miss something?
Hi Stephany 🙂 it looks like you’re using WordPress.com. I’m not familiar with what they do and do not allow as I use WordPress.org. I would try submitting a support ticket to them to see what’s causing the problem.
AWESOME!! Easy-Peasy. Thank you so much for the clear detailed tutorial 🙂 I love it
Cindy
No problem, glad to hear you found it useful! 🙂
Hi Lindsey!
My child theme is Fashionista, but I was hoping that I could make this work. I am a code dummy. But, I follow directions pretty well. My sidebar now says, “My Recent Pins” – but that’s it…nothing else is there…no pics, nothing. Do you think that it doesn’t work because of the different theme?
Thanks for you generosity in providing the Pinterest coding. I just wish I was able to make it work.
Actually I did get it to work. Silly me….I left this “/” in my username and that prevented anything from coming up. It’s all in the details! Again…thanks!!
Oh wonderful! 🙂
Thanks! Little by little with lots of your help I am making my site look the way I want it to 🙂
I’m so glad to hear that!
Thanks, Lindsey. You’re the best!
No problem! I’m so glad you found it useful 🙂
Thanks!!! I’ve been looking for a better one than the pinboard widget! Love this one! Will be adding it to all my sites =}
Awesome! 🙂
Awesome! Super easy to add! Thank you :0)
Thank you so much for this – I’m using the Adorable theme and was wondering how you got that groovy Pinterest box – it looks great!
I would love a tutorial explaining how you put together your “get connected” box. I’m muddling my way along now, between photoshop and image-maps.com
No problems designing my icons, just not quite sure how to link everything up, and get it looking right with heading, background, etc
I’ll probably work it out (with a few Tim-Tams – exceptionally yummy Australian chocolate biscuits), but I’m sure you know a few shortcuts to save me those calories.
Thanks very much. I just did a little experimenting and its really cool. I like the fact that you havet the “follow me on pinterest” in the bottom. Would be nice if you could change the “me” to “us”….
Cheers
Hi! I am so glad I found this because I am VERY slowly trying to figure out how to get things configured. I copied the code exactly, but my pics do not have spaces in between? They are all squished together? Am I doing something wrong? Thanks so much!
Hi Jayme! I see them having spaces between, were you able to figure out what was the problem?
Thanks Lindsey for the great recommendation!
I just wanted to pass along another tool called Tint. It lets you display any Pinterest account pins or any Pinterest board pins to your likening. You can totally curate to your preference and then embed it into your website. It took me about 5 minutes to create and integrate into my site. They have infinite scroll and multiple themes to choose from too!
Feel free to check it out here: http://www.tintup.com/blog/the-best-pinterest-for-a-business-widget/
Thanks,
Tim
Hi, Lindsey
I’m wondering if this settings works on morden blogger theme. I tried to follow all instruction but It’s not a success. Pls help. 🙂 Many Thanks!
Yes it should definitely work on all themes 🙂
Hi Lindsey! I’m trying to build a new site using the Modern Theme (link left in the website field for you) and I’m having problems with the Pinterest widget using this theme. For some reason it’s showing pink circles? I believe it is the image for bullets in a list but I’m not sure. How do I adjust your theme to remove this odd pink bullet? Thanks! Amanda
HI, LINDSEY! WHERE CAN I FIND THE SOCIAL MEDIA WIDGET DISPLAYED AT THIS PICTURE? JUST LOVE THIS! MINEIS ADORABLE! THANKS! :0
Hello, I have followed the directions exactly however, it’s not perfect spaced on my modern blogger pro theme. The pics are larger than frames. I’ve tried playing around with the measurements but I can’t seem to get it right. Can you help?
Hi DeDee! Everything looks normal to me, were you able to get it taken care of?
Hi Lindsey!
I’m just starting to put together my website with the Jane theme and love this widget! However, I think I’m having a similar problem as DeDee. The pins aren’t fitting in the frames. I’ve tried different pixel sizes but the frames seem to change as the pixel sizes of the pins change. Any suggestions? THANK YOU!!
Hi Erica! Do you have the images set to a different size than mentioned in the tutorial?
I don’t think so. I have them set to 75×75 pixels.
I am having problems with the pins being to large also. They are going into the free space. I am using Modern blogger Pro. I have the size set to 75×75 and all else is set exactly like you suggested.
Thanks
Bridget
Hi Bridget! This plugin started causing issues, so we took it off of our demo site. The demo had 125px images I believe. It still works, but if you have any issues with it you’ll want to contact the plugin developer. Your site looks great!
Just used your tip and it worked wonderfully! It was super easy to edit as well to get the look I wanted. Thanks! 🙂
That was easy and looks awesome
I’m so glad to hear that! 🙂