Web Tip add-instagram-to-your-site

Published on May 25th, 2013 | by Mark Ammay


Add Instagram To Your Site

If you want to grow your website and increase interactivity, why not add Instagram? Here’s 3 ways to add Instagram to your site.

This Instagram guide was requested by one of my Instagram friends @charlierodartee (this one’s for you).

Option 1: Adding a pre-made Instagram Badge (good)
Option2: Using a free 3rd party snippet (better)
Option 3: Create an Ajax call using jQuery and Json (best) Download the full customizable code by tweeting or sharing this!

Option 1: Instagram Badges – http://instagram.com/accounts/badges/

Now the first option is to simply just add an Instagram badge to your website. You can simply do this by going to this link: http://instagram.com/accounts/badges/

Disadvantages: This just adds an image and a link, but it doesn’t really add any interactivity.


Option 2: SnapWidget – http://snapwidget.com/

The second way to add Instagram is by using some type of 3rd party plugin or widget. My choice is SnapWidget, a free little service that gives you a few options and then a code snippet.

Advantages: Very easy to use, free, and recommended for a quick-fix.

Disadvantages: Although it’s simple, it is a 3rd party widget, which means if one day their service goes away, then you can say good-bye to your Instagram stream. Also, if their website goes down for any reason, your feed will be blank. You just have less control. For long-term, this may not be the way to go.


Option 3: Custom Ajax Code

Creating your own piece of code is the third way, and in my opinion the way to go for long-term use. Here we are using jQuery (which is nothing more then a compiled JavaScript library), and creating an Ajax call to GET all the data of our Instagram feed, by using Json.

Notice: Doesn’t this look similar to option2, visually? Yes, but it’s your own code and you’re not using a 3rd party code snippet.

Step 1) Get your Instagram User ID and Access Token from here: http://www.pinceladasdaweb.com.br/instagram/access-token/

Step 2) Copy and paste the following code below, into your own website. Edit the 3 variables and put in your own values (var userId, var accessToken, and var numDisplay). If you don’t understand what a variable is, you may want to check out and read: JavaScript Interactivity (Intro to web development).

Step 3) Alternatively Download the full customizable code by tweeting or sharing this!

Step 4) Enjoy, and add me on instagram @markammayblog.

Your Turn

Like this guide on showing you 3 ways to add Instagram to your site? Let me know! Share this, Like this, Tweet this.


About the Author

Hey it's Mark Ammay. I'm a Web Developer with over 5 years of professional experience in the industry. I help individuals start their own website from scratch, as well as through WordPress. I'm also an Online Entrepreneur who blogs at www.MarkAmmay.com

Back to Top ↑