Add Your Instagram Photos to Your Blogger Sidebar

[Instagram logo and paper clipped photos from the Instagram website]

Instagram has gone wildly lately! Particularly after it was released for Android phones earlier this week.

I love following friends on Instagram and if I had more than an old flip phone without internet I would be all about it! This tutorial is for you lucky ducks who get to use Instagram!

There are several good plugins for WordPress users that will display your recent Instagram photos in your blog sidebar. Blogger users are not quiet as lucky. The only way to automatically insert your Instagram photos in your Blogger sidebar is through the Snap Widget.

Here is a quick overview of how to add your latest instagram photos to your sidebar.

Click over to the  Snap Widget page. The Snap Widget is really easy to use. Fill in the information [username and thumbnail size] and click “Get Code.” The Snap Widget will give you a piece of HTML that you will paste into a new “HTML/Java Script” gadget in your sidebar! Piece of Cake!

How to add Instagram to Blogger

1. Click over to the Snap Widget Page. Scroll down to the bottom of the page. It will look like this.

Fill out the form:

Username.

Choose your thumbnail size:  Most sidebar are between 200 -300px so if you want 2 photos side by side I would probably choose 100px or 150px for the thumbnail size. It all just depends on what you want.

Layout: Is the number of rows and columns you want.

Styling: You can choose to have a border or no border and also choose the background color.

Photo Padding: Padding is the space that will be in between your photos. I think 5px is perfect!

Once you have filled out the form you can click PREVIEW and see if you like what you see! Here is what the preview will look like…

Once you like what you see in the preview click “GET CODE”. You will see a screen pop up that looks like this …

Copy the code. Login to your blog dashboard. Click on Layout and the click on “Add a Gadget”.

Choose the “HTML/JavaScript” widget. Click the little plus sign.

Then paste your Snap Widget Code and click SAVE.

Ta-da! Easy right?

Looking for more Blogger tutorials? Pop over. I’ve rounded up more than 10 great Blogger tutorials, plus some good general posts that might help you out!

Giveaway

Since SNAP! is all about improving your blog, today’s post includes a fun giveaway! Join conference attendees in entering to win one custom redesign on Blogger from SNAP! contributor Key Lime Digital Designs.


// <![CDATA[
/*{literal}{/literal}*/
// ]]>
a Rafflecopter giveaway

<a href=”http://rafl.es/enable-js”>You need javascript enabled to see this giveaway</a>.

  • Odds of winning are based on number of entries.
  • Winner chosen at random using Raffelcopter.
  • This giveaway begins: 4/17/2012 and ends 4/21/2012
  • You must be a 18 years or older to be eligible to win.
  • Prize will be provided by the sponsor at the earliest available appointment date and SNAP! assumes no responsibility for the value of or delivery of aforementioned prize.

 

