Weekend Project: Display Your Photos from Instagram

If you're already using Instagram, you know how fun and addictive it is. If you're not, then all you need to know is that it's a bit like Twitter but for images. You snap a photo on your iPhone (Android users will get Instagram soon!), upload it to Instagram and the app shares the image across your social profiles like Twitter and Facebook.

But you don't just upload and share your images, you can also apply really awesome filters that make your pics look much more vibrant and interesting. A picture of your yummy dessert just looks better when you apply one of Instagram's moody filters.

So now you're hooked on Instagram and you're shooting and sharing with friends and family. What if you want to display those images somewhere on your blog?

That's what today's tutorial is all about. We're going to offer two ways for you to automatically post those images onto your blog's sidebar. Once you have it set up, the images will automatically update as you add more to Instagram. Presto!

The first option is super easy. Just go to SnapWidget and scroll down to enter your Instagram username. From there, you can enter in a specific hashtag to pull from, thumbnail sizes, and so on. There's a preview feature so you can see how your images will look before grabbing the code.

You can add the code to your sidebar via a Notes TypeList or the "Embed your own HTML" module in Blogs > Design > Content. We have more details in our Knowledge Base. Below is an example of how SnapWidget looks on a real blog.

The second method is a bit more complicated but allows for more control over the thumbnail size that shows in your sidebar. You'll use your Instagram RSS feed, a service that will convert that feed to JavaScript, and some Custom CSS to style the thumbnail.

First, you'll need an RSS feed of your photos. Log in with Instagram on this site and allow it access to your Instagram photos. You can revoke that access at any time later on if you decide you want to stop sharing your images there.

You should then see a page with your images and a link to your photo feed, shown here:

Grab that URL, go to Feed2JS and click on Build. There are various options for showing or hding content from the feed and a Preview button to the right so you can see how the outputted content will look. In order for the thumnails to show, you'll need to make sure to enter 1 or -1 under Show/hide item descriptions?

Once you're happy with the script, click Generate JavaScript. You'll be shown a box with JavaScript code that looks like this:

Copy the code and paste it into either a Notes TypeList or an "Embed your own HTML" module, just like with the SnapWidget method above.

You can now style the script with Custom CSS. For example, to show your thumbnails at 250 pixels square, use:

.rss-box img { width: 250px; height: 250px; }
.rss-box a { display: none;}

.rss-box ul { list-style-type: none; }

.rss-box ul {
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
}

.f2jnag { display: none; }

You can also add borders, extra spacing, etc. The last line prevents the Feed2JS service from nagging you with text under your Instagram module.

You can see an example of how this method looks on Melanie's blog, it's beautiful here.

We love Instagram and we'd love to see how you're displaying your photos on your blog. Make sure to comment and share below!

Comments

[Tina Neony]

yes ,I often use my 3G android phone to take photoes .It is clear .I like take photoes

[Denise]

"...filters that make your pics look much more vibrant and interesting. A picture of your yummy dessert just looks better when you apply one of Instagram's moody filters.

Adding a blue cast (most people's favourite filter it seems) does not add vibrance, it obliterates it. And food with a filter applied? Have you ever seen The Simpsons episode where Homer can't give up the giant sub that is taking him days to eat and it turns purple? Instagram food photos are as appetizing as that.