Instagram is an online photo sharing network that enables its users to take pictures and videos, and share them on a variety of social networking platforms. Users can personalize each photo that they upload (for example by adding various effects) and categorize them with a hashtag.

In this tutorial we’ll be building a real-time photo update app. This will allow users to enter a hashtag to which they would like to subscribe. Then, every time a new photo with that hashtag is posted to Instagram, it will be sent to our app which will display it accordingly.

How the Real-time Photo Updates Work

Instagram’s Real-time Photo Updates work by sending notifications to your server every time a new photo is posted to the subscription that you selected. Here’s a break down:

First, your server sends a subscription request to Instagram.

Instagram receives the request and verifies that you really want to subscribe by sending back a response which your server has to send back.

Your server receives the data and sends it back to Instagram.

If the data is the same, Instagram will start sending notifications to your server.

There are four types of subscriptions from which you receive real-time updates : users, tags, locations and geographies. You can read more about each of these in the documentation. In this tutorial, we’re only going to use the tags subscription. This allows you to receive notifications when a new photo is tagged with whichever tags you specify.

body-parser is used for parsing the form data submitted by the user. In this case, the data is the tag that the user wants to subscribe to.

instagram-node-lib is a Node.js library for working with the Instagram API. Once we have the tag provided by the user, this library is used to subscribe to the tag.

socket.io — after subscribing to a specific tag, Instagram sends notifications to the server every time a new photo is posted with the tag that we used. This is where socket.io comes in. It is used for sending the photo data to the front-end every time a new notification is received by the server.

moment is used for formatting the timestamp provided by the Instagram API.

Now we’re ready to look at the app. In app.js we first need to require the dependencies we installed.

Once we have our ID and Secret configured, the next thing we are going to do is create a server instance that will run on port 4000. You can check if the server has started running by using console.log to output the host and port.

Next, have socket.io listen to the Express server. This binds socket.io to the same port as your Express server, so that later on you can use port 4000 when you connect to this socket on the client side.

var io = require('socket.io').listen(server);

Now let’s move on to creating a new route for the home page of the app. All it does is render the home template.

app.get('/', function(req, res){
res.render('home');
});

Creating the Views

According to the default handlebars configuration, all view files should be stored in the views directory. The file home.handlebars will render the form controls into which the user will enter the hashtag that will be used for the real-time photo updates:

With that out of the way, we’re now ready to create the script.js file.

The Meat and Potatoes

Inside of the file script.js is where all of the front-end action happens. Here, we need to use jQuery’s $.get function to fetch the handlebars template from the server. Once it has been fetched, it then must be compiled and stored in a variable. This is the template used for constructing the HTML for displaying the photo.

Back on the server-side (in app.js), our app needs to unsubscribe to all current real-time subscriptions, and then subscribe to the new hashtag that the user has provided. We can do this by making use of the subscribe method in the tags object provided by the instagram-node-lib library. Once the server has received a valid response from Instagram, we then send a response that the subscription has been completed.

When Instagram receives your request to subscribe to a new tag, it sends a GET request your callback URL. This request contains a query parameter. All the server has to do is to send it back to Instagram for the verification to pass.

Every time a new photo with that tag is posted on Instagram, it automatically sends a notification to your server. This time its a POST request to the callback_url that you specified (you will have to change this in the deployment section). Note that this request doesn’t contain any data about the posted photo. It only contains data about the time and the subscription from which it originated. That is why you have to make a separate request to get the recently posted photo. Once a response is returned, create a new object named photo and then store all the data that you want to return in a new variable. In this case, only the following is needed: username, profile photo, the timestamp with which the image was posted, the URL of the photo, and the caption text. Lastly, inform the client-side that a new photo is available.

Displaying the Result

Going back to the client-side (script.js), let’s use the jQuery Image Preloader Plugin to preload the image when a new photo comes in. This will fully download the image on the client-side before showing it to the user. Once the image has been preloaded, construct the new HTML using the template and the photo data. Next, we’re going to make use of the jQuery Backstretch plugin to set the image as the full page background image, as well as vague.js to blur the background. After that, you can append the HTML to the page and then show it with the fadeIn effect. Finally, remove the last image that was shown.

As we begin to wrap things up, let’s quickly add some CSS to our application. You can see this in public/css/style.css. View the file on GitHub.

Deployment

At this point you can now run the app:

node app.js

However, when you navigate to http://localhost:4000/, enter a hashtag and click START, nothing will happen. And if you look at the console then you’ll see the following error:

APISubscriptionError occurred: Invalid response in _request

Hmm! What gives?

The problem is that the app should be accessible through the internet, so as to receive Instagram’s response. As we are running the app on localhost, this unfortunately won’t work. Luckily, we can use ngrok to expose our app the internet. Once you have downloaded and installed ngrok, you can run it by executing the following command in your terminal:

ngrok http 4000

This exposes the Express server to the internet. Be sure to change the callback_url in the app.js file, to use the https URL that ngrok returns. If you plan to deploy an app later on, it should also be an https URL.

Once the user has subscribed, the app will start receiving photo data from the server via socket.io and then display it.

Taking Things Further

If you want to experiment with this app and make some of your own changes, you might want to look into nodemon. This automatically restarts the server every time you make a change to your Node application and is very handy for development.

Then there’s the question of persistence. Once you’re happy with things, and if you’re on a Unix-based system, you can install Supervisor on your server. This allows you to run the app persistently. Simply running the app with nodemon wouldn’t suffice, because the process is terminated the moment you log out of the server.

Final Thoughts

That’s it! In this tutorial, you’ve learned to work with the real-time capabilities of the Instagram API using socket.io. Just keep in mind the limits, namely the API calls that you can make to Instagram (which means that the number of users who can subscribe to different tags is limited — especially if the tags are popular). If this is the case, then the server is going to receive a lot of notifications from Instagram and the number of API calls that you can make are going to run out easily. Other than that, you’re free to use the Instagram API however you like.

There are lots of other possibilities with this API, you can embed Instagram posts or integrate it with your mobile applications. As for our app, a perfect use case would be at an event, where you ask the participants to post photos with a specific tag. The event organizer could subscribe to this tag and project the app to a screen, so that everyone can see the photos being shared.

I’d love to hear your thoughts about this app and the Instagram API in general in the comments below.

Wern is a web developer from the Philippines. He loves building things for the web and sharing the things he has learned by writing in his blog. When he's not coding or learning something new, he enjoys watching anime and playing video games.