Comments

  1. Jennifer says:

    I’d love to see a post on how to create and add buttons for facebook, pinterest, twitter, etc to your sidebar in a row like the ones on here look.

  2. Would love an blog update! : )

  3. I’d love to see the “how to create a button grab box code” tutorial. I know, sounds easy enough but I have no idea and when I try, I fail miserably. Thanks for good bloggy friends who make my grab code for me!

  4. I want to know how to make buttons on the sidebar look neat and pretty.

  5. I’d love to see a tutorial on how to auto-rotate sidebar ads. I’ve tried to follow a tutorial I found, but for the life of me, I can’t get it right!

  6. I would love to see some tutorials on utilizing Google Analytics.

  7. I’d love to see more tutorials on sizing pictures, and how to do it and what sizes are good what what templates, etc.

  8. I’d love to see a tutorial on drop down menus! :)

  9. I’m sure most people already know how to do this-but I would love to learn how to put ad banners at the top of my page-I can’t seem to figure that out!

    Kari

  10. Thanks so much! I just put it up on my blog

  11. I’d like to see how to make a title really grab someone’s attention.

  12. You have the best tutorials! Thanks for sharing your knowledge!

  13. Oops! guess I should have read the question before commenting; I also would like tutorials on blog buttons, favicons, etc.

  14. Yea! I was wondering if this was possible. Makes posting pictures so much easier! Thanks. ;)

  15. I would love to see on SNAP, a tutorial on how to add a contact section on my blog page.

  16. I would love a tutorial on how to get the little matching Pinterest, Facebook, Email, Twitter, etc…buttons on the sidebar of my blog. :)
    Great giveaway!

  17. tutorial idea – how about 5 conferences to attend or twitter chats to get in on to help take your blog/biz to the next level. You know stuff that is worth the time/money :)

  18. I would love about me image/social media icons!

  19. At the top of my blog to do list is to make my pages not static. For the life of me I can not figure out how to make the different pages active archives of blog posts. Does that make sense? For example, an post that I write about apples would automatically be archived with a thumb nail picture on the fruit page.
    Thank you!!

  20. Is there a such thing as a tutorial on how to get more blog followers???

  21. Christineb says:

    I would love a tutorial on how to create your own social media icons.

  22. So cool. Thank you.

  23. I would like to learn more about the best way to make badges. Great giveaway… love Key Lime Digital!
    AJ@queenofmynest

  24. This is so awesome! I just added it. i think learning how to do a drop down menu would be awesome!

  25. I would love to figure out how to add a menu bar under m header with limked pictures.

  26. Great tutorial, thanks Kendra!i would love how to make a menu navigation bar with drop down menus.

  27. Thank you for the tutorial!! I would love to learn about adding special fonts to the blog.

  28. Laura Dassance says:

    I would love to see matching buttons for Facebook, Pinterest, Twitter, Contact me that look nice and pretty!

  29. I’d love to see a tutorial about the “Pin This” button for blogger!

  30. I really want to learn how to add the cool FB, Twitter, Pinterest, RSS, etc, buttons on my blog. Thanks! :)

  31. How about a post featuring the best & worst ways to add music to your blog – tunes or no tunes? That is the question.

  32. I’d love to understand how to use Google Adsense from the back end – how to select types of ads to be run. I’d also love to know more about the pin-it button. How to make it show up on old posts with the counter on it without having to manually go into each post to do it (if that is possible).

  33. Great tutorial Kendra! The sidebar widget looks great. Will add these codes later :D

  34. THANK YOU for this tutorial!!!!!!!!! SO helpful!

  35. how come it’s not showing on mine? my INstagram account is public though…

  36. Caroline says:

    I dont see the HTML/Java Script option. ):

  37. Thank you sooo much for this post!!! Without you I would have been struggling with this problem 2 days long :-) ))

  38. Thanks so much for this! extremely helpful

  39. Thank you so much for sharing this. I love instagram!

    • Staci, Isn’t Instagram great?! I love it. Since I use it a bit more personally, I am not quite ready to post it on the blog, but it sure is fun. xoxo, Tauni

  40. I wish I could get this to work as it’s one of the nicest instagram widgets I’ve seen and would fit better with my blog image haha. Oh well! thank you for the tutorial!

  41. A real big thank you from the heart! This was so helpful!

  42. Thank you, thank you !!!

  43. Awesome piece of info!
    won’t be long before i update my page with this!….nice one.
    keep up the good work!

  44. Thanks this was very useful. i have now added instagram to my blog… http://www.ashlylondon.blogspot.com xxx

  45. Thank you!! It was so easy and fast to get my pictures up using this tool!

  46. Thank you so much Kendra for this easy step-by-step guide! I love your blog’s template too! :) Keep up the great work! X

  47. Thanks this was so easy and looks great!

  48. Thank you very much, Good Post :D

  49. Simple Tutorial will make our blog is better, thanks.

  50. Thank you SO SO much for posting this (almost a year ago)! I just did it on my site, and it worked perfectly.

  51. I tried few times and doesn’t work on my blog. Any help?

  52. this was the most helpful post I’ve seen yet.
    thanks a lot !
    xX

  53. Thank you for this! It works all the time…..it’s easy and not complicated. I love it! Thanks again…..

  54. Does this widget update the photos as you add them to instagram or do I have to go back in and do it manually?

  55. IT WORKS! yayy! Thank you so much :)

  56. Thank you for the tutorial!

  57. Thank you very much for this post! :)

    Virna

  58. Thank you, we’ve now added this to our site http://www.foodformass.com – a fitness recipe and nutrition based website :)

  59. Thanks so much for sharing.
    I hope it will support hashtags some days too :)
    Have a nice weekend!!

  60. Hi, I’d like to know how to add an instagram link on blogger that isn’t the regular icon logo, but a circular version of my instagram’s profile pic. Pls help. Thank you!!! <3

  61. So helpful :)

  62. Thank you so much!! This was a great tutorial!!

  63. clarissa says:

    my JavaScript button doesnt seem to work :(

  64. Thank you for making this so easy! I literally had this up and running on my blog in less than 5 minutes.

  65. Thank you so much! I have been trying to figure this out for months!

  66. Thank you, that was very, very easy:)!

Trackbacks

  1. […] How can I add Instagram to my blog or business web page? If you have a self-hosted WordPress site, there are tons of awesome plugins that will let you do this! I am planning to put together a round-up of my faves but in the meantime check out Kyla Roma’s review of Instagram for WordPress. If you are on Blogger, the awesome folks over at SNAP put together this gorgeous tutorial on how to add your Instagram photos to your blog’s sidebar. […]

  2. […] How can I add Instagram to my blog or business web page? If you have a self-hosted WordPress site, there are tons of awesome plugins that will let you do this! I am planning to put together a round-up of my faves but in the meantime check outKyla Roma’s review of Instagram for WordPress. If you are on Blogger, the awesome folks over at SNAP put together this gorgeous tutorial on how to add your Instagram photos to your blog’s sidebar. […]

Leave a Reply

Read previous post:
A Look at SNAP Presenting Sponsor – Scentsy

  This past October, several members of the SNAP team had the opportunity to travel to Meridian, Idaho to visit...

Close