I’m no coder and not a professional web developer.
That being said, sometimes I take it on myself to code something cool, like adding photos from an Instagram feed to a webpage.
The developers at Instagram were nice enough to create an API with which to interact with their content, but despite full documentation, using that API still remains a mystery to some (points at self).
After reading pretty much every post on the subject, I have come up with a quick guide to putting Instagram photos on your website. Look at the Advanced section for info on how I specified User and Tag.
- Get your Client ID:
You need to have an Instagram Username first (www.instagram.com)
From the Instagram website, login to your Instagram account.
Open a new window and goto www.instagram.com/developer
Click on REGISTER YOUR APPLICATION or REGISTER A NEW CLIENT
1. Give the App a name, any name
2. Give the App a description (optional)
3. Enter the website’s address, full URI (e.g. https://www.mitchellenright.com)
4. Enter the same web address for the redirect URL
5. Click REGISTER
6. You should see your Client ID on the Manage Clients screen. Save that for later use.NOTE: If all you want to do is pull images by a particular hash tag, then all you need is a Client ID. If you need to do something on behalf of a user (commenting, liking, browsing a user feed, etc) then you will need that person’s User ID and Access Token. Those operations are advanced and not covered by this short guide, though I do give you a way to find those variables at the end of this guide. - Add a script to your website that will allow you to access the IG API.
There are a couple different scripts you can use, but I prefer: http://instafeedjs.com/
Rt-Click download and save the .js file. Upload it to your website. - Add the .js file code to the webpage you will be displaying the IG photos on by putting this code in your <head> tag:
<script src=”/addins/Scripts/instafeed.min.js”></script>
Obviously you need to modify the src to reflect where you uploaded it on your website. - Refer to http://instafeedjs.com/Â for additional information on using the plugin.
How to find out your Instagram User ID and Access Token:
Copy/Paste this into your browser: https://instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token
Replace CLIENT-ID with your client id from above.
Replace REDIRECT-URI with the Redirect URI you used to Register the App and hit Enter.
You will probably see an IG Authorization Request screen. Go ahead and click Authorize and the page with redirect.
Look at the URL string and in the path you should see #access_token=???.???.??????????????????????
***The entire string after #access_token= is your Access Token.
***The numbers before the first period are your User ID.
Regarding Access Tokens: Instagram issues different Access Tokens based on the Scope you request when you setup the token. The default is a Read-Only type called “basic” which I can’t see as being bad to expose in code since all it allows is for users to “read any and all data related to a user (e.g. following/followed-by lists, photos, etc.)” Before you ask, YES this means that photos in an account that is Private are accessible via their Access Token.
jQuery Fan? Here is a link to some jQuery Instagram Scripts: http://jquerybyexample.blogspot.com/2013/01/jquery-instagram-plugins.html
The best one is probably this one: https://github.com/potomak/jquery-instagram
Advanced – How To specify user AND tag:
Ok, so before you start, you should know that this is a workaround. IG API doesn’t allow you to pull images by both User and Tag, it’s one or the other. But that doesn’t mean you can’t overcome that limitation with some creative code.
Users before me have suggested adding a unique tag that you use to pull the images onto your webpage, but one complaint about that is that there exists the possibility that others could start using that tag and then their photos would appear alongside your own. My workaround for that is to pull the photos by a unique tag and then filter out the unwanted photos by specifying a username whose photos you wish to display. (This could easily be more than one username if you wanted to code it that way).
While using a unique-tag-only fails easily, this workaround only fails if more than 60 photos (the API limit on photos you can pull) are tagged using your unique tag, and under ordinary circumstances that shouldn’t happen.
It works like this:
First setup a unique tagName to use, then, in the Instafeed code, you can load up “Template” code that is applied to each photo when it’s pulled from IG.
I wrapped each image in a DIV and the default visibility of each div is set to ‘none’. Then, after the images are loaded, the code fires the “Success” function, which sets visibility of images posted by the account specified to ‘block’ so they are visible.
Here is the code for your reference:
<script type=”text/javascript”>
   var userFeed = new Instafeed({
       get: ‘tagged’,
       clientId: ‘CLIENT-ID’,
 tagName: ‘CUSTOM-TAG’,
 links: false,
 resolution: ‘low_resolution’,
 template: ‘<div id={{model.user.username}} style=”display: none;”><a href=”{{link}}”><img src=”{{image}}” /></a></div>’,
 after: function () {
       document.getElementById(“IG-USERNAME”).style.display = ‘block’;
   }
   });
   userFeed.run();
</script>
 **NOTE**
You could probably setup Instafeed to pull by username and then
