Adding An Instagram Feed To Your Website Without A Plugin

With recent updates to the Instagram API and the conversion to the Instagram Graph API, adding an Instagram feed to your website through a plugin has becomes problematic. With a bit of JavaScript you can embed your Instagram media on your website without the use of any plugins or modules as this code works on any website.

What is JavaScript?

JavaScript is the language that powers movement and engagement in websites. It is widely supported by mobile and modern browsers (save for a few of you who turn it off, we know who you are) and makes up the holy trinity of web content along with HTML and CSS.

How do I Add my Instagram Media to my Website?

To do this, you need to go through three steps:

• Register as an app developer with Instagram
• Register a new client in the Instagram Developers website and setup Implicit Authentication
• Generate an access code

Setting up the Client and Implicit Authentication

To setup the new client you need to fill out the required information:

• Name
• Description
• Company Name
• Website
• Website Redirect (where after authentication Instagram sends the user)
• Privacy Page
• Contact Email

Register a new client ID for Instagram Developers

Before you register, click on the security tab and untick the option to Disable OAuth. This is how we will generate the Access Token.

Disable OAuth Demo for Instagram Feed.

With that setup click register and we’ll proceed with generating the access token.

Generating Your Instagram Access Token

To generate your access token you need to go through the process of authenticating to your own application and therefore grant access to your media. To do this, you will need the following information from your client:

• Client ID

Once you have your client ID, in a text editor, copy in the following text:

Now, replace CLIENT-ID with your Client ID and the REDIRECT_URI with your redirect uri. For us, it looks like this:

Copy and paste that url into a browser and hit enter. This will take you to an authentication window. This should look something like the following image.

Authentication screen for a sandbox app to generate an Instagram Access Token

Once you authorize your app/client, you will be redirected to your redirect url as in the image below. At the end of your url you will see your generated access token. Copy and paste the whole url into a text editor.

Instagram Access Token can be found in the url box of your browser window.

In text form, your access token is everything in bold: https://ariasthompson.com/#access_token=5452392704.c020aaa.a8284c2fa0c64499bf69ee69d91dd7bd

Your Access Token is what allows your website to authenticate to Instagram and access your own media. This will not allow you to access anyone else’s media, and you are limited to your last 20 images. This is because you are in Sandbox mode using the basic set of permissions. As creating a large scale feed of your own content is not one of Instagram’s use case scenarios for an approved app, you can’t move past this limitation.

Embedding the Instagram Images on your Website using the API

I am going to keep the explanation behind this as simple as possible. Using JavaScript, you make a request to Instagram’s API which returns a data set that you display through HTML.

HTML Code

Let’s start easy with the HTML code.

That’s it. What we will now do is point the JavaScript to that div with id of insta-feed to populate the feed.

JavaScript

This is written in pure JS or vanilla JS without use of a library. The code is a little cleaner in jQuery, however since it is not guaranteed that all websites have jQuery, we’ve avoided using it here.

	var request = new XMLHttpRequest();
			request.open('GET', 'https://api.instagram.com/v1/users/self/media/recent/?access_token=5452392704.c020aaa.a8284c2fa0c64499bf69ee69d91dd7bd&count=9', true);

			request.onload = function(container) {
			  if (request.status >= 200 && request.status < 400) {
			    // Success!
			    var data = JSON.parse(request.responseText);
			    for (var i=0;i < data.data.length;i++) {
			    	var container = document.getElementById('insta-feed');
			    	var imgURL = data.data[i].images.standard_resolution.url;
			    	console.log(imgURL);
					var div = document.createElement('div');
			        div.setAttribute('class','instapic');
			        container.appendChild(div);
			        var img = document.createElement('img');
			        img.setAttribute('src',imgURL)
			        div.appendChild(img);
			    }

			    console.log(data);
			  } else {
			  }
			};
			request.onerror = function() {
			  // There was a connection error of some sort
			};
			request.send();

When using this, remember to replace my Access Token with yours. If you really want to embed photos from our account I won't stop you, but there is not much benefit from that for anyone. PS: you can't do anything with basic permissions from the API besides display images so we're not too worried.

Basically what this code does is:

• Fetch data with a GET request from the Instagram API
• With success, for each data point returned, create an image, wrap it in a div, and then put it in the insta-feed div

You can see the demo of this example on JSFiddle.