How to display your Instagram pics on your blog

Do you love Instagram as much as I do?
It's definitely become my favourite social media tool - it's fun, it's full of beautiful, inspiring pictures and it's easy to get involved. I've also made some great friends through Instagram, two of which are coming over for dinner tonight!

Last week I decided to learn how to display my latest Instagram pics on my blog - you can see the result over on my left sidebar. It was pretty easy once I worked out which platform to use - for those of you interested, here's a little tutorial so you can share your Instagram pics on your site as well! Now it does use a little HTML but it's dead easy, so don't be scared! I hope that, like me, you are slowly overcoming your HTML fears - if not, come hold my hand and we'll get through it together! I know what it's like!

Note: After a little bit of research, I think that Webstagram is the best online platform for Instagram. There are others, but for this tutorial I'm going to assume that you're happy to use Webstagram. Also, this only works for Blogger blogs.

Ok, let's get to it!

Step 1: Go to Webstagram. Login if you're already signed up, or sign up if you're new here. It only takes a minute!

Step 2: Click on TOOLS in the navigation bar. This takes you to a page with various buttons you can use. Scroll down til you get to the heading Instagram Gallery for your Blog / Website. It should look like the pic below, minus the arrows of course! Fill in the form with your details and how you want the widget to look. I've put my suggestions and advice below but it's all up to you and what you think works for your site.

1. Select @username here - I'm assuming of course that you want to display your own photo stream.

2. Fill in your username on Instagram. Mine is @redparka.

3. Select the thumbnail size you want to display. This will depend on where you're going to put it. For example, my side bar is 180px wide so I selected 150px so that it fit nicely with plenty of white space around it. Choose what works for your space, bearing in mind the layout options in the next box - you can always change it so don't worry if you're not sure.

4. Choose a layout based on how many photos you want displayed at once and how many columns you want. I chose one column and four photos as I wanted it to look clean and not too busy.

5. Do you want to display a border? I chose 'no' as it looks cleaner and many of my Instagram photos already have borders. You can preview before you post so again, don't worry if you're not sure!

6. Choose a background colour. If you left click in the box, the colour range will come up and you can select. I chose to leave it blank so that the background is transparent, which I think is best as then the background colour of your site will show through and it'll look clean (I'm obsessed with 'clean'!).

7. Finally, select how much space you want between photos. I made mine 2px because I like them to be close and neat.

Now you've done that, click on the Preview button to check it out! Happy? Great! If not, just go back and experiment with the options til it looks just the way you want it! When you have it just right, click Generate Code. A small box with some HTML code will appear.

Step 3: Now it's time to code - yay! Leave the Webstagram page open because you'll be coming back here to grab the code soon. Go to your Blogger dashboard and select Layout in the left menu. In the Layout page, select an Add Gadget box in the area you want to put your finished widget (this is easy to move later if you want to).

Step 4: You should now have a pop up window with a list of gadgets. Scroll down until you reach Text and click on the + button. Now you should see a window titled Configure Text.

Step 5: Put in your title - I just wrote Instagram in mine but you can call is whatever you like (ie. Check out my Instagram pics or I love Instagram.... you get the picture!). Then click where it says Edit HTML, because what we're about to do is add some HTML code.

Step 6: Go back to Webstagram and copy the code in the box. Then back to Blogger, paste the code in the Configure Text window in the Content Box. Click SAVE.

Step 7: Once it's saved, go and check out your blog and make sure it looks right. If so, you're done! That was easy! If not, just go back to Webstagram and change your options (such as thumbnail size, borders etc) and go through steps 3 - 6 again until you get it right.

It should look something like what you see on the left sidebar of this blog, depending of course on what options you chose. The really cool thing about this widget is that it updates automatically every time you put a new photo on Instagram, so there's always new, interesting photos on your blog.

How did you go?

My Instagram username is @redparka - if you're on Instagram I'd love to connect with you!

Here's a bunch of my favourite Instagram shots of recent times.... I made this collage using picmonkey, probably my favourite online editing tool - if you haven't used it it's worth checking out!

I hope you enjoyed this tutorial and please let me know if you use it so I can check out your shiny new Instagram widgets on your site!

Jen x