Payback - An Instagram Based Web App

This was a really fun week for me. Apart from the fact that my article made it to the front page of Designer News and on Sidebar (😱), I decided to learn more about working with APIs and ended up building two tiny web apps based on Instagram's API.

Tagr is an app that lets you search for instagram posts based on a tag you submit (View on Github).

Payback is an app that lets you find the people you follow on instagram that don't follow you back ( View on Github). As this was the more complicated application, I thought I'd share with you my process below.

Payback Project Overview #

In order to get the relevant information about the user, I had to get authorisation using the OAuth 2.0 protocol. As this was a purely javascript app with no server component, I had to use the Implicit Authentication method, which was very simple to implement (although less secure). All I had to do was send the user to the following url -

<a href="https://api.instagram.com/oauth/authorize/?client_id=MY-CLIENT-ID&redirect_uri=MY-REDIRECT-URL&response_type=token">Authorize</a>

When the user was redirected to my redirect url, which was defined when I registered my application, the access token was passed with the url. With the information returned, I was able to perform the relationship GET requests.

I broke the process down into three steps, represented by three GET requests -

• GET the list of people that the user follows, the "follows"
• Loop through each of these "follows" and GET their relationship with the user
• If one of these "follows" does not follow the user back, GET their details and add them to the list displayed on the page

Here is my app.js file -

$(document).ready(function() {

	var accessToken = window.location.hash.split("=")[1];
	var userID = accessToken.split(".")[0];

	var unfollowersCount = 0;

	var followsRequestUrl = 'https://api.instagram.com/v1/users/'+userID+'/follows?access_token='+accessToken+'&count=500&callback=?';
	$.getJSON(followsRequestUrl, {}, function(response) {

		$.each(response.data, function(index, value){

			// The ID of the person you follow
			var followsId = value.id;

			// Get the relationship status of the person you are following
			var relationshipRequestUrl = 'https://api.instagram.com/v1/users/'+followsId+'/relationship?access_token='+accessToken+'&callback=?';
			$.getJSON(relationshipRequestUrl, {}, function(relationshipResponse) {

				var relationshipStatus = relationshipResponse.data.incoming_status;

				// If the person does not follow you
				if (relationshipStatus == "none") {

					unfollowersCount++;

					// Get the details of the person
					var unfollowersDetailsRequestUrl = 'https://api.instagram.com/v1/users/'+followsId+'/?access_token='+accessToken+'&callback=?';
					$.getJSON(unfollowersDetailsRequestUrl, {}, function(unfollowersDataResponse) {

						var username = unfollowersDataResponse.data.username;
						var profile = unfollowersDataResponse.data.profile_picture;

						$('#payback').append('<li class="unfollower" data-unfollowerId="'+followsId+'"><a href="https://www.instagram.com/'+username+'" target="_blank"><img src="'+profile+'" alt="'+username+'"><span>'+username+'</span></a></li>');
						$('#unfollowers-count').html(unfollowersCount+" people don't follow back");

					}) // end unfollowersDetailsRequest
				} // end if relationshipStatus
			}) // end relationshipRequest
		}) // end .each follows
	}) // end followsRequest
}) // end document.ready

That's it! Although this was a simple project, I learned something and the process was fun. As always, if you have any suggestions on how I can improve, please leave a comment below.

Some Obvious Advice #

Just read the documentation. It's easier.

One thing I learned through this process was to always just read the documentation. There were a few times I got a bit lost and went googling for ages, when my problem could have easily been solved if I just read the relevant Instagram doc.

For next week, I'm researching favicons. Stay tuned!