Wednesday, August 22, 2012

Adding Instagram to your Blog {Blogging for Idiots}

I have been blogging for 3 months now.  I did not take a class or have anyone to help.  It was me and google university.  Therefore, if I can do it, SO CAN YOU!  For my next couple of post I am going to show you how to make small changes to your blog to make it look amazing!  So at least you will look like you know what your doing :)

First things first..... Instagram.  It's the latest and greatest craze!!  So why not add those fabulous pictures to your blog?  What I am going to show you is how to create the Instagram widget so that you can add the coding for the widget to your blog.  Sounds technical?  YES.  Don't let the lingo scare you, its a piece of cake!

1.  Go to, {<--- just click here} and this should pop up.

2.  Enter in all your info.  Here is the detail of what each one means.  However, play around with it.  You won't mess it up and you can ALWAYS start over.

Username OR Hashtag:
{A helpful hint --> Make sure your Instagram profile is on "public" otherwise, your preview of the widget will not show up. To change your settings you must login to your Instagram and change them there.}  You can have your pictures show up for your screen name OR for a certain hashtag but NOT both!  However, if you are savvy....  You can create two separate widgets.  For example, one for your username then create an entirely separate one for a certain hashtag (which would mean repeating all the steps again).

Widget Type: {This is personal preference.}

  • Grid - is going to show your pictures in block format lined up like a grid.  You can choose the amount of pictures you want going across and down.
  • Slideshow - will only show one picture at a time but it will continuously change.
  • Map - is a new feature to Instagram this week.  If you also use foursquare along with Instagram.  Now you can have a map with all your pictures "pinned" to their location by whatever GPS coordinates were used to tag the picture.  If you choose this option only pictures that were tagged with GPS will show up on your map.  You must also have accepted the newly request to add the map option on your Instagram account.
Thumbnail Size:
This is going to depend on where you are placing the widget on your screen for starters I would just stick with the 100 px (default) and see how it places on your blog.  The larger the "px" number the larger your picture is going to be.

Food for thought......
  • My sidebar is 250 px (this is the width) and if each picture is 100 px and I want two pictures side by side then 100 px per picture is perfect for my blog.
  • If I was going to do a slideshow on my sidebar, I would change the size to 200 px.  Since I was only going to have one picture showing at a time.

This option is only if you choose the "GRID" option above.  Otherwise, this option will not show up.  This allows you to choose how many pictures you want to show up horizontally and vertically on your Instagram grid.

Photo Border:
If you use the exact same filter (photo effect) on all your Instagram picture then I wouldn't see a need for this option.  However, most people choose different filters meaning some of the pictures have borders and some don't.  To make your grid or slideshow look more consistent click YES.

Background Color:
If you have a specific color that you use for all your widgets then by all means enter it here.  Otherwise leave it blank.

Photo Padding:
This is the amount of space around the outside of each picture.  If you want more space then increase the number however, I think 5 is perfect.  If you think so to move on!

Hoover Effect:
When someone places their cursor/mouse over your photo it can do one of three things.  1. nothing 2. fade in {I don't suggest} or 3. fade out {this make it look like it's a link and you can click on it}  So choose either, option 1 or 3.

3.  Once you have previewed your widget and you like what you see. Simply click "GET CODE" and something similar to this should pop up.  Highlight ALL the information in the gray box then copy it.

4.  Log in to your blog.  Go to "Layout" and click "Add a Gadget"

5.  An "Add a Gadget" box such as this will pop up.  Scroll down until, "HTML/JavaScript"

Click the small blue plus sign box or the title on the gadget that says --->"HTML/JavaScript"

6.  Paste the information that you copied originally into the empty box. {add a title if you like i.e. Instagram}  Then click "Save".

7.  Last step, click "Save Arrangement".

You can easily move your widget around.  All you have to do is click on the widget in the screen pictured above and while clicking it, drag it to the new destination then release.

Congratulations!  You just added Instagram to your blog!  I told you it was easy!  What else do you want now?
Enhanced by Zemanta

1 comment:

  1. I'm late jumping on the Instagram bandwagon (and late catching up with all your posts), but I'm so glad you shared this! I've seen this widget on others' blogs, but never thought to put it on mine. Why not, though?? I am obsessed with IG now that I've discovered it (a few months ago)! :)