How to Integrate Instagram into iOS Application and Share Photo With it

When we are into developing an iOS application related to social networking like posting photos or videos, then we are in need to integrate some of the well-developed social networking APIs into our application.

I also came across such a situation when I was working on an application which was to promote the Campaigns with the help of social media network “Instagram”. Instagram is a social networking service that allows its users to capture photos and videos, modify and share them with friends. So here I am to help you all with the easy integration of the Instagram API into our application.

Before I start, I would like to make clear what is it all about. In my blog I will deal with:

1. How to register your application in Instagram to fetch the “Client ID” for the application.
2. How to call the Instagram API to show the Instagram login screen and fetch the access token.
3. How to fetch the logged in Instagram user information using the access token.
4. How to share a photo with Instagram using iPhone hook.
5. What are the drawbacks of using iPhone hook and the possible way out for it.
6. How to clear the access token (clear the cookies).

So, let’s get started:

1. Registration of your application:

a.)  In order to register your application, you must have an Instagram account. If you don’t have an Instagram account, you have to download the Instagram app on your iOS device and create an account. If you are already an account holder please open the following link in browser:  http://instagram.com/developer/register/ and click on the “login” hyperlink.

b.) Go to “Register Your Application” and then click on the “Register New Client” button.

c.) Please fill the information i.e, Application Name, Description etc. the  “OAuth redirect_uri” specifies where you want the users to be redirected to when they do not authorise the application.

d.) After successful registration, Instagram will provide you CLIENT INFO: “CLIENT ID”, “CLIENT SECRET”, “WEBSITE URL”, “REDIRECT URI”. Please save the following in your applications “Defines.h”.

#define kBaseURL @"https://instagram.com/"
		#define kInstagramAPIBaseURL @"https://api.instagram.com"
		#define kAuthenticationURL @"oauth/authorize/?client_id=%@&redirect_uri=%@&response_type=token&scope=likes+comments+basic"  // comments
		#define kClientID @“YOUR”_CLIENT_ID
		#define kRedirectURI @“YOUR_REDIRECT_URI”

register_client.png ¬

2. Show the Instagram Login screen and fetch access token:

a.) In order to open the Instagram login screen, you will need an UIWebView and its delegate. So, instantiate a webView:  “IBOutlet UIWebView* _webView; ”  in your .h file.
b.) In your “viewWillAppear” method, use the following code:

NSString* urlString = [kBaseURL stringByAppendingFormat:kAuthenticationURL,kClientID,kRedirectURI];
 NSURLRequest* request = [NSURLRequest requestWithURL:[NSURL URLWithString:urlString]];
[_webView loadRequest:request];

c.) Now in your webView delegate method: “shouldStartLoadWithRequest” fetch the access token. The code for fetching the access token is specified in the sample code.

3. Fetch the Instagram user info using access token:

a.) In order to fetch the user info of the logged in Instagram user, you just need to call an api:

https://api.instagram.com/v1/users/self?access_token=“YOUR_ACCESS_Token

b.) The response will be a dictionary which can be fetched using key: “data”.

c.) You will be able to check all the information related to current Instagram user like: “username”, “profile_picture”, “full_name” etc. The fetching and saving of user info has been implemented in the sample application.

4. Post a photo through iPhone hook:

iPhone hook basically provide several ways for your application to interact with Instagram through custom URL schemes and Document Interaction API. You can check the following link to know about iPhone hook and Document Interaction

http://instagram.com/developer/iphone-hooks/

a.) In order to share a photo with Instagram, you have to use the following code on the event:

NSURL *instagramURL = [NSURL URLWithString:@"instagram://"];
if ([[UIApplication sharedApplication] canOpenURL:instagramURL])
{
// See the sample to set the image path and add caption
// OPEN THE HOOK
[self.docFile presentOpenInMenuFromRect:self.view.frame inView:self.view animated:YES];
}
else
{
// show the message that Instagram is not installed on this device
}

b.) Also, you need to ” in your .h file and implement its delegate methods. You can check the sample for the delegate implementation.

5. Drawbacks of using iPhone hook:

As we are using the free versions of the Instagram API integration, there are some drawbacks to that. As,

a.) The iPhone hook opens up the Instagram application irrespective of the user that is logged into the application. This is a major leak and no solution other than asking the Instagram developer support is applicable. You can just show a warning message before opening the iPhone hook or contact the Instagram developers to provide any solution (which will be paid).

b.) The other drawback of using iPhone hook is that when you open the Instagram application through iPhone hook, you do not have the control of your application and can change the caption that is sent via the application. For a solution to this, you have to contact the Instagram developer support.

You must be feeling that if there are 2 major drawbacks then why do we use iPhone hook. I suggest you that there are no other ways you can share photo with Instagram till now so we have to use it until Instagram provides other way to do it.

6. Clearing the access token:

Once you have entered your credentials in Instagram the access token remains in the cookies. So, if you are in need to delete the cookies use:

NSHTTPCookieStorage* cookies = [NSHTTPCookieStorage sharedHTTPCookieStorage];
NSArray* instagramCookies = [cookies cookiesForURL:[NSURL URLWithString:@"https://instagram.com/"]];
for (NSHTTPCookie* cookie in instagramCookies)
{
[cookies deleteCookie:cookie];
}

Hope this blog was helpful to you. You can also check the following links for different API’s of Instagram that can be used:

http://instagram.com/developer/endpoints/
http://instagram.com/developer/api-console/
http://instagram.com/developer/embedding/

You can also download the sample app here

Written By: Neha Sinha, iOS Application developer, Mindfire Solutions

Advertisements

3 thoughts on “How to Integrate Instagram into iOS Application and Share Photo With it

  1. What if I want to build a serverless oAuth for Instagram in Javascript? I am building Phonegap Instagram app but don’t know what to put in Redirect URL in developer app settings. When I use http://localhost, it does not work. For experiment, I put one remote url and it worked fine.

  2. Hi Neha,

    I am going to integrate an instagram api with my ios app.
    I followed steps which you posted in this tutorial its really useful one.
    I facing some issues during time of app running so i need your help.
    Can you please tell me the correct way for creating Redirect URI ?
    I ceated but its not valid one.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s